@extends('layout.main')

@section('title', 'সীট এডিট')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 sm:p-6">
    <div class="max-w-4xl 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">{{ $seat->name_bn }}</p>
            </div>
            <a href="{{ route('seats.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">সীট তালিকা</a>
        </div>

        <div class="bg-white border rounded-xl p-6">
            <form action="{{ route('seats.update', $seat) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')

                <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">সীট নাম (বাংলা) <span class="text-red-500">*</span></label>
                        <input type="text" name="name_bn" value="{{ old('name_bn', $seat->name_bn) }}" required
                               class="w-full px-4 py-2 border rounded-lg @error('name_bn') border-red-500 @enderror">
                        @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">সীট নাম (English)</label>
                        <input type="text" name="name_en" value="{{ old('name_en', $seat->name_en) }}"
                               class="w-full px-4 py-2 border rounded-lg @error('name_en') border-red-500 @enderror">
                        @error('name_en') <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">সীট কোড</label>
                        <input type="text" name="seat_code" value="{{ old('seat_code', $seat->seat_code) }}"
                               class="w-full px-4 py-2 border rounded-lg @error('seat_code') border-red-500 @enderror">
                        @error('seat_code') <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 name="seat_type" required class="w-full px-4 py-2 border rounded-lg bg-white">
                            <option value="parliament" {{ old('seat_type', $seat->seat_type)==='parliament'?'selected':'' }}>জাতীয় সংসদ</option>
                            <option value="local" {{ old('seat_type', $seat->seat_type)==='local'?'selected':'' }}>স্থানীয়</option>
                            <option value="city_corp" {{ old('seat_type', $seat->seat_type)==='city_corp'?'selected':'' }}>সিটি কর্পোরেশন</option>
                            <option value="pouroshova" {{ old('seat_type', $seat->seat_type)==='pouroshova'?'selected':'' }}>পৌরসভা</option>
                            <option value="union" {{ old('seat_type', $seat->seat_type)==='union'?'selected':'' }}>ইউনিয়ন</option>
                        </select>
                    </div>

                    {{-- ================= Location ================= --}}
<div class="mt-2">
    <h2 class="text-lg font-semibold mb-3">লোকেশন</h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">জেলা <span class="text-red-500">*</span></label>
            <select name="district_id" id="district_id" required
                    class="w-full px-4 py-2 border rounded-lg bg-white @error('district_id') border-red-500 @enderror">
                <option value="">নির্বাচন করুন</option>
                @foreach($districts as $d)
                    <option value="{{ $d->id }}"
                        {{ (string)old('district_id', $seat->district_id) === (string)$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">উপজেলা</label>
            <select name="upazila_id" id="upazila_id"
                    class="w-full px-4 py-2 border rounded-lg bg-white @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>
            <label class="block text-sm font-medium text-gray-700 mb-1">সিটি</label>
            <select name="city_id" id="city_id"
                    class="w-full px-4 py-2 border rounded-lg bg-white @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>
    </div>
</div>


                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">স্ট্যাটাস</label>
                        <select name="status" class="w-full px-4 py-2 border rounded-lg bg-white">
                            <option value="active" {{ old('status', $seat->status)==='active'?'selected':'' }}>সক্রিয়</option>
                            <option value="inactive" {{ old('status', $seat->status)==='inactive'?'selected':'' }}>নিষ্ক্রিয়</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">পুরুষ ভোটার</label>
                        <input type="number" name="male_voters" min="0"
                               value="{{ old('male_voters', $seat->male_voters) }}"
                               class="w-full px-4 py-2 border rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">নারী ভোটার</label>
                        <input type="number" name="female_voters" min="0"
                               value="{{ old('female_voters', $seat->female_voters) }}"
                               class="w-full px-4 py-2 border rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">অন্যান্য ভোটার</label>
                        <input type="number" name="other_voters" min="0"
                               value="{{ old('other_voters', $seat->other_voters) }}"
                               class="w-full px-4 py-2 border rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">মোট ভোটার</label>
                        <input type="number" name="total_voters" min="0"
                               value="{{ old('total_voters', $seat->total_voters) }}"
                               class="w-full px-4 py-2 border rounded-lg">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">বিবরণ</label>
                    <textarea name="description" rows="3"
                              class="w-full px-4 py-2 border rounded-lg">{{ old('description', $seat->description) }}</textarea>
                </div>

                <div class="flex justify-end gap-3 pt-4 border-t">
                    <a href="{{ route('seats.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>
async function fetchJsonSafe(url) {
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    const text = await res.text();
    const start = text.search(/[\[{]/);
    if (start === -1) throw text;
    return JSON.parse(text.slice(start));
}

const districtEl = document.getElementById('district_id');
const upazilaEl  = document.getElementById('upazila_id');
const cityEl     = document.getElementById('city_id');

const selectedUpazila = @json(old('upazila_id', $seat->upazila_id));
const selectedCity    = @json(old('city_id', $seat->city_id));

async function loadUpazilas(districtId, selected = null) {
    if (!districtId) return;
    upazilaEl.innerHTML = '<option>লোড হচ্ছে...</option>';
    const data = await fetchJsonSafe(`/api/districts/${districtId}/upazilas`);
    upazilaEl.innerHTML = '<option value="">নির্বাচন করুন</option>';
    data.forEach(u => {
        const sel = (String(u.id) === String(selected)) ? 'selected' : '';
        upazilaEl.innerHTML += `<option value="${u.id}" ${sel}>${u.name_bn}</option>`;
    });
}

async function loadCities(districtId, selected = null) {
    if (!districtId) return;
    cityEl.innerHTML = '<option>লোড হচ্ছে...</option>';
    const data = await fetchJsonSafe(`/api/districts/${districtId}/cities`);
    cityEl.innerHTML = '<option value="">নির্বাচন করুন</option>';
    data.forEach(c => {
        const sel = (String(c.id) === String(selected)) ? 'selected' : '';
        cityEl.innerHTML += `<option value="${c.id}" ${sel}>${c.name_bn}</option>`;
    });
}

districtEl?.addEventListener('change', () => {
    loadUpazilas(districtEl.value, null);
    loadCities(districtEl.value, null);
});

// preload on edit
if (districtEl?.value) {
    loadUpazilas(districtEl.value, selectedUpazila);
    loadCities(districtEl.value, selectedCity);
}
</script>

@endsection
