@include('admin.dash.layout.header')
<div class="nk-content ">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="components-preview wide-md mx-auto">
                    <div class="nk-block nk-block-lg">
                        <div class="nk-block-head">
                            <div class="nk-block-head-content">
                                <h4 class="nk-block-title">Category</h4>
                                <div class="nk-block-des">
                                <p>Here, you can see all the <code class="code-class"> category</code> available on Stizee.</p>

                            
                                </div>
                            </div>

                        </div>

                        <a href="javascript:;"  onclick="$('#new_course').modal('show')" class="btn btn-primary" style="float:right"><em class="icon ni ni-plus"></em><span>Add Category</span></a>

                        <table class="datatable-init-export nowrap nk-tb-list is-separate" data-auto-responsive="false" data-order="5">
                            <thead>
                                <tr class="nk-tb-item nk-tb-head">
                                     
                                    <th class="nk-tb-col tb-col-sm"><span>Title</span></th>
                                    <th class="nk-tb-col"><span>Date</span></th>
                                     
                                    <th class="nk-tb-col nk-tb-col-tools">
                                        <ul class="nk-tb-actions gx-1 my-n1">
                                            
                                        </ul>
                                    </th>
                                </tr><!-- .nk-tb-item -->
                            </thead>
                            <tbody>
                                @foreach($categories as $d)
                                <tr class="nk-tb-item">
                                  
                                    <td class="nk-tb-col tb-col-sm">
                                        <span class="tb-product"> 
                                            <span class="title">{{$d->title}}</span>
                                        </span>
                                    </td>
                                    
                                    <td class="nk-tb-col tb-col-md">
                                        <span class="tb-sub">{{$d->created_at}}</span>
                                    </td>
                                   
                                    <td class="nk-tb-col nk-tb-col-tools">
                                        <ul class="nk-tb-actions gx-1 my-n1">
                                            <li class="me-n1">
                                                <div class="dropdown">
                                                    <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <ul class="link-list-opt no-bdr"> 
                                                       
                                                        <li><a href="javascript:;" onclick="edit_item('{{$d->id}}',`{{$d->title}}`)" ><em class="icon ni ni-pen"></em><span>Edit Category</span></a></li> 
                                                            <li><a href="javascript:;" onclick="delete_item('{{$d->id}}')"><em class="icon ni ni-trash"></em><span>Remove Category</span></a></li>
  
                                          
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </td>
                                </tr><!-- .nk-tb-item -->
                               @endforeach
                            </tbody>
                        </table><!-- .nk-tb-list -->
                    </div> <!-- nk-block -->
                </div><!-- .components-preview -->
            </div>
        </div>
    </div>
</div>
@include('admin.dash.layout.footer')


<div class="modal fade" role="dialog" id="new_course">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-md">
                <form id="new_cat">
                    <h5 class="title">New Category</h5>
                    <div class="form-group">
                        <label>
                            Enter Category Title
                        </label>
                        <input type="text" name="title" class="form-control" required>
                    </div>


 
                    <button type="submit" class="btn btn-primary">Save</button>
                </form>
            </div><!-- .modal-body -->
        </div><!-- .modal-content -->
    </div><!-- .modal-dialog -->
</div><!-- .modal -->


<div class="modal fade" role="dialog" id="edit_modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-bs-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-md">
                <form id="enew_cat">
                    <h5 class="title">Edit Category</h5>
                    <div class="form-group">
                        <label>
                            Enter Category Title
                        </label>
                        <input type="text" name="etitle" id="etitle" class="form-control" required>
                    </div>


 
                    <button type="submit" class="btn btn-primary">Save</button>
                </form>
            </div><!-- .modal-body -->
        </div><!-- .modal-content -->
    </div><!-- .modal-dialog -->
</div><!-- .modal -->

 


<script>
    $(document).ready(function() {
        $('#new_cat').submit(function(e) {
            e.preventDefault(); // Prevent the default form submission.

            // Show the progress bar when the form is being submitted
            
            // Prepare the form data
            var formData = new FormData(this);
            $("button").attr("disabled", true);
            formData.append("_token","{{csrf_token()}}")
            
            // Send the data to the server using AJAX
            $.ajax({
                type: 'POST',
                url: '/admin/store_category', // Replace with the URL to handle the form submission on the server
                data: formData,
                contentType: false,
                processData: false,
                
                success: function(response) {
                    // Handle the server response here
                    console.log(response);
                    // Close the modal if needed
                    $('#new_course').modal('hide');
                    Swal.fire("", response.message, "success")
                    location.reload()
                },
                error: function(xhr, status, error) {
                    // Handle errors here
                    console.log(xhr.responseText);
                },
                complete: function() {
                    // Hide the progress bar when the AJAX request is complete, whether it's successful or not
                    $('.progress').hide();
                    $("button").attr("disabled", false);
                }
            });
        });

        $('#enew_cat').submit(function(e) {
            e.preventDefault(); // Prevent the default form submission.

            // Show the progress bar when the form is being submitted
            
            // Prepare the form data
            var formData = new FormData(this);
            $("button").attr("disabled", true);
            formData.append("_token","{{csrf_token()}}")
            formData.append("id",$("#id").val())
            
            // Send the data to the server using AJAX
            $.ajax({
                type: 'POST',
                url: '/admin/update_category', // Replace with the URL to handle the form submission on the server
                data: formData,
                contentType: false,
                processData: false,
                
                success: function(response) {
                    // Handle the server response here
                    console.log(response);
                    // Close the modal if needed
                    $('#new_course').modal('hide');
                    Swal.fire("", response.message, "success")
                    location.reload()
                },
                error: function(xhr, status, error) {
                    // Handle errors here
                    console.log(xhr.responseText);
                },
                complete: function() {
                    // Hide the progress bar when the AJAX request is complete, whether it's successful or not
                    $('.progress').hide();
                    $("button").attr("disabled", false);
                }
            });
        });
    });

    function delete_item(id) {

        if (confirm("Are you sure?")) {
            $("button").attr("disabled", true)
            $.ajax({
                type: "POST",
                url: "/admin/delete_category", // Replace with the actual server-side script URL
                data: {
                    id: id,
                    "_token": "{{csrf_token()}}"
                },
                success: function(response) {
                    // Handle successful response from the server

                    // You can clear the form here if needed
                    location.reload()
                    $("button").attr("disabled", false)
                    Swal.fire("", response.message, "success")

                },
                error: function() {
                    // Handle error if the AJAX request fails
                    alert("An error occurred while submitting the form.");
                    $("button").attr("disabled", false)
                }
            });
        }
    }

    function edit_item(id,title){
        $("#edit_modal").modal("show")
        $("#etitle").val(title)
        $("#id").val(id)
    }
</script>

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