@extends('layouts/contentLayoutMaster')

@section('title', 'Loose Category')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection
@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            @if(Auth::user()->role == "SUPER_ADMIN" || Auth::user()->role == "ADMIN" || Auth::user()->role == "STOCK_MANAGER")
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-category">Add Category</button>
            @endif
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Category</th>
                            <th>ShortCode</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($categories as $key => $category)
                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $category->category }}</td>
                                <td>{{ $category->short_code }}</td>
                                <td>
                                <button type="button" class="btn btn-success"  data-bs-toggle="modal" data-bs-target="#edit-category" onclick="js:editCategoryView('<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/gold_management/loose_jewellery/category_index.blade.php</b> on line <b>37</b><br />
',{{ $category->id }})">Edit </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="modal fade text-start" id="add-category" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="add-loose-category-form">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel17">Add New Category</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="category" class="form-control mb-2" placeholder="Category Name" name="category">
                    <input type="text" id="short_code" class="form-control mb-2" placeholder="Short Code" name"short_code">
                
                    <input type="hidden" id="role" class="form-control mb-2" value="STOCK_MANAGER">
                    
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="js:addCategory('{{ $token }}')">Save</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="edit-category" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="edit-loose-category-form">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel17"> Edit Category</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id" class="form-control mb-2" name="id">
                    <input type="text" id="category" class="form-control mb-2" placeholder="Category Name" name="category">
                    <input type="text" id="short_code" class="form-control mb-2" placeholder="Short Code" name="short_code">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="js:editCategory('{{ $token }}')">Update</button>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/custom/common.js')) }}"></script>
    <script>
        function editCategoryView(token, categoryId){
            var id = categoryId;
            try{
                $.ajax({
                    url: "/api/loose-jewellery/category-detail",
                    type: "get",
                    dataType: 'json',
                    headers: {
                        'Authorization': 'Bearer '+token 
                    },
                    data:{
                        'id':id
                    },
                    success: function(response){
                        console.log(response);
                       // if(response.status === true){
                            $('#edit-category #id').val(response.id);
                            $('#edit-category #category').val(response.category);
                            $('#edit-category #short_code').val(response.short_code);
                            
                        //}
                    }
                });
            }catch(e){
                console.log(e);
            }
        }
        
        function editCategory(token){
            
            try{
                var formData = new FormData(document.getElementById('edit-loose-category-form'));
                var id = $('#edit-category #id').val();
                var category = $('#edit-category #category').val();
                var short_code = $('#edit-category #short_code').val();
                $.ajax({
                    url: "/api/loose-jewellery/editCategory",
                    type: "post",
                    dataType: 'json',
                    headers: {
                        'Authorization': 'Bearer '+token 
                    },
                    /*data:{
                        'id':id,'category':category,'short_code':short_code
                    },*/
                    data:formData,
                    async:false,
                    cache:false,
                    contentType:false,
                    processData:false,
                    success: function(response){
                        console.log(response);
                        $("#edit-category").modal('hide');
                        setTimeout(function () {
                            toastr["success"](
                                "",
                                response.msg,
                                {
                                    closeButton: false,
                                    tapToDismiss: false,
                                    rtl: "rtl",
                                }
                            );
                        }, 2000);
                        location.reload();
                    }
                });
            }catch(e){
                console.log(e);
            }
                
        }
        
        function addCategory(token){
            
            try{
                //var formData = new FormData(document.getElementById("add-loose-category-form"));
                var formData = new FormData(document.getElementById('add-loose-category-form'));
                //console.log('formdata = '+formData);
                $.ajax({
                    url: "/api/loose-jewellery/addCategory",
                    type: "post",
                    dataType: 'json',
                    headers: {
                        'Authorization': 'Bearer '+token 
                    },
                    data:formData,
                    async:false,
                    cache:false,
                    contentType:false,
                    processData:false,
                    success: function(response){
                        //console.log(response);
                        $("#add-category").modal('hide');
                        setTimeout(function () {
                            toastr["success"](
                                "",
                                response.msg,
                                {
                                    closeButton: false,
                                    tapToDismiss: false,
                                    rtl: "rtl",
                                }
                            );
                        }, 2000);
                        location.reload();
                    }
                });
            }catch(e){
                console.log(e);
            }
                
        }
    </script>
@endsection