@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
@include('includes.toster')


<style>
    .filter-transition {
        overflow: hidden;
        transition: all 0.4s ease;
        transform-origin: top;
        max-height: 1000px;
        transform: scaleY(1);
        opacity: 1;
    }
    .filter-transition.hidden {
        max-height: 0;
        transform: scaleY(0);
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
    }
    .page-content {
        min-height: 100vh;
        padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    }
    .custom-dropdown {
        min-width: 100px;
        padding: 4px 0;
        font-size: 13px;
        text-align: center;
    }
    .custom-dropdown .dropdown-item {
        padding: 4px 8px;
    }
    .offcanvas-body .card {
        background-color: white;
        border: none;
        margin-bottom: 1rem;
    }
    .offcanvas-body .card-header {
        font-weight: bold;
        font-size: 16px;
    }
    .offcanvas-body p {
        margin: 0 0 5px;
        font-size: 14px;
    }
    .is-valid {
        border-color: #28a745 !important;
    }
    .invalid-feedback {
        display: none;
        color: #dc3545;
        font-size: 14px;
    }
    .is-invalid ~ .invalid-feedback {
        display: block;
    }
    th, td {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
</style>

<div class="page-content">
    <div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
        <div class="row mt-4">
            @include('includes.under-master-sidebar')

            <div class="col-md-10">
                <div class="d-flex justify-content-end mb-3">
                    <a class="btn btn-primary" style="background: #05BCF6;" onclick="showEquipment()">+ Add Vendor</a>
                </div>

                <div class="card mb-4 responsive-card">
                    <!--<div id="filterForm" class="card-body filter-transition">-->
                    <!--    <form class="row g-3">-->
                    <!--        <div class="col-md-4">-->
                    <!--            <label class="form-label">Vendor Name:</label>-->
                    <!--            <select class="form-select"><option>Select Vendor</option></select>-->
                    <!--        </div>-->
                    <!--        <div class="col-md-4">-->
                    <!--            <label class="form-label">Status:</label>-->
                    <!--            <select class="form-select"><option>Select</option></select>-->
                    <!--        </div>-->
                    <!--        <div class="col-md-4">-->
                    <!--            <label class="form-label">Date Range</label>-->
                    <!--            <select class="form-select"><option>Last Week</option></select>-->
                    <!--        </div>-->
                    <!--        <div class="col-12 text-end">-->
                    <!--            <button class="btn btn-primary mt-2" style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>-->
                    <!--            <button class="btn btn-primary mt-2" style="background-color: #E33C5A; border-color: #E33C5A;">Clear</button>-->
                    <!--        </div>-->
                    <!--    </form>-->
                    <!--</div>-->

                    <!--<hr style="border: 1px solid #0D0D0D;">-->

                    <div class="d-flex justify-content-between align-items-center p-2 rounded">
                        <div class="d-flex gap-2">
                            
                        </div>
                        <div class="text-center">
                            <h6 class="mt-3" style="font-size: 20px; font-weight: 600;">List of Vendor</h6>
                        </div>
                        <div>
                            <!--<button onclick="toggleFilter()" class="btn btn-light btn-sm border" style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">-->
                            <!--    Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>-->
                            <!--</button>-->
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ordersTable" class="table table-bordered" style="background-color: white; color: black;">
                                <thead style="background: #05BCF6; color: white;">
                                    <tr>
                                        <th>Sr. No.</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Address</th>
                                        <th>Postal Code</th>
                                        <th>Status</th>
                                       <th>Edit</th>
										<th>Delete</th>
                                    </tr>
                                </thead>
                                <tbody style="background-color: white; color: black;">
                                    @foreach ($states as $index => $state)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $state->name }}</td>
                                        <td>{{ $state->email }}</td>
                                        <td>{{ $state->Address }}</td>
                                        <td>{{ $state->postal_code }}</td>
                                        <td>{{ $state->Status }}</td>
                                
                                        
                                        	<td>
											<button class="btn btn-sm btn-success" onclick="showStateModal({{ $state->id }})">
												<i class="bi bi-pencil-square me-2"></i>Edit
											</button>
										</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal" data-url="{{ url('/Vendor/' . $state->id) }}">
												<i class="bi bi-trash me-2"></i>Delete
											</button>
										</td>
                                    </tr>

                                    <!-- Edit Modal -->
                                    <div class="modal fade" id="editStateModal{{ $state->id }}" tabindex="-1" aria-labelledby="editStateLabel{{ $state->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content rounded-4">
                                                <form method="POST" action="{{ url('/Vendor/' . $state->id . '/update') }}" id="editVendorForm{{ $state->id }}">
                                                    @csrf
                                                    <input type="hidden" name="modal_id" value="editStateModal{{ $state->id }}">
                                                    <div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
                                                        <h5 class="modal-title" id="editStateLabel{{ $state->id }}">Edit Vendor</h5>
                                                        <button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">Name:<span class="text-danger">*</span></label>
                                                                <input name="name" id="editName{{ $state->id }}" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $state->name) }}" required>
                                                                <div class="invalid-feedback" id="editNameError{{ $state->id }}">
                                                                    @error('name') {{ $message }} @enderror
                                                                </div>
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">Email:<span class="text-danger">*</span></label>
                                                                <input name="email" type="email" id="editEmail{{ $state->id }}" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $state->email) }}" required data-id="{{ $state->id }}">
                                                                <div class="invalid-feedback" id="editEmailError{{ $state->id }}">
                                                                    @error('email') {{ $message }} @enderror
                                                                </div>
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">Country:</label>
                                                                <select name="Country" class="form-select country-select select2" data-block="edit_{{ $state->id }}" >
                                                                    <option value="">Select Country</option>
                                                                    @foreach($countries as $country)
                                                                       <option value="{{ $country->id }}" {{ $state->Country == $country->id ? 'selected' : '' }}>
																			{{ $country->name }}
																		</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">State:</label>
                                                                <select name="State" class="form-select state-select select2" data-block="edit_{{ $state->id }}" data-selected="{{ old('State', $state->State) }}">
                                                                    <option value="">Select State</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">City:</label>
                                                                <select name="City" class="form-select city-select select2" data-block="edit_{{ $state->id }}" data-selected="{{ old('City', $state->City) }}">
                                                                    <option value="">Select City</option>
                                                                </select>
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">Address:</label>
                                                                <input name="Address" class="form-control" value="{{ old('Address', $state->Address) }}">
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">Postal Code:</label>
                                                                <input type="text" name="postal_code" class="form-control" value="{{ old('postal_code', $state->postal_code) }}">
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">TAX ID:</label>
                                                                <input type="text" name="tax_id" class="form-control" placeholder="Enter TAX ID" value="{{ old('tax_id', $state->tax_id) }}">
                                                            </div>
                                                            <div class="mb-3 col-6">
                                                                <label class="form-label">Status:</label>
                                                                <select name="Status" class="form-select">
                                                                    <option value="Active" {{ old('Status', $state->Status) == 'Active' ? 'selected' : '' }}>Active</option>
                                                                    <option value="Inactive" {{ old('Status', $state->Status) == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer justify-content-center">
                                                        <button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Update</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Vendor Modal -->
        <div class="modal fade" id="addEquipment" tabindex="-1" aria-labelledby="addEquipmentLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content rounded-4">
                     <div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
                            <h5 class="modal-title" id="addEquipmentLabel">Add Vendor</h5>
                            <button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                    <form method="POST" action="{{ url('Vendor') }}" id="addVendorForm">
                        @csrf
                        <input type="hidden" name="modal_id" value="addEquipment">
                       
                        <div class="modal-body">
                            <div class="row">
                                <div class="mb-3 col-6">
                                    <label class="form-label">Name:<span class="text-danger">*</span></label>
                                    <input name="name" id="addName" class="form-control @error('name') is-invalid @enderror" placeholder="Enter Name" value="{{ old('name') }}" >
                                    <div class="invalid-feedback" id="addNameError">
                                        @error('name') {{ $message }} @enderror
                                    </div>
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">Email:<span class="text-danger">*</span></label>
                                    <input name="email" type="email" id="addEmail" class="form-control @error('email') is-invalid @enderror" placeholder="Enter Email" value="{{ old('email') }}" >
                                    <div class="invalid-feedback" id="addEmailError">
                                        @error('email') {{ $message }} @enderror
                                    </div>
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">Country:</label>
                                    <select name="Country" class="form-select country-select select2" data-block="add" >
                                        <option value="">Select Country</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}" {{ old('Country') ? ((string) old('Country') === (string) $country->id ? 'selected' : '') : ($country->id == ($defaultCountryId ?? null) ? 'selected' : '') }}>
											{{ $country->name }}
										</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">State:</label>
                                    <select name="State" id="state" class="form-select state-select select2" data-block="add" data-selected="{{ old('State') }}">
                                        <option value="">Select State</option>
                                    </select>
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">City:</label>
                                    <select name="City" id="city" class="form-select city-select select2" data-block="add" data-selected="{{ old('City') }}">
                                        <option value="">Select City</option>
                                    </select>
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">Address:</label>
                                    <input name="Address" class="form-control" placeholder="Enter Address" value="{{ old('Address') }}">
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">Postal Code:</label>
                                    <input type="text" name="postal_code" class="form-control" placeholder="Enter Postal Code" value="{{ old('postal_code') }}">
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">TAX ID:</label>
                                    <input type="text" name="tax_id" class="form-control" placeholder="Enter TAX ID" value="{{ old('tax_id') }}">
                                </div>
                                <div class="mb-3 col-6">
                                    <label class="form-label">Status:</label>
                                    <select name="Status" class="form-select">
                                        <option value="Active" {{ old('Status') == 'Active' ? 'selected' : '' }}>Active</option>
                                        <option value="Inactive" {{ old('Status') == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center" style="border-top: none;">
                            <button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Create Vendor</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true" data-bs-backdrop="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4">
                    <div class="modal-header bg-danger text-white rounded-top-4">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">
                            <i class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="mb-2">Are you sure you want to delete this data?</p>
                        <p class="text-muted small">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        
                        <form id="deleteForm" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Yes, Delete</button>
                        </form>
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const deleteModal = document.getElementById('deleteConfirmModal');
    deleteModal.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const url = button.getAttribute('data-url');
        const form = deleteModal.querySelector('#deleteForm');
        form.setAttribute('action', url);
    });

    // Validation patterns
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // Reset form errors
    function resetFormErrors(form) {
        const inputs = form.querySelectorAll('.form-control');
        const errors = form.querySelectorAll('.invalid-feedback');
        inputs.forEach(input => {
            input.classList.remove('is-invalid', 'is-valid');
            input.style.borderColor = '';
        });
        errors.forEach(error => error.textContent = '');
    }

    // Debounce function to limit validation calls
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // Validate input and update UI
    function validateInput(input, errorElement, validationFn, errorMessage) {
        const value = input.value.trim();
        input.classList.remove('is-invalid', 'is-valid');
        errorElement.textContent = '';

        if (!value && input.hasAttribute('required')) {
            input.classList.add('is-invalid');
            errorElement.textContent = `The ${input.name} field is required.`;
            return false;
        }

        if (value && !validationFn(value)) {
            input.classList.add('is-invalid');
            errorElement.textContent = errorMessage;
            return false;
        }

        if (value) {
            input.classList.add('is-valid');
        }
        return true;
    }

    // Check uniqueness via AJAX
    function checkUniqueness(input, errorElement, field, id = null) {
        const value = input.value.trim();
        if (!value) return;

        $.ajax({
            url: '{{ url('/check-email') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                field: field,
                value: value,
                vendor_id: id
            },
            success: function(response) {
                if (response.exists) {
                    input.classList.add('is-invalid');
                    input.classList.remove('is-valid');
                    errorElement.textContent = `The ${field} has already been taken.`;
                } else {
                    input.classList.add('is-valid');
                    input.classList.remove('is-invalid');
                    errorElement.textContent = '';
                }
            },
            error: function() {
                input.classList.add('is-invalid');
                errorElement.textContent = 'Error checking uniqueness.';
            }
        });
    }

    // Add Vendor Form Validation
    const addVendorForm = document.getElementById('addVendorForm');
    if (addVendorForm) {
        const addModal = document.getElementById('addEquipment');
        const nameInput = document.getElementById('addName');
        const emailInput = document.getElementById('addEmail');
        const nameError = document.getElementById('addNameError');
        const emailError = document.getElementById('addEmailError');

        addModal.addEventListener('show.bs.modal', function () {
            resetFormErrors(addVendorForm);
            // Display server-side errors if present
            @error('name')
                nameInput.classList.add('is-invalid');
                nameError.textContent = '{{ $message }}';
            @enderror
            @error('email')
                emailInput.classList.add('is-invalid');
                emailError.textContent = '{{ $message }}';
            @enderror
        });

        // Live validation for Add Form
        const debouncedValidateName = debounce(() => validateInput(
            nameInput, nameError,
            value => value.length > 0,
            'The Name field is required.'
        ), 300);

        const debouncedValidateEmail = debounce(() => {
            if (validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.')) {
                checkUniqueness(emailInput, emailError, 'email');
            }
        }, 300);

        nameInput.addEventListener('input', debouncedValidateName);
        emailInput.addEventListener('input', debouncedValidateEmail);

        addVendorForm.addEventListener('submit', function (event) {
            const isNameValid = validateInput(nameInput, nameError, value => value.length > 0, 'The Name field is required.');
            const isEmailValid = validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.');

            if (!isNameValid || !isEmailValid) {
                event.preventDefault();
            }
        });
    }

    // Edit Vendor Form Validation
    document.querySelectorAll('[id^="editVendorForm"]').forEach(form => {
        const id = form.id.replace('editVendorForm', '');
        const modalElement = document.getElementById('editStateModal' + id);
        const nameInput = document.getElementById('editName' + id);
        const emailInput = document.getElementById('editEmail' + id);
        const nameError = document.getElementById('editNameError' + id);
        const emailError = document.getElementById('editEmailError' + id);

        modalElement.addEventListener('show.bs.modal', function () {
            resetFormErrors(form);
            // Display server-side errors if present
            @error('name')
                if (modalElement.id === '{{ old('modal_id') }}') {
                    nameInput.classList.add('is-invalid');
                    nameError.textContent = '{{ $message }}';
                }
            @enderror
            @error('email')
                if (modalElement.id === '{{ old('modal_id') }}') {
                    emailInput.classList.add('is-invalid');
                    emailError.textContent = '{{ $message }}';
                }
            @enderror
        });

        // Live validation for Edit Form
        const debouncedValidateName = debounce(() => validateInput(
            nameInput, nameError,
            value => value.length > 0,
            'The Name field is required.'
        ), 300);

        const debouncedValidateEmail = debounce(() => {
            if (validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.')) {
                checkUniqueness(emailInput, emailError, 'email', emailInput.dataset.id);
            }
        }, 300);

        nameInput.addEventListener('input', debouncedValidateName);
        emailInput.addEventListener('input', debouncedValidateEmail);

        form.addEventListener('submit', function (event) {
            const isNameValid = validateInput(nameInput, nameError, value => value.length > 0, 'The Name field is required.');
            const isEmailValid = validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.');

            if (!isNameValid || !isEmailValid) {
                event.preventDefault();
            }
        });
    });

    // Show modal only if there are server-side errors
    @if ($errors->any())
        const modalId = '{{ old('modal_id', 'addEquipment') }}';
        const modalElement = document.getElementById(modalId);
        if (modalElement) {
            const modal = new bootstrap.Modal(modalElement, { backdrop: 'static', keyboard: false });
            modal.show();
        }
    @endif
});
</script>

<script>
function toggleFilter() {
    const filterForm = document.getElementById("filterForm");
    const icon = document.getElementById("chevronIcon");

    filterForm.classList.toggle("hidden");
    if (filterForm.classList.contains("hidden")) {
        icon.classList.remove("bi-chevron-up");
        icon.classList.add("bi-chevron-down");
    } else {
        icon.classList.remove("bi-chevron-down");
        icon.classList.add("bi-chevron-up");
    }
}

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("filterForm").classList.remove("hidden");
});

function showEquipment() {
    const modal = new bootstrap.Modal(document.getElementById('addEquipment'), { backdrop: 'static', keyboard: false });
    modal.show();
}

function showStateModal(id) {
    const modalElement = document.getElementById('editStateModal' + id);
    const modal = new bootstrap.Modal(modalElement, { backdrop: 'static', keyboard: false });
    modal.show();
    const countryDropdown = $(`select.country-select[data-block="edit_${id}"]`);
    const stateDropdown = $(`select.state-select[data-block="edit_${id}"]`);
    const cityDropdown = $(`select.city-select[data-block="edit_${id}"]`);
    const countryID = countryDropdown.val();
    const selectedState = stateDropdown.data('selected');
    const selectedCity = cityDropdown.data('selected');
    if (countryID) {
        loadStates(countryID, stateDropdown, selectedState, selectedCity);
    }
}
</script>

<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {
    $('#ordersTable').DataTable({
        responsive: true
    });

  function loadStates(countryID, stateDropdown, selectedState = null, selectedCity = null) {
				if (!countryID) return;
				$(stateDropdown).html('<option>Loading...</option>');
				$.get(`/get-states/${countryID}`, function (res) {
					let options = '<option value="">Select State</option>';
					$.each(res, function (key, value) {
						const isSelected = (value.id == selectedState) || (value.id == $(stateDropdown).data('selected'));
						options += `<option value="${value.id}" ${isSelected ? 'selected' : ''}>${value.name} (${value.state_code})</option>`;
					});
					$(stateDropdown).html(options);
					const stateToLoad = selectedState || $(stateDropdown).data('selected');
					if (stateToLoad) {
						const block = $(stateDropdown).data('block');
						const cityDropdown = $(`select.city-select[data-block="${block}"]`);
						loadCities(stateToLoad, cityDropdown, selectedCity);
					}
				}).fail(function() {
					$(stateDropdown).html('<option value="">Error loading states</option>');
				});
			}

    function loadCities(stateID, cityDropdown, selectedCity = null) {
        if (!stateID) return;
        $(cityDropdown).html('<option>Loading...</option>');
        $.get(`/get-cities/${stateID}`, function (res) {
            let options = '<option value="">Select City</option>';
            $.each(res, function (key, value) {
                const isSelected = (key == selectedCity) || (key == $(cityDropdown).data('selected'));
                options += `<option value="${key}" ${isSelected ? 'selected' : ''}>${value}</option>`;
            });
            $(cityDropdown).html(options);
        }).fail(function() {
            $(cityDropdown).html('<option value="">Error loading cities</option>');
        });
    }

    $('.country-select').each(function () {
        const block = $(this).data('block');
        const countryID = $(this).val();
        const stateDropdown = $(`select.state-select[data-block="${block}"]`);
        const cityDropdown = $(`select.city-select[data-block="${block}"]`);
        const selectedState = stateDropdown.data('selected') || $(`[name="addresses[${block === 'primary' ? 0 : 1}][state]"]`).val();
        const selectedCity = cityDropdown.data('selected') || $(`[name="addresses[${block === 'primary' ? 0 : 1}][city]"]`).val();
        loadStates(countryID, stateDropdown, selectedState, selectedCity);
    });

    $('.country-select').on('change', function () {
        const block = $(this).data('block');
        const countryID = $(this).val();
        const stateDropdown = $(`select.state-select[data-block="${block}"]`);
        const cityDropdown = $(`select.city-select[data-block="${block}"]`);
        stateDropdown.html('<option value="">Select State</option>');
        cityDropdown.html('<option value="">Select City</option>');
        if (countryID) {
            loadStates(countryID, stateDropdown);
        }
    });

    $('.state-select').on('change', function () {
        const block = $(this).data('block');
        const stateID = $(this).val();
        const cityDropdown = $(`select.city-select[data-block="${block}"]`);
        if (stateID) {
            loadCities(stateID, cityDropdown);
        } else {
            cityDropdown.html('<option value="">Select City</option>');
        }
    });
});
</script>

<script>
		$(document).ready(function () {
			// This event triggers when ANY Bootstrap modal is fully visible
			$('.modal').on('shown.bs.modal', function () {
				const $modal = $(this);

				// Initialize Select2 only for selects inside this specific modal
				$modal.find('.select2').select2({
					dropdownParent: $modal, // This fixes the focus/typing issue
					theme: 'bootstrap-5',
					width: '100%'           // Fixes width issues inside hidden elements
				});

				// The "Hack": Manually force focus after a tiny delay
				$modal.on('select2:open', () => {
					setTimeout(() => {
						document.querySelector('.select2-search__field').focus();
					}, 10);
				});
			});
		});

	</script>

<script>
function toggleSidebar() {
    const sidebar = document.getElementById("sidebarWrapper");
    sidebar.classList.toggle("active");
}
</script>

@include('includes.footer')
</body>
</html>