@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('states') }}</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('states') }}</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($selectedState) ? tr('edit_state') : tr('add_state') }}
                </h5>
            </div>

            <div class="card-body">
                <form
                    action="{{ isset($selectedState)
                        ? route('admin.lookups.update_state', $selectedState->unique_id)
                        : route('admin.lookups.store_states') }}"
                    method="POST">

                    @csrf
                    @if (isset($selectedState))
                        @method('PUT')
                    @endif

                    <div class="row g-4">
                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('country_name') }}</label>
                            <select name="country_id" id="countrySelect" class="form-control" required>
                                <option value="" disabled>{{ tr('select_country_name') }}</option>

                                @foreach ($supportedCountries as $supportedCountry)
                                    <option value="{{ $supportedCountry->alpha_2_code }}"
                                        data-country-code="{{ $supportedCountry->alpha_2_code }}"
                                        data-alpha3="{{ $supportedCountry->alpha_3_code }}"
                                        {{ isset($selectedState) && $selectedState->country_code == $supportedCountry->alpha_2_code ? 'selected' : '' }}>
                                        {{ $supportedCountry->country_name ?: tr('na') }}
                                        ({{ $supportedCountry->alpha_3_code ?: tr('na') }})
                                    </option>
                                @endforeach
                            </select>

                        </div>
                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('country_code') }}</label>
                            <input type="text" name="country_code" id="countryCode" class="form-control" required
                                readonly value="{{ $selectedState->country_code ?? '' }}">

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

                        </div>

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


                        <div class="col-xxl-6">
                            <label class="form-label">{{ tr('state_code') }}</label>
                            <input type="text" maxlength="3" name="state_code" placeholder="{{ tr('state_code') }}"
                                value="{{ old('state_code', $selectedState->state_code ?? '') }}" class="form-control"
                                required oninput="this.value = this.value.toUpperCase()">
                        </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>
        function fillCountryDetails() {
            const select = document.getElementById('countrySelect');
            const selectedOption = select.options[select.selectedIndex];

            if (!selectedOption) return;

            document.getElementById('countryCode').value =
                selectedOption.getAttribute('data-country-code') || '';

            document.getElementById('countryAlpha3').value =
                selectedOption.getAttribute('data-alpha3') || '';
        }

        document.getElementById('countrySelect')
            .addEventListener('change', fillCountryDetails);

        document.addEventListener('DOMContentLoaded', fillCountryDetails);
    </script>
@endsection