@extends('layouts.admin')

@section('breadcrumb')
    <div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 gap-3">
        <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('cities') }}</h2>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li>
                    <i class="ri-home-4-line me-2 text-primary"></i>
                </li>

                <li class="breadcrumb-item">
                    <a href="{{ route('treasury.dashboard') }}">
                        {{ tr('home') }}
                    </a>
                </li>

                <li class="breadcrumb-item active">
                    {{ tr('cities') }}
                </li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <div class="col-12 col-xl-12">
        <div class="card card-h-100">

            <div class="card-header">
                <h5 class="card-title">
                    {{ isset($selectedCity) ? tr('edit_city') : tr('add_city') }}
                </h5>
            </div>

            <div class="card-body">

                <form
                    action="{{ isset($selectedCity)
                        ? route('admin.lookups.update_city', $selectedCity->unique_id)
                        : route('admin.lookups.store_cities') }}"
                    method="POST">

                    @csrf

                    @if (isset($selectedCity))
                        @method('PUT')
                    @endif

                    <div class="row g-4">

                        {{-- Country --}}
                        <div class="col-xxl-6">
                            <label class="form-label">
                                {{ tr('country_name') }}
                            </label>

                            <select
                                name="country"
                                id="countrySelect"
                                class="form-control"
                                required>

                                <option value="" disabled
                                    {{ !isset($selectedCity) ? 'selected' : '' }}>
                                    {{ tr('select_country_name') }}
                                </option>

                                @foreach ($supportedCountries as $supportedCountry)

                                    <option
                                        value="{{ $supportedCountry->alpha_3_code }}"
                                        data-country-code="{{ $supportedCountry->alpha_3_code }}"
                                        data-alpha3="{{ $supportedCountry->alpha_3_code }}"
                                        {{ isset($selectedCity) &&
                                            $selectedCity->country == $supportedCountry->alpha_3_code
                                                ? 'selected'
                                                : '' }}>

                                        {{ $supportedCountry->country_name ?: tr('na') }}
                                        ({{ $supportedCountry->alpha_3_code ?: tr('na') }})

                                    </option>

                                @endforeach

                            </select>
                        </div>


                        {{-- Country Code --}}
                        <div class="col-xxl-6">
                            <label class="form-label">
                                {{ tr('country_code') }}
                            </label>

                            <input
                                type="text"
                                id="countryCode"
                                class="form-control"
                                readonly
                                value="{{ $selectedCity->country ?? '' }}">

                            <input
                                type="hidden"
                                name="country_code"
                                id="countryCodeHidden"
                                value="{{ $selectedCity->country ?? '' }}">

                            <input
                                type="hidden"
                                name="country_alpha3"
                                id="countryAlpha3"
                                value="{{ $selectedCity->country_alpha3 ?? '' }}">
                        </div>


                        {{-- State --}}
                        <div class="col-xxl-6">
                            <label class="form-label">
                                {{ tr('state_name') }}
                            </label>

                            <select
                                name="state"
                                id="stateSelect"
                                class="form-control"
                                >

                                <option value="">
                                    {{ tr('select_state_name') }}
                                </option>

                                @foreach ($states as $state)

                                    <option
                                        value="{{ $state->name }}"
                                        data-country-code="{{ $state->country_alpha3 }}"
                                        {{ isset($selectedCity) &&
                                            $selectedCity->state == $state->name
                                                ? 'selected'
                                                : '' }}>

                                        {{ $state->name }}

                                        @if ($state->state_code)
                                            ({{ $state->state_code }})
                                        @endif

                                    </option>

                                @endforeach

                            </select>
                        </div>


                        {{-- City --}}
                        <div class="col-xxl-6">
                            <label class="form-label">
                                {{ tr('city_name') }}
                            </label>

                            <input
                                type="text"
                                name="city"
                                placeholder="{{ tr('city_name') }}"
                                value="{{ old('city', $selectedCity->city ?? '') }}"
                                class="form-control"
                                required
                                oninput="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1).toLowerCase()">
                        </div>


                        {{-- External Type --}}
                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('external_type') }}</label>
                            <select name="external_type" class="form-control" required>
                                <option value="" disabled>{{ tr('select_external_type') }}</option>

                                @foreach (external_types() as $external_type => $external_type_name)
                                    <option value="{{ $external_type }}"
                                        {{ old('external_type', $selectedCity->external_type ?? '') == $external_type ? 'selected' : '' }}>
                                        {{ $external_type_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>


                        {{-- Status --}}
                        <div class="col-xxl-6">
                            <label class="form-label">
                                {{ tr('status') }}
                            </label>

                            <select
                                name="status"
                                class="form-control"
                                required>

                                <option value="ACTIVE"
                                    {{ old('status', $selectedCity->status ?? 'ACTIVE') == 'ACTIVE' ? 'selected' : '' }}>
                                    {{ tr('active') }}
                                </option>

                                <option value="INACTIVE"
                                    {{ old('status', $selectedCity->status ?? '') == 'INACTIVE' ? 'selected' : '' }}>
                                    {{ tr('inactive') }}
                                </option>

                            </select>
                        </div>

                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-4">

                        <button type="submit" class="btn btn-primary">
                            {{ tr('submit') }}
                        </button>

                    </div>

                </form>

            </div>
        </div>
    </div>
@endsection


@section('scripts')
<script>

    const countrySelect = document.getElementById('countrySelect');
    const stateSelect = document.getElementById('stateSelect');

    function fillCountryDetails() {

        const selectedOption =
            countrySelect.options[countrySelect.selectedIndex];

        if (!selectedOption) {
            return;
        }

        const countryCode =
            selectedOption.getAttribute('data-country-code') || '';

        const alpha3 =
            selectedOption.getAttribute('data-alpha3') || '';

        document.getElementById('countryCode').value = countryCode;

        document.getElementById('countryCodeHidden').value = countryCode;

        document.getElementById('countryAlpha3').value = alpha3;

        filterStates(countryCode);
    }


    function filterStates(countryCode) {

        const selectedState =
            "{{ old('state', $selectedCity->state ?? '') }}";

        stateSelect.value = '';

        Array.from(stateSelect.options).forEach(function(option) {

            if (!option.value) {
                option.style.display = '';
                return;
            }

            const stateCountryCode =
                option.getAttribute('data-country-code');

            if (stateCountryCode === countryCode) {

                option.style.display = '';

            } else {

                option.style.display = 'none';

            }

        });

        // Restore selected state while editing
        if (selectedState) {

            Array.from(stateSelect.options).forEach(function(option) {

                if (
                    option.value === selectedState &&
                    option.getAttribute('data-country-code') === countryCode
                ) {
                    stateSelect.value = selectedState;
                }

            });

        }
    }


    countrySelect.addEventListener('change', function() {

        fillCountryDetails();

        stateSelect.value = '';

    });


    document.addEventListener('DOMContentLoaded', function() {

        fillCountryDetails();

    });

</script>
@endsection