@extends('layouts.app')

@section('title', 'Join as Member - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">REGISTRATION</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Membership <span style="color: var(--gold-light);">Registration</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Registration form -->
<section class="section-pad" style="background: var(--white);">
    <div class="container" style="max-width: 700px;">
        <div style="background: var(--off-white); border-radius: var(--radius); border: 1px solid var(--gray-200); padding: 40px; box-shadow: var(--shadow-sm);">
            
            @if($errors->any())
            <div style="background: var(--red); color: white; padding: 14px 20px; border-radius: 8px; font-size: 0.82rem; margin-bottom: 24px;">
                <ul style="list-style: none;">
                    @foreach($errors->all() as $error)
                        <li><i class="fas fa-exclamation-circle"></i> {{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('register') }}" method="POST" enctype="multipart/form-data" style="display: flex; flex-direction: column; gap: 20px;">
                @csrf
                
                <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.15rem; color: var(--blue); border-bottom: 1px solid var(--gray-200); padding-bottom: 8px; margin-bottom: 6px;">Personal Details</h4>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">First Name</label>
                        <input type="text" name="first_name" value="{{ old('first_name') }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Last Name</label>
                        <input type="text" name="last_name" value="{{ old('last_name') }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Email Address</label>
                        <input type="email" name="email" value="{{ old('email') }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Contact Phone</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Gender</label>
                        <select name="gender" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                            <option value="">Select Gender</option>
                            <option value="Male" {{ old('gender') === 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender') === 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender') === 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Date of Birth</label>
                        <input type="date" name="dob" value="{{ old('dob') }}" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                </div>

                <div>
                    <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Address</label>
                    <input type="text" name="address" value="{{ old('address') }}" required placeholder="City, Street" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                </div>

                <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.15rem; color: var(--blue); border-bottom: 1px solid var(--gray-200); padding-bottom: 8px; margin-bottom: 6px; margin-top: 14px;">Association Affiliations</h4>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">District</label>
                        <select name="district_id" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                            <option value="">Select District</option>
                            @foreach($districts as $d)
                                <option value="{{ $d->id }}" {{ old('district_id') == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Affiliated Dojang / Club</label>
                        <select name="club_id" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                            <option value="">Select Dojo / Club (Optional)</option>
                            @foreach($clubs as $c)
                                <option value="{{ $c->id }}" {{ old('club_id') == $c->id ? 'selected' : '' }}>{{ $c->name }} ({{ $c->district->name ?? '' }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div>
                    <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Profile Photo</label>
                    <input type="file" name="photo" style="width: 100%; padding: 8px; border-radius: 8px; border: 1px dashed var(--gray-200); outline: none; font-size: 0.88rem;">
                </div>

                <h4 style="font-family: 'Oswald', sans-serif; font-size: 1.15rem; color: var(--blue); border-bottom: 1px solid var(--gray-200); padding-bottom: 8px; margin-bottom: 6px; margin-top: 14px;">Portal Access Security</h4>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Password</label>
                        <input type="password" name="password" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                    <div>
                        <label style="display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px;">Confirm Password</label>
                        <input type="password" name="password_confirmation" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--gray-200); outline: none; font-size: 0.88rem; font-family: inherit;" onfocus="this.style.borderColor='var(--blue)'">
                    </div>
                </div>

                <button type="submit" class="btn btn-blue" style="justify-content: center; padding: 13px; font-size: 0.9rem; margin-top: 14px;">
                    <i class="fas fa-user-plus"></i> Submit Membership Application
                </button>
            </form>

            <div style="margin-top: 30px; text-align: center; font-size: 0.85rem; color: var(--gray-500); border-top: 1px solid var(--gray-200); padding-top: 20px;">
                Already have an account? <a href="{{ route('login') }}" style="color: var(--red); font-weight: 700; text-decoration: none;">Login Here</a>
            </div>
        </div>
    </div>
</section>

@endsection