@php
    $cityBranchData = old('cities', $cityBranchData ?? []);
@endphp

<div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        Cities and Branches <span class="text-red-500">*</span>
    </label>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
        Add cities, then add one or more branches under each city. Coverage area belongs to the branch and does not change its city association.
    </p>

    <div id="cities-wrapper" class="space-y-4"></div>

    <button
        type="button"
        id="add-city-btn"
        class="mt-3 inline-flex items-center px-3 py-2 bg-blue-600 dark:bg-blue-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
    >
        + Add City
    </button>
</div>

<script>
    (function () {
        const initialCities = @json(array_values($cityBranchData));
        const citiesWrapper = document.getElementById('cities-wrapper');
        const addCityBtn = document.getElementById('add-city-btn');

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function normalizeCities(rawCities) {
            if (!Array.isArray(rawCities) || rawCities.length === 0) {
                return [{
                    name: '',
                    branches: [{ name: '', coverage_area: '' }],
                }];
            }

            return rawCities.map((city) => ({
                name: city?.name ?? '',
                branches: Array.isArray(city?.branches) && city.branches.length > 0
                    ? city.branches.map((branch) => ({
                        name: branch?.name ?? '',
                        coverage_area: branch?.coverage_area ?? '',
                    }))
                    : [{ name: '', coverage_area: '' }],
            }));
        }

        let cities = normalizeCities(initialCities);

        function snapshotCitiesFromDom() {
            const parsedCities = [];

            citiesWrapper.querySelectorAll('[name^="cities["]').forEach((field) => {
                const cityMatch = field.name.match(/^cities\[(\d+)\]\[name\]$/);
                if (cityMatch) {
                    const cityIndex = Number(cityMatch[1]);
                    parsedCities[cityIndex] = parsedCities[cityIndex] ?? { name: '', branches: [] };
                    parsedCities[cityIndex].name = field.value ?? '';
                    return;
                }

                const branchMatch = field.name.match(/^cities\[(\d+)\]\[branches\]\[(\d+)\]\[(name|coverage_area)\]$/);
                if (!branchMatch) {
                    return;
                }

                const cityIndex = Number(branchMatch[1]);
                const branchIndex = Number(branchMatch[2]);
                const branchField = branchMatch[3];

                parsedCities[cityIndex] = parsedCities[cityIndex] ?? { name: '', branches: [] };
                parsedCities[cityIndex].branches[branchIndex] =
                    parsedCities[cityIndex].branches[branchIndex] ?? { name: '', coverage_area: '' };
                parsedCities[cityIndex].branches[branchIndex][branchField] = field.value ?? '';
            });

            cities = normalizeCities(
                parsedCities
                    .filter(Boolean)
                    .map((city) => ({
                        name: city?.name ?? '',
                        branches: (city?.branches ?? []).filter(Boolean).map((branch) => ({
                            name: branch?.name ?? '',
                            coverage_area: branch?.coverage_area ?? '',
                        })),
                    }))
            );
        }

        function render() {
            citiesWrapper.innerHTML = '';

            cities.forEach((city, cityIndex) => {
                const cityCard = document.createElement('div');
                cityCard.className = 'p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-900/40';

                const branchesHtml = city.branches.map((branch, branchIndex) => `
                    <div class="p-3 border border-gray-200 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 space-y-3">
                        <div class="flex items-center justify-between">
                            <h5 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Branch ${branchIndex + 1}</h5>
                            <button
                                type="button"
                                data-action="remove-branch"
                                data-city-index="${cityIndex}"
                                data-branch-index="${branchIndex}"
                                class="text-xs text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                            >
                                Remove Branch
                            </button>
                        </div>

                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Branch Name <span class="text-red-500">*</span></label>
                            <input
                                type="text"
                                name="cities[${cityIndex}][branches][${branchIndex}][name]"
                                value="${escapeHtml(branch.name)}"
                                required
                                maxlength="255"
                                class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 text-sm"
                                placeholder="e.g. Downtown Branch"
                            >
                        </div>

                        <div>
                            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Coverage Area <span class="text-red-500">*</span></label>
                            <textarea
                                name="cities[${cityIndex}][branches][${branchIndex}][coverage_area]"
                                required
                                rows="2"
                                class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 text-sm"
                                placeholder="e.g. North district + industrial zone"
                            >${escapeHtml(branch.coverage_area)}</textarea>
                        </div>
                    </div>
                `).join('');

                cityCard.innerHTML = `
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-200">City ${cityIndex + 1}</h4>
                        <button
                            type="button"
                            data-action="remove-city"
                            data-city-index="${cityIndex}"
                            class="text-xs text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                        >
                            Remove City
                        </button>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City Name <span class="text-red-500">*</span></label>
                        <input
                            type="text"
                            name="cities[${cityIndex}][name]"
                            value="${escapeHtml(city.name)}"
                            required
                            maxlength="255"
                            class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 shadow-sm focus:border-emerald-500 focus:ring-emerald-500"
                            placeholder="e.g. Riyadh"
                        >
                    </div>

                    <div class="space-y-3">${branchesHtml}</div>

                    <button
                        type="button"
                        data-action="add-branch"
                        data-city-index="${cityIndex}"
                        class="mt-3 inline-flex items-center px-3 py-2 bg-gray-600 dark:bg-gray-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150"
                    >
                        + Add Branch
                    </button>
                `;

                citiesWrapper.appendChild(cityCard);
            });
        }

        function addCity() {
            snapshotCitiesFromDom();
            cities.push({
                name: '',
                branches: [{ name: '', coverage_area: '' }],
            });
            render();
        }

        function removeCity(cityIndex) {
            snapshotCitiesFromDom();
            if (cities.length === 1) {
                return;
            }

            cities.splice(cityIndex, 1);
            render();
        }

        function addBranch(cityIndex) {
            snapshotCitiesFromDom();
            cities[cityIndex].branches.push({ name: '', coverage_area: '' });
            render();
        }

        function removeBranch(cityIndex, branchIndex) {
            snapshotCitiesFromDom();
            if (cities[cityIndex].branches.length === 1) {
                return;
            }

            cities[cityIndex].branches.splice(branchIndex, 1);
            render();
        }

        addCityBtn.addEventListener('click', addCity);
        citiesWrapper.addEventListener('click', (event) => {
            const button = event.target.closest('button[data-action]');
            if (!button) {
                return;
            }

            const action = button.dataset.action;
            const cityIndex = Number(button.dataset.cityIndex);
            const branchIndex = Number(button.dataset.branchIndex);

            if (action === 'remove-city') {
                removeCity(cityIndex);
            } else if (action === 'add-branch') {
                addBranch(cityIndex);
            } else if (action === 'remove-branch') {
                removeBranch(cityIndex, branchIndex);
            }
        });

        render();
    })();
</script>