@extends('admin.layout.template')
@section('title', 'Category')
@section('content')

<div class="page-content">

    <!-- Start Container Fluid -->
    <div class="container-xxl">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title d-flex align-items-center gap-1"><iconify-icon icon="solar:settings-bold-duotone" class="text-primary fs-20"></iconify-icon>Add category</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{route('add-category')}}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="meta-name" class="form-label">Category</label>
                                        <input type="text" id="meta-name" name="name" class="form-control" placeholder="Enter category name" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="meta-tag" class="form-label">Country</label>
                                        <select class="form-control" placeholder="select country" name="country" required>
                                            @foreach(App\Models\Country::get() as $item)
                                            <option value="{{$item->id}}">{{$item->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                
 <!-- File Upload -->
     <div class="col-lg-12">
                                             <div class="dropzone" id="myAwesomeDropzone" data-plugin="dropzone" data-previews-container="#file-previews" data-upload-preview-template="#uploadPreviewTemplate">
                                                  <div class="fallback">
                                                       <input name="file" type="file" multiple />
                                                  </div>
                                                  <div class="dz-message needsclick">
                                                       <i class="bx bx-cloud-upload fs-48 text-primary"></i>
                                                       <h3 class="mt-4">Drop your images here, or <span class="text-primary">click to browse</span></h3>
                                                       <span class="text-muted fs-13">
                                                            1600 x 1200 (4:3) recommended. PNG, JPG and GIF files are allowed
                                                       </span>
                                                  </div>
</div>
                                             </div>




                                
                            </div>
                            <div class="text-end">
                                <button type="submit" class="btn btn-success">Save Change</button>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="row">
                    <div class="col-xl-12">
                        <div class="card">

                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table align-middle mb-0 table-hover table-centered">
                                        <thead class="bg-light-subtle">
                                            <tr>
                                                <th>SL.NO</th>
                                                <th>category Name</th>
                                                <th>Currency</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                                <!-- end table-responsive -->
                            </div>

                        </div>
                    </div>

                </div>


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


<script>
    $(function() {

        // $('.table').DataTable({
        //     processing: true,
        //     serverSide: true,
        //     ajax: "{{ route('get-category') }}",
        //     columns: [{
        //             data: 'DT_RowIndex',
        //             name: 'DT_RowIndex'
        //         },
        //         {
        //             data: 'name',
        //             name: 'name'
        //         },

        //         {
        //             data: 'currency',
        //             name: 'currency'
        //         },

        //         {
        //             data: 'action',
        //             name: 'action'
        //         },

        //     ],
        //     "select": {
        //         'style': 'multi',
        //         'selector': 'td:first-child' //only checkbox can select row 
        //     },
        // });

        // SweetAlert Delete Confirmation
        $(document).on('click', '.deletecategory', function(e) {
            e.preventDefault(); // 🔥 stop page reload or navigation
            var id = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                customClass: {
                    popup: 'rounded-3 shadow-lg'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ url('delete-category') }}/" + id,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.success,
                                showConfirmButton: false,
                                timer: 1500
                            });
                            $('.table').DataTable().ajax.reload();
                        },
                        error: function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: 'Something went wrong while deleting.',
                            });
                        }
                    });
                }
            });
        });


        // EDIT (inline)
        $(document).on('click', '.editcategory', function(e) {
            e.preventDefault();
            var row = $(this).closest('tr');
            var id = $(this).data('id');
            var name = row.find('td:eq(1)').text();
            var currency = row.find('td:eq(2)').text();

            // Replace cells with input fields
            row.find('td:eq(1)').html('<input type="text" class="form-control form-control-sm" value="' + name + '">');
            row.find('td:eq(2)').html('<input type="text" class="form-control form-control-sm" value="' + currency + '">');

            // Change button to Save/Cancel
            $(this).replaceWith('<button class="btn btn-sm btn-success savecategory" data-id="' + id + '">Save</button> <button class="btn btn-sm btn-secondary cancelEdit">Cancel</button>');
        });

        // CANCEL edit
        $(document).on('click', '.cancelEdit', function(e) {
            e.preventDefault();
            $('.table').DataTable().ajax.reload();
        });

        // SAVE (update via AJAX)
        $(document).on('click', '.savecategory', function(e) {
            e.preventDefault();
            var id = $(this).data('id');
            var row = $(this).closest('tr');
            var name = row.find('td:eq(1) input').val();
            var currency = row.find('td:eq(2) input').val();

            $.ajax({
                url: "{{ url('update-category') }}/" + id,
                type: 'PUT',
                data: {
                    _token: '{{ csrf_token() }}',
                    name: name,
                    currency: currency
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Updated!',
                        text: response.success,
                        timer: 1500,
                        showConfirmButton: false
                    });
                    $('.table').DataTable().ajax.reload();
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'Failed to update category.',
                    });
                }
            });
        });




    });
</script>


@endsection