@extends('public.layout.app')
@section('title', 'Volunteer Staff Application')

@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-people-carry-box"></i> Volunteer Staff</span>
                <h1 class="online-form-title">Volunteer staff application</h1>
                <p class="online-form-subtitle">Apply for volunteer administrative, operations, student support, finance, HR, or office support roles.</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-clipboard-list"></i></span>
                <h2>Support operations</h2>
                <p>Help the institution with administrative, student service, office, communications, and operational work.</p>
                <div class="online-form-step"><span>1</span><div><strong>Identity</strong><small>Personal and contact information.</small></div></div>
                <div class="online-form-step"><span>2</span><div><strong>Role</strong><small>Position, skills, education, experience.</small></div></div>
                <div class="online-form-step"><span>3</span><div><strong>Agreement</strong><small>Confirm volunteer commitment.</small></div></div>
            </aside>

            <div class="card online-form-card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form method="POST" action="{{ route('front.volunteer_staff.store') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="row g-3">
                            <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>

                            <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>

                            <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>

                            <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>

                            <div class="col-md-6">
                                <label class="form-label">Desired Staff Position</label>
                                <input type="text" name="desired_position" value="{{ old('desired_position') }}" class="form-control @error('desired_position') is-invalid @enderror" placeholder="Administration, HR, finance, student support...">
                                @error('desired_position') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <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-4">
                                <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-4">
                                <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-4">
                                <label class="form-label">Relevant Skills</label>
                                <input type="text" name="skills" value="{{ old('skills') }}" class="form-control @error('skills') is-invalid @enderror" placeholder="MS Office, records, accounting, communication...">
                                @error('skills') <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>

                            <div class="col-12">
                                <div class="online-form-agreement p-3">
                                    <div class="small online-form-note" style="line-height:1.9;">
                                        I confirm my information is correct. I volunteer for a staff or administrative role and agree to follow the institution rules and professional ethics.
                                    </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-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>
    </div>
</section>
@endsection