@extends('layout.main')

@section('title', 'নতুন ওয়ার্ড যোগ করুন')

@section('content')
@php
    $bnMap = ['0'=>'০','1'=>'১','2'=>'২','3'=>'৩','4'=>'৪','5'=>'৫','6'=>'৬','7'=>'৭','8'=>'৮','9'=>'৯'];
@endphp

<div class="min-h-screen bg-gray-50 p-4 sm:p-6">
    <div class="max-w-3xl mx-auto">

        <div class="mb-6 flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">নতুন ওয়ার্ড যোগ করুন</h1>
                <p class="text-sm text-gray-600">জেলা + (উপজেলা/সিটি) নির্বাচন করে ওয়ার্ড নম্বর দিন</p>
            </div>
            <a href="{{ route('wards.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">ওয়ার্ড তালিকা</a>
        </div>

        <div class="bg-white rounded-xl shadow-sm border p-6">
            <form action="{{ route('wards.store') }}" method="POST" class="space-y-6">
                @csrf

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">জেলা <span class="text-red-500">*</span></label>
                    <select id="district_id" name="district_id" required
                            class="w-full rounded-lg border px-4 py-2 bg-white focus:ring-2 focus:ring-green-500 @error('district_id') border-red-500 @enderror">
                        <option value="">জেলা নির্বাচন করুন</option>
                        @foreach($districts as $d)
                            <option value="{{ $d->id }}" {{ old('district_id')==$d->id ? 'selected':'' }}>
                                {{ $d->name_bn }}
                            </option>
                        @endforeach
                    </select>
                    @error('district_id')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">ধরন <span class="text-red-500">*</span></label>
                    <select id="parent_type" class="w-full rounded-lg border px-4 py-2 bg-white focus:ring-2 focus:ring-green-500">
                        <option value="">নির্বাচন করুন</option>
                        <option value="upazila" {{ old('upazila_id') ? 'selected':'' }}>উপজেলা</option>
                        <option value="city" {{ old('city_id') ? 'selected':'' }}>সিটি/পৌরসভা</option>
                    </select>
                </div>

                <div id="upazila_wrap" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">উপজেলা <span class="text-red-500">*</span></label>
                    <select id="upazila_id" name="upazila_id"
                            class="w-full rounded-lg border px-4 py-2 bg-white focus:ring-2 focus:ring-green-500 @error('upazila_id') border-red-500 @enderror">
                        <option value="">প্রথমে জেলা নির্বাচন করুন</option>
                    </select>
                    @error('upazila_id')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div id="city_wrap" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-1">সিটি/পৌরসভা <span class="text-red-500">*</span></label>
                    <select id="city_id" name="city_id"
                            class="w-full rounded-lg border px-4 py-2 bg-white focus:ring-2 focus:ring-green-500 @error('city_id') border-red-500 @enderror">
                        <option value="">প্রথমে জেলা নির্বাচন করুন</option>
                    </select>
                    @error('city_id')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Ward No (Bangla UI + Hidden numeric) --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">ওয়ার্ড নম্বর <span class="text-red-500">*</span></label>

                    <input type="text" id="ward_no_bn" inputmode="numeric"
                           value="{{ old('ward_no') ? strtr((string)old('ward_no'), $bnMap) : '' }}"
                           class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-green-500 @error('ward_no') border-red-500 @enderror"
                           placeholder="যেমন: ১">

                    <input type="hidden" id="ward_no" name="ward_no" value="{{ old('ward_no') }}">

                    @error('ward_no')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">নাম (বাংলা)</label>
                        <input type="text" name="name_bn" value="{{ old('name_bn') }}"
                               class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-green-500 @error('name_bn') border-red-500 @enderror"
                               placeholder="যেমন: ওয়ার্ড-১">
                        @error('name_bn')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Name (English)</label>
                        <input type="text" name="name_en" value="{{ old('name_en') }}"
                               class="w-full rounded-lg border px-4 py-2 focus:ring-2 focus:ring-green-500 @error('name_en') border-red-500 @enderror"
                               placeholder="e.g. Ward 1">
                        @error('name_en')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="flex justify-end gap-3 pt-4 border-t">
                    <a href="{{ route('wards.index') }}" class="px-5 py-2 border rounded-lg hover:bg-gray-50">বাতিল</a>
                    <button class="px-5 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">সেভ</button>
                </div>
            </form>
        </div>

    </div>
</div>

<script>
const districts = @json($districts);

function setOptions(selectEl, items, placeholder, selectedValue = "") {
    selectEl.innerHTML = '';
    const opt0 = document.createElement('option');
    opt0.value = '';
    opt0.textContent = placeholder;
    selectEl.appendChild(opt0);

    (items || []).forEach(it => {
        const opt = document.createElement('option');
        opt.value = it.id;
        opt.textContent = it.name_bn;
        if (selectedValue && String(selectedValue) === String(it.id)) opt.selected = true;
        selectEl.appendChild(opt);
    });
}

function toBnDigits(str) {
    const map = { '0':'০','1':'১','2':'২','3':'৩','4':'৪','5':'৫','6':'৬','7':'৭','8':'৮','9':'৯' };
    return String(str).replace(/[0-9]/g, d => map[d]);
}

function toEnDigits(str) {
    const map = { '০':'0','১':'1','২':'2','৩':'3','৪':'4','৫':'5','৬':'6','৭':'7','৮':'8','৯':'9' };
    return String(str).replace(/[০-৯]/g, d => map[d]);
}

function setupWardBnInput() {
    const visible = document.getElementById('ward_no_bn');
    const hidden = document.getElementById('ward_no');
    if (!visible || !hidden) return;

    visible.addEventListener('input', () => {
        const en = toEnDigits(visible.value).replace(/[^0-9]/g, '');
        hidden.value = en ? String(parseInt(en, 10)) : '';
        visible.value = en ? toBnDigits(en) : '';
    });
}

function toggleParentFields() {
    const t = document.getElementById('parent_type').value;
    const upWrap = document.getElementById('upazila_wrap');
    const cityWrap = document.getElementById('city_wrap');
    const up = document.getElementById('upazila_id');
    const city = document.getElementById('city_id');

    if (t === 'upazila') {
        upWrap.classList.remove('hidden');
        cityWrap.classList.add('hidden');
        if (city) city.value = '';
    } else if (t === 'city') {
        cityWrap.classList.remove('hidden');
        upWrap.classList.add('hidden');
        if (up) up.value = '';
    } else {
        upWrap.classList.add('hidden');
        cityWrap.classList.add('hidden');
        if (up) up.value = '';
        if (city) city.value = '';
    }
}

function refillChildren() {
    const districtId = document.getElementById('district_id').value;
    const up = document.getElementById('upazila_id');
    const city = document.getElementById('city_id');

    const d = districts.find(x => String(x.id) === String(districtId));
    setOptions(up, d?.upazilas || [], 'উপজেলা নির্বাচন করুন', @json(old('upazila_id')) || '');
    setOptions(city, d?.cities || [], 'সিটি/পৌরসভা নির্বাচন করুন', @json(old('city_id')) || '');
}

document.addEventListener('DOMContentLoaded', () => {
    setupWardBnInput();

    document.getElementById('parent_type').addEventListener('change', () => {
        toggleParentFields();
    });

    document.getElementById('district_id').addEventListener('change', () => {
        refillChildren();
    });

    // init
    refillChildren();
    toggleParentFields();
});
</script>
@endsection
