@extends('layouts.app')

@section('title', 'Refer a candidate')
@section('heading', 'Refer a candidate')

@section('content')
    @include('recruitment.top-submenu')

    <x-card class="max-w-3xl">
        @if(session('success'))
            <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
        @endif

        <p class="mb-6 text-sm text-slate-600">Submit a referral for an open role. A resume (PDF or Word, max 5 MB) is required.</p>

        <form action="{{ route('applicants.refer.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5" novalidate data-refer-form="refer">
            @csrf
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700">Job posting <span class="text-red-500">*</span></label>
                    <select name="job_posting_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
                        <option value="">Select position</option>
                        @foreach($jobPostings as $posting)
                            <option value="{{ $posting->id }}" @selected(old('job_posting_id', $selectedJobId) == $posting->id)>{{ $posting->title }}</option>
                        @endforeach
                    </select>
                    @error('job_posting_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="job_posting_id" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Candidate name <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
                    @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="name" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
            </div>
            <div class="grid gap-4 md:grid-cols-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
                    @error('email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="email" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">Phone</label>
                    <div class="mt-1 flex gap-2">
                        <span class="inline-flex items-center rounded-lg border border-slate-300 bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700">+91</span>
                        <input type="text" name="phone" value="{{ old('phone') }}" maxlength="10" inputmode="numeric" class="block w-full rounded-lg border border-slate-300 px-3 py-2">
                    </div>
                    @error('phone')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p data-js-error="phone" class="mt-1 text-sm text-red-600 hidden"></p>
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Resume <span class="text-red-500">*</span></label>
                <input type="file" name="resume" accept=".pdf,.doc,.docx" data-resume-required="1" class="mt-1 block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-medium file:text-slate-700 hover:file:bg-slate-200">
                @error('resume')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="resume" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Notes for HR</label>
                <textarea name="notes" rows="3" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('notes') }}</textarea>
                @error('notes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="notes" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div class="flex gap-2">
                <x-button type="submit" variant="primary">Submit referral</x-button>
            </div>
        </form>
    </x-card>
@endsection

@push('scripts')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/applicant-form-validation.js') }}"></script>
@endpush