@extends("dashboard.layouts.app")
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.4.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
@section("title")
	{{__('messages.Categories')}}
@endsection
@section("content")
 <div class="midde_cont">
    <div class="container-fluid">
     <div class="row column_title">
        <div class="col-md-12">
           <div class="page_title">
              <h2>{{__('messages.Categories')}}</h2>
              
           </div>
        </div>
     </div>
    
     {{-- Add Modal --}}
<div class="modal fade" id="AddCategoryModal" tabindex="-1" aria-labelledby="AddCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddCategoryModalLabel">{{__('messages.Add Item Category Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <ul id="save_msgList"></ul>

                <div class="form-group mb-3">
                    <label for=""> {{__('messages.Name')}}</label>
                    <input type="text" required class="name form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.Serial Number')}}</label>
                    <input type="text" required class="Serial form-control">
                </div>
              
              <select id="status" class="status form-control">
              <option value="">{{__('messages.Select status')}}</option>
              <option value="published">{{__('messages.published')}}</option>
              <option value="draft">{{__('messages.draft')}}</option>
              
              <!-- Add more options for other names as needed -->
            </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-primary add_categories">{{__('messages.Save')}}</button>
            </div>

        </div>
    </div>
</div>


{{-- Edit Modal --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">{{__('messages.Edit & Update Item Category Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">

                <ul id="update_msgList"></ul>

                <input type="hidden" id="category_id" />

                <div class="form-group mb-3">
                    <label for="">{{__('messages. Name')}}</label>
                    <input type="text" id="name" required class="form-control">
                </div>
                <div class="form-group mb-3">
                    <label for="">{{__('messages.Serial Number')}}</label>
                    <input type="text" id="SerialUbdate" required class="form-control">
                </div>
                <div class="form-group mb-3">
                    
                </div>
                <label for="">{{__('messages.status')}}</label>
               <select id="statusUbdate" class="status form-control">
              <option value="">{{__('messages.Select status')}}</option>
              <option value="published">{{__('messages.published')}}</option>
              <option value="draft">{{__('messages.draft')}}</option>
              
              <!-- Add more options for other names as needed -->
            </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="submit" class="btn btn-primary update_Category">{{__('messages.Update')}}</button>
            </div>

        </div>
    </div>
</div>
{{-- Edn- Edit Modal --}}


{{-- Delete Modal --}}
<div class="modal fade" id="DeleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{__('messages.Delete Item Category Data')}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>{{__('messages.Confirm to Delete Data ?')}}</h4>
                <input type="hidden" id="deleteing_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
                <button type="button" class="btn btn-primary delete_Category">{{__('messages.Yes Delete')}}</button>
            </div>
        </div>
    </div>
</div>
{{-- End - Delete Modal --}}

<div class="container py-5">
    <div class="row">
        <div class="col-md-12">

            <div id="success_message"></div>

            <div class="card">
                <div class="card-header">
                    <h4>
                       {{__('messages.Category Data')}}
                        <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                            data-bs-target="#AddCategoryModal">{{__('messages.Add Category')}}</button>
                    </h4>
                </div>
                <div class="d-flex flex-row-reverse m-3">
                    <div class="w-20">
                        <div class="form-group">
                            <input type="text" name="serach" id="serach" placeholder="Search.." class="form-control" />
                        </div>
                    </div>
                </div>
                
                <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                
                <div class="card-body">
                    <table class="table table-striped table-bordered customwidthth" id="datatableCategory">
                        <thead class="thead-dark">
                            <tr>
                                <th>{{__('messages.ID')}}</th>
                                <th>{{__('messages.name')}}</th>
                                <th>{{__('messages.Serial Number')}}</th>
                                <th>{{__('messages.status')}}</th>
                                <th>{{__('messages.Action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                         @include('newDashboard.components.pagination')
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


   
    </div> 
  </div>
@endsection
@section('scripts')
<script src="{{asset('metronic/js/pagination.js')}}"></script>
<script>
$(document).on('click', '.add_categories', function(e) {
    e.preventDefault();

    $(this).text('Sending..');

    var data = {
        '_token': $('meta[name="csrf-token"]').attr('content'),
        'name': $('.name').val(),
        'Serial': $('.Serial').val(),
        'status': $('.status').val(),
    }

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "POST",
        url: "/admin/ItemCategory",
        data: data,
        dataType: "json",
        success: function(response) {
            if (response.status == 400) {
                $('#save_msgList').html("");
                $('#save_msgList').addClass('alert alert-danger');
                $.each(response.errors, function(key, err_value) {
                    $('#save_msgList').append('<li>' + err_value + '</li>');
                });
                $('.add_categories').text('Save');
            } else {
                $('#save_msgList').html("");
                $('#success_message').addClass('alert alert-success');
                $('#success_message').text(response.message);
                $('#AddCategoryModal').find('input').val('');
                $('.add_categories').text('Save');
                $('#AddCategoryModal').modal('hide');
                fetchcategories();
            }
        }
    });

});

$(document).on('click', '.editbtn', function(e) {
    e.preventDefault();
    var category_id = $(this).val();
    //alert(category_id);

    $('#editModal').modal('show');
    $.ajax({
        type: "GET",
        url: "/admin/edit-Category/" + category_id,
        success: function(response) {
            if (response.status == 404) {
                $('#success_message').addClass('alert alert-success');
                $('#success_message').text(response.message);
                $('#editModal').modal('hide');
            } else {
                console.log(response);
                $('#name').val(response.Category.name);
                $('#SerialUbdate').val(response.Category.serial_number);

                // Assuming response.Category.status contains the value to be selected
                var statusValue = response.Category.status;

                // Check if the statusValue exists in the dropdown
                var statusOption = $('#statusUbdate option[value="' + statusValue + '"]');

                if (statusOption.length > 0) {
                    // If the option exists, set it as selected
                    statusOption.prop('selected', true);
                } else {
                    // If the option doesn't exist, add it and set it as selected
                    $('#statusUbdate').append('<option value="' + statusValue + '" selected>' + statusValue + '</option>');
                }

                $('#category_id').val(category_id);
            }
        }
    });
    $('.btn-close').find('input').val('');

});

$(document).on('click', '.update_Category', function(e) {
    e.preventDefault();

    $(this).text('Updating..');
    var id = $('#category_id').val();

    var data = {
        '_token': $('meta[name="csrf-token"]').attr('content'),
        'name': $('#name').val(),
        'Serial': $('#SerialUbdate').val(),
        'status': $('#statusUbdate').val(),
    };

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "PUT",
        url: "/admin/update-Category/" + id,
        data: data,
        dataType: "json",
        success: function(response) {
            $('#success_message').addClass('alert alert-success');
            $('#success_message').text(response.message);
            $('#editModal').modal('hide');
            fetchcategories();

        },
        error: function(xhr, status, error) {
            console.error(xhr.responseText);
            // Handle error
        },
        complete: function() {
            // This block will run after success or error
            $('.update_Category').text('Update');
        }
    });
});


$(document).on('click', '.deletebtn', function() {
    var category_id = $(this).val();
    $('#DeleteModal').modal('show');
    $('#deleteing_id').val(category_id);
});

$(document).on('click', '.delete_Category', function(e) {
    e.preventDefault();

    $(this).text('Deleting..');
    var id = $('#deleteing_id').val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "DELETE",
        url: "/admin/delete-Category/" + id,
        dataType: "json",
        success: function(response) {
            // console.log(response);
            if (response.status == 404) {
                $('#success_message').addClass('alert alert-success');
                $('#success_message').text(response.message);
                $('.delete_Category').text('Yes Delete');
            } else {
                $('#success_message').html("");
                $('#success_message').addClass('alert alert-success');
                $('#success_message').text(response.message);
                $('.delete_Category').text('Yes Delete');
                $('#DeleteModal').modal('hide');
                fetchcategories();
            }
        }
    });
});
</script>
@endsection