@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.volunteer_lecturer') }}</h3>
                <div class="text-muted small">{{ __('front.apply_to_support_online_education') }}</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.volunteer.store') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="row g-3">

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

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

                        {{-- Contact --}}
                        <div class="col-md-6">
                            <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-6">
                            <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>

                        {{-- Residence --}}
                        <div class="col-md-3">
                            <label class="form-label">{{ __('front.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-3">
                            <label class="form-label">{{ __('front.city') }}</label>
                            <input type="text" name="city" value="{{ old('city') }}"
                                   class="form-control @error('city') is-invalid @enderror">
                            @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

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

                        <div class="col-md-3">
                            <label class="form-label">{{ __('front.experience_years') }}</label>
                            <input type="number" name="experience_years" value="{{ old('experience_years') }}"
                                   class="form-control @error('experience_years') is-invalid @enderror" min="0" max="80">
                            @error('experience_years') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-12">
                            <label class="form-label">{{ __('front.address') }}</label>
                            <textarea name="address" rows="3"
                                      class="form-control @error('address') is-invalid @enderror"
                                      placeholder="{{ __('front.full_current_address') }}">{{ old('address') }}</textarea>
                            @error('address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        {{-- Identity --}}
                        <div class="col-md-4">
                            <label class="form-label">{{ __('front.identity_type') }}</label>
                            <select name="identity_type" class="form-select @error('identity_type') is-invalid @enderror">
                                <option value="tazkira" @selected(old('identity_type')=='tazkira')>{{ __('front.tazkira') }}</option>
                                <option value="passport" @selected(old('identity_type')=='passport')>{{ __('front.passport') }}</option>
                                <option value="other" @selected(old('identity_type')=='other')>{{ __('front.other') }}</option>
                            </select>
                            @error('identity_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

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

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

                        {{-- Education --}}
                        <div class="col-md-3">
                            <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"
                                   placeholder="{{ __('front.bachelor_master_phd') }}">
                            @error('education_degree') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

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

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

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

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.educational_documents_multiple') }}</label>
                            <input type="file" name="education_docs[]" multiple
                                   class="form-control @error('education_docs') is-invalid @enderror">
                            @error('education_docs') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            @error('education_docs.*') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                            <div class="text-muted small mt-1">{{ __('front.pdf_jpg_png_max_4mb_each') }}</div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.cv_optional') }}</label>
                            <input type="file" name="cv_file"
                                   class="form-control @error('cv_file') is-invalid @enderror">
                            @error('cv_file') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <div class="text-muted small mt-1">{{ __('front.pdf_doc_docx_max_4mb') }}</div>
                        </div>

                        {{-- Agreement --}}
                        <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;">
                                    {{ __('front.i_confirm_my_information_is_correct_i_volunteer_as_a_le') }}
                                </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_2') }}
                                </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">
                            @error('signature_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">{{ __('front.date') }}</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