@extends('layouts.public')

@section('title', $lang === 'en' ? 'Join Us - NowJoan' : 'যোগ দিন - নওজোয়ান')

@section('content')
@php $label = fn ($bn, $en) => $lang === 'en' ? $en : $bn; @endphp
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-[var(--primary-green)]/5 via-[var(--cream)] to-[var(--primary-red)]/5">
    <div class="max-w-5xl mx-auto">
        <div class="mb-12">
            <a href="{{ route('home', $lang === 'en' ? ['lang' => 'en'] : []) }}" class="text-[var(--primary-green)] hover:text-[var(--primary-red)] smooth-transition">{{ $label('← ফিরে যান', '← Back') }}</a>
        </div>
        <div class="text-center mb-12">
            <h1 class="text-[var(--primary-green)] mb-4">{{ $label('সদস্যপদ আবেদন', 'Membership Application') }}</h1>
            <p class="text-xl text-[var(--light-text)]">{{ $label('পরিবর্তনের অংশীদার হতে আজই আবেদন করুন।', 'Apply today to become a partner in change.') }}</p>
        </div>
        @if(session('success'))<div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg mb-8 text-green-700">{{ session('success') }}</div>@endif
        @if($errors->any())<div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-lg mb-8 text-red-700">{{ $errors->first() }}</div>@endif
        <form method="post" action="{{ route('join.store') }}" class="bg-white rounded-3xl shadow-2xl p-8 md:p-12 space-y-6">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <input name="full_name" value="{{ old('full_name') }}" required placeholder="{{ $label('পূর্ণ নাম (বাংলা)', 'Full name (Bangla)') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="full_name_en" value="{{ old('full_name_en') }}" required placeholder="{{ $label('পূর্ণ নাম (ইংরেজি)', 'Full name (English)') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="father_name" value="{{ old('father_name') }}" required placeholder="{{ $label('পিতার নাম', 'Father name') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="mother_name" value="{{ old('mother_name') }}" required placeholder="{{ $label('মাতার নাম', 'Mother name') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" required class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="nid_number" value="{{ old('nid_number') }}" required placeholder="{{ $label('জাতীয় পরিচয়পত্র নম্বর', 'NID number') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="phone" value="{{ old('phone') }}" required placeholder="{{ $label('ফোন নম্বর', 'Phone') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input type="email" name="email" value="{{ old('email') }}" required placeholder="{{ $label('ইমেইল', 'Email') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <select name="district" required class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                    <option value="">{{ $label('জেলা নির্বাচন করুন', 'Select district') }}</option>
                    @foreach($districts as $district)
                        <option value="{{ $district->name_bn ?: $district->name }}">{{ $lang === 'en' ? $district->name : ($district->name_bn ?: $district->name) }}</option>
                    @endforeach
                </select>
                <input name="upazila" value="{{ old('upazila') }}" required placeholder="{{ $label('উপজেলা', 'Upazila') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="occupation" value="{{ old('occupation') }}" required placeholder="{{ $label('পেশা', 'Occupation') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <input name="education" value="{{ old('education') }}" required placeholder="{{ $label('শিক্ষাগত যোগ্যতা', 'Education') }}" class="p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
            </div>
            <textarea name="address" required rows="3" placeholder="{{ $label('ঠিকানা', 'Address') }}" class="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">{{ old('address') }}</textarea>
            <select name="membership_type" required class="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-[var(--primary-green)] focus:outline-none">
                <option value="general">{{ $label('সাধারণ সদস্য', 'General member') }}</option>
                <option value="active">{{ $label('সক্রিয় সদস্য', 'Active member') }}</option>
                <option value="volunteer">{{ $label('স্বেচ্ছাসেবক', 'Volunteer') }}</option>
            </select>
            <button class="w-full py-4 bg-[var(--primary-green)] hover:bg-[var(--primary-green)]/90 text-white rounded-xl smooth-transition shadow-lg">{{ $label('আবেদন জমা দিন', 'Submit Application') }}</button>
        </form>
    </div>
</section>
@endsection