@php
    $selectedApplicantId = old('applicant_id', $interview?->applicant_id);
    $selectedApplicant = $applicants->firstWhere('id', (int) $selectedApplicantId);
    $initialResumeUrl = $selectedApplicant?->resume_path
        ? route('applicants.resume.download', $selectedApplicant)
        : '';
    $initialResumeName = $selectedApplicant?->resume_path
        ? ($selectedApplicant->name.' — Resume')
        : '';
@endphp

<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    <div
        class="lg:col-span-2"
        x-data="{
            resumeUrl: @js($initialResumeUrl),
            resumeName: @js($initialResumeName),
            syncFromSelect() {
                const select = this.$refs.applicantSelect;
                if (!select) return;
                const option = select.options[select.selectedIndex];
                this.resumeUrl = option?.dataset?.resumeUrl || '';
                this.resumeName = option?.dataset?.resumeName || '';
            },
            init() {
                this.syncFromSelect();
                this.$nextTick(() => {
                    const select = this.$refs.applicantSelect;
                    if (!select) return;
                    const onChange = () => this.syncFromSelect();
                    select.addEventListener('change', onChange);
                    if (window.jQuery) {
                        window.jQuery(select).on('change select2:select select2:clear', onChange);
                    }
                });
            }
        }"
    >
        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="block text-sm font-medium text-slate-700">Applicant</label>
                <select
                    name="applicant_id"
                    x-ref="applicantSelect"
                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2"
                    required
                >
                    <option value="" data-resume-url="" data-resume-name="">Select applicant</option>
                    @foreach($applicants as $applicant)
                        <option
                            value="{{ $applicant->id }}"
                            data-resume-url="{{ $applicant->resume_path ? route('applicants.resume.download', $applicant) : '' }}"
                            data-resume-name="{{ $applicant->resume_path ? $applicant->name.' — Resume' : '' }}"
                            @selected((string) $selectedApplicantId === (string) $applicant->id)
                        >{{ $applicant->name }}</option>
                    @endforeach
                </select>
                @error('applicant_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Resume</label>
                <div class="mt-1 flex min-h-[42px] items-center rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm">
                    <template x-if="resumeUrl">
                        <a
                            :href="resumeUrl"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="inline-flex items-center gap-1.5 font-medium text-primary hover:underline"
                        >
                            <i class="bi bi-file-earmark-person"></i>
                            <span x-text="resumeName || 'View resume'"></span>
                        </a>
                    </template>
                    <template x-if="!resumeUrl">
                        <span class="text-slate-500">No resume uploaded</span>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Interviewer</label>
        <select name="interviewer_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            <option value="">Select interviewer</option>
            @foreach($interviewers as $interviewer)
                <option value="{{ $interviewer->id }}" @selected(old('interviewer_id', $interview?->interviewer_id) == $interviewer->id)>{{ $interviewer->name }}</option>
            @endforeach
        </select>
        @error('interviewer_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Interview Type</label>
        <select name="interview_type" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            @foreach(['video', 'in-person', 'phone'] as $type)
                <option value="{{ $type }}" @selected(old('interview_type', $interview?->interview_type ?? 'video') === $type)>{{ ucfirst($type) }}</option>
            @endforeach
        </select>
        @error('interview_type')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Scheduled At</label>
        <input type="datetime-local" name="scheduled_at" value="{{ old('scheduled_at', $interview?->scheduled_at?->format('Y-m-d\TH:i')) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" required>
        @error('scheduled_at')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Meeting link</label>
        <input type="url" name="meeting_link" value="{{ old('meeting_link', $interview?->meeting_link) }}" placeholder="https://meet.google.com/..." class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('meeting_link')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Status</label>
        <select name="status" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            @foreach(['scheduled', 'completed', 'cancelled'] as $status)
                <option value="{{ $status }}" @selected(old('status', $interview?->status ?? 'scheduled') === $status)>{{ ucfirst($status) }}</option>
            @endforeach
        </select>
        @error('status')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-slate-700">Feedback</label>
    <textarea name="feedback" rows="4" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('feedback', $interview?->feedback) }}</textarea>
    @error('feedback')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
</div>

<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    <div>
        <label class="block text-sm font-medium text-slate-700">Follow-up date &amp; time</label>
        <input type="datetime-local" name="follow_up_at" value="{{ old('follow_up_at', $interview?->follow_up_at?->format('Y-m-d\TH:i')) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('follow_up_at')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-slate-700">Follow-up notes</label>
    <textarea name="follow_up_notes" rows="3" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" placeholder="Reminder for next touchpoint or next round">{{ old('follow_up_notes', $interview?->follow_up_notes) }}</textarea>
    @error('follow_up_notes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
</div>

<div class="flex gap-2">
    <x-button type="submit" variant="primary">Save</x-button>
    <a href="{{ route('interviews.index') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Cancel</a>
</div>