@extends('public.layout.app')

@section('body')
<section class="section" style="padding-top:110px;">
    <div class="container">

        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <div>
                <h3 class="fw-bold mb-0">{{ __('front.membership') }}</h3>
                <div class="text-muted small">{{ __('front.afghan_online_education_union') }}</div>
            </div>

            <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm">
                <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
            </a>
        </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="card border-0 shadow-sm" style="border-radius:18px;">
            <div class="card-body p-4">

                <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="p-3 rounded-4" style="border:1px dashed rgba(2,6,23,.15); background:rgba(2,6,23,.02);">
                                <div class="small text-muted" style="line-height:1.9;">
                                    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 and keep it محفوظ.
                                </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 gap-2 align-items-center mt-2">
                            <button class="btn btn-primary">
                                <i class="fa-solid fa-paper-plane me-1"></i> {{ __('front.submit') }}
                            </button>
                            <span class="text-muted small">{{ __('front.after_submit_you_will_get_a_register_number') }}</span>
                        </div>
                    </div>

                </form>

            </div>
        </div>

    </div>
</section>
@endsection