@extends('public.layout.app')

@section('title', __('front.membership'))

@section('body')
<section class="online-form-shell">
    <div class="container">
        <div class="online-form-top public-animated-block">
            <div>
                <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm mb-4">
                    <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
                </a>
                <span class="online-form-kicker"><i class="fa-solid fa-id-card"></i> {{ __('front.membership') }}</span>
                <h1 class="online-form-title">Membership application</h1>
                <p class="online-form-subtitle">{{ __('front.afghan_online_education_union') }}</p>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle-check"></i>
                <div>{{ session('success') }}</div>
            </div>
        @endif

        <div class="online-form-layout">
            <aside class="online-form-side">
                <span class="online-form-icon"><i class="fa-solid fa-users-gear"></i></span>
                <h2>Join the community</h2>
                <p>Submit your identity, education, contact details, agreement, and signature for official membership review.</p>
                <div class="online-form-step"><span>1</span><div><strong>Personal details</strong><small>Name, identity, education, job.</small></div></div>
                <div class="online-form-step"><span>2</span><div><strong>Contact</strong><small>Country, email, and WhatsApp phone.</small></div></div>
                <div class="online-form-step"><span>3</span><div><strong>Agreement</strong><small>Confirm and submit the request.</small></div></div>
                @include('public.partials.form-help-notice', [
                    'roleEn' => 'After applying, your role is membership applicant. The administration reviews your identity and contact details before confirming membership.',
                    'rolePs' => 'له غوښتنې وروسته ستاسو رول د غړیتوب غوښتونکی دی. اداره ستاسو هویت او اړیکې ګوري او وروسته غړیتوب تاییدوي.',
                    'roleFa' => 'پس از درخواست، نقش شما درخواست‌دهنده عضویت است. اداره هویت و معلومات تماس شما را بررسی کرده و سپس عضویت را تأیید می‌کند.',
                ])
            </aside>

            <div class="online-form-card">
                <form method="POST" action="{{ route('front.membership.store') }}">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.full_name_2') }}</label>
                            <input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror">
                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.passport_tazkira_no') }}</label>
                            <input type="text" name="passport_or_tazkira_no" value="{{ old('passport_or_tazkira_no') }}" class="form-control @error('passport_or_tazkira_no') is-invalid @enderror">
                            @error('passport_or_tazkira_no') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.education_degree') }}</label>
                            <input type="text" name="education_degree" value="{{ old('education_degree') }}" class="form-control @error('education_degree') is-invalid @enderror">
                            @error('education_degree') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.current_job') }}</label>
                            <input type="text" name="current_job" value="{{ old('current_job') }}" class="form-control @error('current_job') is-invalid @enderror">
                            @error('current_job') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.previous_job') }}</label>
                            <input type="text" name="previous_job" value="{{ old('previous_job') }}" class="form-control @error('previous_job') is-invalid @enderror">
                            @error('previous_job') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.current_country') }}</label>
                            <input type="text" name="country" value="{{ old('country') }}" class="form-control @error('country') is-invalid @enderror">
                            @error('country') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.email') }}</label>
                            <input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror">
                            @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.whatsapp_phone') }}</label>
                            <input type="text" name="phone" value="{{ old('phone') }}" class="form-control @error('phone') is-invalid @enderror">
                            @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-12">
                            <div class="online-form-agreement p-3">
                                <div class="small online-form-note">
                                    I confirm my identity and information are correct and I request official membership.
                                    I commit to follow the union's rules, and I agree that the union may use my name for administrative purposes.
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input @error('agreement') is-invalid @enderror" type="checkbox" id="agree" name="agreement" value="1" {{ old('agreement') ? 'checked' : '' }}>
                                <label class="form-check-label" for="agree">{{ __('front.i_agree') }}</label>
                                @error('agreement') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.signature_name') }}</label>
                            <input type="text" name="signature_name" value="{{ old('signature_name') }}" class="form-control @error('signature_name') is-invalid @enderror" placeholder="{{ __('front.type_your_name') }}">
                            @error('signature_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.date_2') }}</label>
                            <input type="date" name="signed_date" value="{{ old('signed_date') }}" class="form-control @error('signed_date') is-invalid @enderror">
                            @error('signed_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-12 d-flex flex-wrap gap-3 align-items-center mt-2">
                            <button class="btn btn-accent px-4">
                                <i class="fa-solid fa-paper-plane me-1"></i> {{ __('front.submit') }}
                            </button>
                            <span class="online-form-note small">{{ __('front.after_submit_you_will_get_a_register_number') }}</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection