@extends('layouts.app')

@section('title', $data['title'])

@section('content')
<div class="container mt-3">
    <!-- Button Container -->
    <div class="row mb-3">
        <div class="col-md-12 d-flex justify-content-end">
            <button type="button" id="create_country" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCountryModal">
                Add New Country
            </button>
        </div>
    </div>

    <!-- Add Country Modal -->
    <div class="modal fade" id="addCountryModal" tabindex="-1" aria-labelledby="addCountryModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCountryModalLabel">Add New Country</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCountryForm">
                        @csrf
                        <input type="hidden" id="countryId" name="id">
                        <div class="mb-3">
                            <label for="countryCode" class="form-label">Country Code</label>
                            <input type="text" class="form-control" id="countryCode" name="code" placeholder="Enter Country Code" required>
                        </div>
                        <div class="mb-3">
                            <label for="countryName" class="form-label">Country Name</label>
                            <input type="text" class="form-control" id="countryName" name="name" placeholder="Enter Country Name" required>
                        </div>
                        <div class="mb-3">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Existing DataTable code -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="datatable" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Country Code</th>
                                <th>Country Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- DataTables will populate this -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- End Page-content -->

<!-- CSRF Token Meta Tag -->
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        var countrylistAjax = '{{ route("countrylist.ajax") }}';
        var addCountryListAjax = '{{ route("add.countrylist.ajax") }}';
        var countryGet = '{{ route("country.get") }}';
        var countryDelete = '{{ route("country.delete") }}';


        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var locationPageLength = 10;
         let viewAllClicked = false;

        $('#datatable').DataTable({
            "columnDefs": [{ "sortable": false, "targets": [] }],
            "order": [[0, 'desc']],
            "processing": true,
            "serverSide": true,
            "pageLength": locationPageLength,
            "ajax": {
                "url": countrylistAjax,
                "type": "POST",
                "data": function (d) {
                    d._token = csrfToken;
                },
                "error": function (xhr, error, thrown) {
                    console.error('Ajax error:', thrown);
                }
            },
            "columns": [
                {"data": "id"},
                {"data": "code"},
                {"data": "name"},
                {"data": "action","orderable": false, "searchable": false}
            ],
            "initComplete": function() {
                const $label = $('#datatable_filter label');
                const $searchInput = $('#datatable_filter input');

                // Remove the text node "Search:"
                $label.contents().filter(function() {
                    return this.nodeType === 3;
                }).remove();

                $searchInput
                    .addClass('form-control search-input')
                    .attr('placeholder', 'Search menu...');

                $searchInput.wrap('<div class="position-relative"></div>');
                $searchInput.after('<i class="bx bx-search-alt search-icon"></i>');
            },
             "drawCallback": function() {
                const $info = $('#datatable_info');
                 $('#viewAllLink').remove();

                 const linkHtml = ` &nbsp;|&nbsp; <a href="javascript:void(0);" id="viewAllLink">
                        ${viewAllClicked ? 'Show Less <i class="fas fa-chevron-up"></i>' : 'View All <i class="fas fa-chevron-right"></i>'}
                    </a>`;

                    $info.append(linkHtml);

                $('#viewAllLink').off('click').on('click', function () {
                    const table = $('#datatable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

                    table.page.len(usersPageLength).draw(false);  // false = stay on current page
                });
            }
        });

        $('#addCountryForm').on('submit', function(e) {
            e.preventDefault();
            var formData = $(this).serialize();

            $.ajax({
                url: addCountryListAjax,
                type: 'POST',
                data: formData,
                success: function(response) {
                    toastr.success(response.success);
                    $('#addCountryModal').modal('hide');
                    $('#datatable').DataTable().ajax.reload();
                },
                error: function(xhr) {
                    var errorMessage = xhr.responseJSON && xhr.responseJSON.error ? xhr.responseJSON.error : 'An error occurred. Please try again.';
                    toastr.error(errorMessage);
                }
            });
        });

        $(document).on('click', '.edit-btn', function() {
            var id = $(this).data('id');
            var url = countryGet+'?id='+id;
            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    console.log(response);
                    $('#addCountryModal #countryId').val(response.id);
                    $('#addCountryModal #countryName').val(response.name);
                    $('#addCountryModal #countryCode').val(response.code);

                    $('#addCountryModal #addCountryModalLabel').text('Edit Country - ' + response.name);

                    $('#addCountryModal').modal('show');
                }
            });
        });

        $(document).on('click', '#create_country', function() {
            $('#addCountryForm')[0].reset();
            $('#addCountryModal #countryId').val('');
            $('#addCountryModal #countryName').val('');

            $('#addCountryModal #addCountryModalLabel').text('Add New Country');

            $('#addCountryModal').modal('show');
        });

        $(document).on('click', '.delete-btn', function(e) {
            e.preventDefault();

            var countryId = $(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!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Perform the delete request using jQuery
                    $.ajax({
                        url : countryDelete+'?id='+countryId,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        success: function(data) {
                            if (data.message === 'Country deleted successfully') {
                                Swal.fire(
                                    'Deleted!',
                                    'Country has been deleted.',
                                    'success'
                                );
                                // Reload the DataTable
                                $('#datatable').DataTable().ajax.reload();
                            } else {
                                Swal.fire(
                                    'Error!',
                                    'An error occurred while deleting the country.',
                                    'error'
                                );
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire(
                                'Error!',
                                'An unexpected error occurred.',
                                'error'
                            );
                        }
                    });
                }
            });
        });

    });
</script>
@endsection