@extends('layouts.app')

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

@section('content')
<div class="container mt-3">
    <!-- Add this section for the Select2 dropdown for cities -->
    <div class="row mb-3 city_dropdown">
        <div class="col-md-4">
            <!-- Country dropdown section -->
            <label for="filterCountry" class="form-label">Country</label>
            <select id="filterCountry" name="country" class="form-select" required>
                <option value="" disabled selected>Select country</option>
                <!-- Populate this with countries dynamically if needed -->
            </select>
        </div>
        <div class="col-md-4">
            <!-- State dropdown section -->
            <label for="filterState" class="form-label">State</label>
            <select id="filterState" name="state" class="form-select" required>
                <option value="" disabled selected>Select state</option>
                <!-- Populate this with states dynamically if needed -->
            </select>
        </div>
        <div class="col-md-4 text-end align-text-bottom">
            <button type="button" id="create_city" class="btn btn-primary text-end" data-bs-toggle="modal" data-bs-target="#addCityModal">
                Add New City
            </button>
        </div>
    </div>
    <!-- Add City Modal -->
    <div class="modal fade" id="addCityModal" tabindex="-1" aria-labelledby="addCityModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCityModalLabel">Add New City</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCityForm">
                        @csrf
                        <input type="hidden" id="cityId" name="id">
                        <div class="mb-3">
                            <label for="modalCountry" class="form-label">Country</label>
                            <select id="modalCountry" name="country" class="form-select" required>
                                <option value="" disabled selected>Select country</option>
                                <!-- Populate this with countries dynamically if needed -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="modalState" class="form-label">State</label>
                            <select id="modalState" name="state" class="form-select" required>
                                <option value="" disabled selected>Select state</option>
                                <!-- Populate this with states dynamically if needed -->
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="cityName" class="form-label">City Name</label>
                            <input type="text" class="form-control" id="cityName" name="city_name" placeholder="Enter City 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="cityTable" class="table table-striped dt-responsive nowrap w-100">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Country Name</th>
                                <th>State Name</th>
                                <th>City 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 ajaxURLSearchCountry = '{{ route("search.countrylist") }}';
        var ajaxURLSearchState = '{{ route("search.statelist") }}';
        var ajaxURLSearchCity = '{{ route("search.citylist") }}';
        var ajaxURLSaveUser = '{{ route("user.save") }}';
        var addCitylistAjax = '{{ route("add.citylist.ajax") }}';
        var cityGet = '{{ route("city.get") }}';
        var cityDelete = '{{ route("city.delete") }}';

        var ajaxURLState = '{{ route('statelist.ajax') }}';
        var ajaxURLCity = '{{ route('citylist.ajax') }}';
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        var locationPageLength = 10;
        let viewAllClicked = false;
        // Initialize DataTable for cities
        $('#cityTable').DataTable({
            "columnDefs": [{ "sortable": false, "targets": [] }],
            "order": [[0, 'desc']],
            "processing": true,
            "serverSide": true,
            "pageLength": locationPageLength,
            "ajax": {
                "url": ajaxURLCity,
                "type": "POST",
                "data": function (d) {
                    d._token = csrfToken;
                    d.country_id = $("#filterCountry").val();
                    d.state_id = $("#filterState").val();
                },
                "error": function (xhr, error, thrown) {
                    console.error('Ajax error:', thrown);
                }
            },
            "columns": [
                {"data": "id"},
                {"data": "country_name"},
                {"data": "state_name"},
                {"data": "name"},
                {"data": "action", "orderable": false, "searchable": false}
            ],
            "initComplete": function() {
                const $label = $('#cityTable_filter label');
                const $searchInput = $('#cityTable_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 = $('#cityTable_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 = $('#cityTable').DataTable();

                    viewAllClicked = !viewAllClicked;

                    usersPageLength = viewAllClicked ? -1 : 10;

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

        $("#filterCountry").select2({
            ajax: {
                url: ajaxURLSearchCountry,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a country',
            dropdownParent: $(".city_dropdown"),
        }).on('select2:select', function(e) {
            var selectedCountryId = e.params.data.id;
            // Load states based on selected country
            loadStates(selectedCountryId);
            // Reload city table
            $('#cityTable').DataTable().ajax.reload();
        });

        $("#filterState").select2({
            ajax: {
                url: ajaxURLSearchState,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        country_id: $("#filterCountry").val(),
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a state',
            dropdownParent: $(".city_dropdown"),
        }).on('select2:select', function(e) {
            // Reload city table when state is selected
            $('#cityTable').DataTable().ajax.reload();
        });

        $("#modalCountry").select2({
            ajax: {
                url: ajaxURLSearchCountry,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a country',
            dropdownParent: $("#addCityForm"),
        }).on('select2:select', function(e) {
            var selectedCountryId = e.params.data.id;
            // Load states based on selected country in the modal
            loadStatesInModal(selectedCountryId);
        });

        $("#modalState").select2({
            ajax: {
                url: ajaxURLSearchState,
                dataType: 'json',
                method: 'POST',
                delay: 0,
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        country_id: $("#modalCountry").val(),
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for a state',
            dropdownParent: $("#addCityForm"),
        });

        function loadStates(countryId) {
            $("#filterState").select2({
                ajax: {
                    url: ajaxURLSearchState,
                    dataType: 'json',
                    method: 'POST',
                    delay: 0,
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            country_id: countryId,
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                placeholder: 'Search for a state',
                dropdownParent: $(".city_dropdown"),
            }).trigger('change');
        }

        function loadStatesInModal(countryId) {
            $("#modalState").select2({
                ajax: {
                    url: ajaxURLSearchState,
                    dataType: 'json',
                    method: 'POST',
                    delay: 0,
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            country_id: countryId,
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data.results,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                placeholder: 'Search for a state',
                dropdownParent: $("#addCityModal"),
            }).trigger('change');
        }

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

            $.ajax({
                url: addCitylistAjax,
                type: 'POST',
                data: formData,
                success: function(response) {
                    toastr.success(response.success);
                    $('#addCityModal').modal('hide');
                    $('#cityTable').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');
            $.ajax({
                url: cityGet+'?id='+id,
                method: 'GET',
                success: function(response) {
                    $('#addCityModal #cityId').val(response.id);
                    $('#addCityModal #modalCountry').append('<option value="' + response.country_id + '" selected>' + response.country_name + '</option>');
                    loadStatesInModal(response.country_id);
                    $('#addCityModal #modalState').append('<option value="' + response.state_id + '" selected>' + response.state_name + '</option>');
                    $('#addCityModal #cityName').val(response.name);

                    $('#addCityModal #addCityModalLabel').text('Edit City - ' + response.name);

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

        $(document).on('click', '#create_city', function() {
            $('#addCityForm')[0].reset();
            $('#addCityModal #cityId').val('');
            $('#addCityModal #modalCountry').empty().trigger('change');
            $('#addCityModal #modalState').empty().trigger('change');
            $('#addCityModal #cityName').val('');

            $('#addCityModal #addCityModalLabel').text('Add New City');

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

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

            var cityId = $(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) {
                    $.ajax({
                        url : cityDelete+'?id='+cityId,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        success: function(data) {
                            if (data.message === 'City deleted successfully') {
                                Swal.fire(
                                    'Deleted!',
                                    'City has been deleted.',
                                    'success'
                                );
                                $('#cityTable').DataTable().ajax.reload();
                            } else {
                                Swal.fire(
                                    'Error!',
                                    'An error occurred while deleting the city.',
                                    'error'
                                );
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire(
                                'Error!',
                                'An unexpected error occurred.',
                                'error'
                            );
                        }
                    });
                }
            });
        });
    });
</script>
@endsection