@extends('admin.layout.template')
@section('title', 'Country')
@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 Country</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{route('add-country')}}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="meta-name" class="form-label">Country</label>
                                        <input type="text" id="meta-name" name="name" class="form-control" placeholder="Enter country name" required>
                                  </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="meta-tag" class="form-label">Currency</label>
                                        <input type="text" id="meta-tag" name="currency" class="form-control" placeholder="Enter currency Symbol" required>
                                    </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>Country 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-country') }}",
            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', '.deleteCountry', 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-country') }}/" + 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', '.editCountry', 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 saveCountry" 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', '.saveCountry', 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-country') }}/" + 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 country.',
                });
            }
        });
    });




    });


</script>


@endsection