{{-- File: resources/views/candidates/create.blade.php --}}
@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 gap-3 flex-wrap">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">নতুন প্রার্থী যোগ করুন</h1>
                <p class="text-sm text-gray-600">প্রার্থীর সকল তথ্য সঠিকভাবে পূরণ করুন</p>
            </div>
            <a href="{{ route('candidates.index') }}" class="px-4 py-2 border rounded-lg hover:bg-gray-50">
                প্রার্থী তালিকা
            </a>
        </div>

        @if ($errors->any())
            <div class="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-800">
                <div class="font-semibold mb-1">সমস্যা পাওয়া গেছে:</div>
                <ul class="list-disc pl-5 text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-xl border p-6">
            <form action="{{ route('candidates.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf

                {{-- ================= Basic ================= --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">বেসিক তথ্য</h2>

                    <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>
                            <select name="user_id" required
                                    class="w-full rounded-lg border px-4 py-2 bg-white @error('user_id') border-red-500 @enderror">
                                <option value="">ব্যবহারকারী নির্বাচন করুন</option>
                                @foreach($users as $u)
                                    <option value="{{ $u->id }}" {{ (string)old('user_id') === (string)$u->id ? 'selected' : '' }}>
                                        {{ $u->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('user_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 name="seat_id" id="seat_id" required
                                    class="w-full rounded-lg border px-4 py-2 bg-white @error('seat_id') border-red-500 @enderror">
                                <option value="">সীট নির্বাচন করুন</option>
                                @foreach($seats as $s)
                                    <option value="{{ $s->id }}" {{ (string)old('seat_id') === (string)$s->id ? 'selected' : '' }}>
                                        {{ $s->name_bn }}{{ $s->seat_code ? ' (' . $s->seat_code . ')' : '' }}
                                    </option>
                                @endforeach
                            </select>
                            @error('seat_id')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror

                            <p class="text-xs text-gray-500 mt-1">
                                নোট: সীট নির্বাচন করলে লোকেশন নিচে দেখাবে (ডাটাবেজে আলাদা করে সেভ হবে না)।
                            </p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                দলীয় নাম <span class="text-red-500">*</span>
                            </label>
                            <input name="party_name" value="{{ old('party_name') }}" required
                                   class="w-full rounded-lg border px-4 py-2 @error('party_name') border-red-500 @enderror">
                            @error('party_name')<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>
                            <input name="symbol_name" value="{{ old('symbol_name') }}" required
                                   class="w-full rounded-lg border px-4 py-2 @error('symbol_name') border-red-500 @enderror">
                            @error('symbol_name')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                {{-- ================= Location (read-only, derived from seat) ================= --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">লোকেশন (সীট থেকে)</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="border rounded-lg p-4 bg-gray-50">
                            <div class="text-xs text-gray-500">বিভাগ</div>
                            <div id="division_text" class="font-medium text-gray-900">—</div>
                        </div>

                        <div class="border rounded-lg p-4 bg-gray-50">
                            <div class="text-xs text-gray-500">জেলা</div>
                            <div id="district_text" class="font-medium text-gray-900">—</div>
                        </div>

                        <div class="border rounded-lg p-4 bg-gray-50">
                            <div class="text-xs text-gray-500">উপজেলা</div>
                            <div id="upazila_text" class="font-medium text-gray-900">—</div>
                        </div>

                        <div class="border rounded-lg p-4 bg-gray-50">
                            <div class="text-xs text-gray-500">সীট কোড</div>
                            <div id="seat_code_text" class="font-medium text-gray-900">—</div>
                        </div>
                    </div>
                </div>

                {{-- ================= Identity ================= --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">পরিচয়</h2>

                    <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>
                            {{-- Controller should convert this into nid_number_en & nid_number_bn --}}
                            <input name="nid_number" value="{{ old('nid_number') }}" required
                                   class="w-full rounded-lg border px-4 py-2 font-mono @error('nid_number') border-red-500 @enderror"
                                   placeholder="বাংলা/ইংরেজি যেকোনোটি">
                            @error('nid_number')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                            <p class="text-xs text-gray-500 mt-1">নোট: সাবমিটের সময় সিস্টেম auto-convert করে বাংলা/ইংরেজি দুই ফরম্যাটে সেভ করবে।</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                স্ট্যাটাস <span class="text-red-500">*</span>
                            </label>
                            <select name="status" required
                                    class="w-full rounded-lg border px-4 py-2 bg-white @error('status') border-red-500 @enderror">
                                <option value="active" {{ old('status','active')==='active' ? 'selected' : '' }}>সক্রিয়</option>
                                <option value="inactive" {{ old('status')==='inactive' ? 'selected' : '' }}>নিষ্ক্রিয়</option>
                                <option value="disqualified" {{ old('status')==='disqualified' ? 'selected' : '' }}>অযোগ্য</option>
                            </select>
                            @error('status')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                {{-- ================= Photos ================= --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-900 mb-3">ছবি</h2>

                    <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="file" name="photo" accept="image/*"
                                   class="w-full rounded-lg border px-4 py-2 bg-white @error('photo') border-red-500 @enderror">
                            @error('photo')<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="file" name="symbol_photo" accept="image/*"
                                   class="w-full rounded-lg border px-4 py-2 bg-white @error('symbol_photo') border-red-500 @enderror">
                            @error('symbol_photo')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </div>

                {{-- ================= Education & Bio ================= --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        শিক্ষাগত যোগ্যতা <span class="text-red-500">*</span>
                    </label>
                    <textarea name="education" rows="2" required
                              class="w-full rounded-lg border px-4 py-2 @error('education') border-red-500 @enderror">{{ old('education') }}</textarea>
                    @error('education')<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>
                    <textarea name="bio" rows="3"
                              class="w-full rounded-lg border px-4 py-2 @error('bio') border-red-500 @enderror">{{ old('bio') }}</textarea>
                    @error('bio')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- ================= Election Manifesto ================= --}}
                <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">
        নির্বাচনী ইশতেহার
    </label>

    <textarea name="election_manifesto"
              rows="7"
              class="w-full rounded-lg border px-4 py-2 @error('election_manifesto') border-red-500 @enderror"
              placeholder="📜 নির্বাচনী ইশতেহার

সংক্ষিপ্ত ভূমিকা (১ লাইনে লিখুন)

ডিজিটাল সেবা জনগণের দোরগোড়ায় পৌঁছে দেওয়া
ইউনিয়ন ও ওয়ার্ড পর্যায়ে ডিজিটাল সেবা কেন্দ্র শক্তিশালী করা
যুবকদের কর্মসংস্থান সৃষ্টি ও দক্ষতা উন্নয়ন
স্বাস্থ্য ও শিক্ষা ব্যবস্থার আধুনিকায়ন
দুর্নীতিমুক্ত ও স্বচ্ছ প্রশাসন গড়ে তোলা

শেষে একটি সংক্ষিপ্ত আহ্বান লিখতে পারেন (ঐচ্ছিক)"
    >{{ old('election_manifesto') }}</textarea>

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

    <p class="text-xs text-gray-500 mt-1 leading-relaxed">
        ✦ প্রথম লাইন হবে সংক্ষিপ্ত ভূমিকা (paragraph হিসেবে দেখানো হবে)<br>
        ✦ পরের প্রতিটি লাইন আলাদা বুলেট পয়েন্ট হিসেবে দেখানো হবে<br>
        ✦ খালি লাইন দিলে নতুন সেকশন আলাদা করে বোঝানো যাবে<br>
        ✦ শেষে একটি সংক্ষিপ্ত আহ্বান যোগ করুন

    </p>
</div>


                {{-- ================= Slug ================= --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Slug <span class="text-red-500">*</span>
                    </label>
                    <input name="slug" value="{{ old('slug') }}" required
                           class="w-full rounded-lg border px-4 py-2 font-mono @error('slug') border-red-500 @enderror"
                           placeholder="যেমন: niloy-uttara-1">
                    @error('slug')<p class="text-sm text-red-600 mt-1">{{ $message }}</p>@enderror
                    <p class="text-xs text-gray-500 mt-1">শুধু ইংরেজি, নাম্বার, ড্যাশ ব্যবহার করুন</p>
                </div>

                <div class="flex justify-end gap-3 pt-4 border-t">
                    <a href="{{ route('candidates.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>
(function () {
    // IMPORTANT:
    // Controller should pass seats eager-loaded like:
    // Seat::with(['district.division','upazila'])->get()
    const seats = @json($seats ?? []);

    const seatEl = document.getElementById('seat_id');

    const divisionText  = document.getElementById('division_text');
    const districtText  = document.getElementById('district_text');
    const upazilaText   = document.getElementById('upazila_text');
    const seatCodeText  = document.getElementById('seat_code_text');

    function setLocationFromSeat(seatId) {
        const s = (seats || []).find(x => String(x.id) === String(seatId));

        if (!s) {
            divisionText.textContent = '—';
            districtText.textContent = '—';
            upazilaText.textContent  = '—';
            seatCodeText.textContent = '—';
            return;
        }

        const divisionBn = s?.district?.division?.name_bn || s?.district?.division?.bn_name || s?.district?.division?.name || '';
        const districtBn = s?.district?.name_bn || s?.district?.bn_name || s?.district?.name || '';
        const upazilaBn  = s?.upazila?.name_bn || s?.upazila?.bn_name || s?.upazila?.name || '';

        divisionText.textContent = divisionBn || '—';
        districtText.textContent = districtBn || '—';
        upazilaText.textContent  = upazilaBn || '—';
        seatCodeText.textContent = s?.seat_code ? String(s.seat_code) : '—';
    }

    seatEl?.addEventListener('change', () => {
        setLocationFromSeat(seatEl.value);
    });

    // Initial restore after validation fail
    if (seatEl?.value) setLocationFromSeat(seatEl.value);
})();
</script>
@endsection
