@props([
    'interviewers' => [],
])

@php
    $errorBag = session('errors') ?? (isset($errors) ? $errors : null) ?? new \Illuminate\Support\ViewErrorBag;
    $hasInterviewErrors = $errorBag->any() && (
        $errorBag->has('candidate_name') ||
        $errorBag->has('candidate_email') ||
        $errorBag->has('candidate_phone') ||
        $errorBag->has('job_title') ||
        $errorBag->has('round') ||
        $errorBag->has('scheduled_at') ||
        $errorBag->has('valid_hours') ||
        $errorBag->has('language') ||
        $errorBag->has('assigned_interviewers') ||
        $errorBag->has('assigned_interviewers.*') ||
        $errorBag->has('description')
    );
@endphp

<x-drawer
    id="create-interview-drawer"
    title="Schedule Candidate Assessment"
    description="Provision candidate temporary credentials, IDE access timeline, and assign review panelists."
    width="lg"
    class="{{ $hasInterviewErrors ? 'active' : '' }}"
>
    <form action="{{ route('interview.store') }}" method="POST">
        @csrf

        @if($hasInterviewErrors)
            <div class="mb-4 bg-rose-500/10 border border-rose-500/30 rounded-xl p-3.5 text-xs text-rose-300 flex items-start gap-2.5">
                <i class="fa-solid fa-triangle-exclamation text-rose-400 mt-0.5 shrink-0 text-sm"></i>
                <div class="flex-1">
                    <strong class="block font-semibold text-rose-200">Please correct the following errors:</strong>
                    <ul class="list-disc list-inside mt-1 space-y-0.5 text-[11px] text-rose-300">
                        @foreach($errorBag->all() as $errorMsg)
                            <li>{{ $errorMsg }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <div class="space-y-4">
            <div>
                <x-label required>Candidate Name</x-label>
                <x-input type="text" name="candidate_name" value="{{ old('candidate_name') }}" required placeholder="e.g. Jhon Doe" />
                @if($errorBag->has('candidate_name'))
                    <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('candidate_name') }}
                    </p>
                @endif
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                <div>
                    <x-label required>Position / Job Title</x-label>
                    <x-input type="text" name="job_title" value="{{ old('job_title') }}" required placeholder="e.g. AIML Engineer" />
                    @if($errorBag->has('job_title'))
                        <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('job_title') }}
                        </p>
                    @endif
                </div>
                <div>
                    <x-label>Assessment Round</x-label>
                    <x-input type="text" name="round" value="{{ old('round', 'R1') }}" placeholder="e.g. R1, Technical" />
                    @if($errorBag->has('round'))
                        <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('round') }}
                        </p>
                    @endif
                </div>
            </div>

            <div>
                <x-label required>Candidate Email</x-label>
                <x-input type="email" name="candidate_email" value="{{ old('candidate_email') }}" required placeholder="candidate@example.com" />
                @if($errorBag->has('candidate_email'))
                    <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('candidate_email') }}
                    </p>
                @endif
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                <div>
                    <x-label required>Phone Number</x-label>
                    <x-input type="text" name="candidate_phone" value="{{ old('candidate_phone') }}" required placeholder="9XXXXXXXXX" />
                    @if($errorBag->has('candidate_phone'))
                        <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('candidate_phone') }}
                        </p>
                    @endif
                </div>
                <div>
                    <x-label required>Access Duration</x-label>
                    <x-select name="valid_hours" required>
                        <option value="1" @selected(old('valid_hours') === '1')>1 Hour</option>
                        <option value="2" @selected(old('valid_hours', '2') === '2')>2 Hours</option>
                        <option value="4" @selected(old('valid_hours') === '4')>4 Hours</option>
                        <option value="12" @selected(old('valid_hours') === '12')>12 Hours</option>
                        <option value="24" @selected(old('valid_hours') === '24')>24 Hours</option>
                    </x-select>
                    @if($errorBag->has('valid_hours'))
                        <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('valid_hours') }}
                        </p>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                <div>
                    <x-label for="scheduled_at">Start Time (Timeline)</x-label>
                    <x-input type="datetime-local" id="scheduled_at" name="scheduled_at" value="{{ old('scheduled_at', now()->format('Y-m-d\TH:i')) }}" class="bg-slate-900" />
                    @if($errorBag->has('scheduled_at'))
                        <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('scheduled_at') }}
                        </p>
                    @endif
                </div>
                <div>
                    <x-label required>Coding Language</x-label>
                    <x-select name="language" required>
                        <option value="python" @selected(old('language', 'python') === 'python')>Python 3</option>
                        <option value="cpp" @selected(old('language') === 'cpp')>C++ (GCC)</option>
                        <option value="c" @selected(old('language') === 'c')>C (GCC)</option>
                        <option value="java" @selected(old('language') === 'java')>Java 15</option>
                        <option value="php" @selected(old('language') === 'php')>PHP 8.2 / Laravel</option>
                        <option value="javascript" @selected(old('language') === 'javascript')>JavaScript (Node.js)</option>
                    </x-select>
                    @if($errorBag->has('language'))
                        <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                            <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('language') }}
                        </p>
                    @endif
                </div>
            </div>

            <div>
                <x-label>Additional Instructions to candidate</x-label>
                <textarea name="description" rows="2" class="w-full bg-slate-900 border @if($errorBag->has('description')) border-rose-500/80 focus:border-rose-500 @else border-slate-700/60 focus:border-indigo-500 @endif rounded-xl p-3 text-xs text-white placeholder-slate-500 focus:outline-none transition-colors" placeholder="Special requirements, interview topics, or instructions...">{{ old('description') }}</textarea>
                @if($errorBag->has('description'))
                    <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('description') }}
                    </p>
                @endif
            </div>

            <div>
                <div class="flex justify-between items-center mb-1.5">
                    <x-label>Assign Internal Interviewers / Panelists</x-label>
                </div>
                <div class="space-y-2 max-h-35 overflow-y-auto bg-black/30 p-3 rounded-xl border @if($errorBag->has('assigned_interviewers')) border-rose-500/80 @else border-slate-700/60 @endif">
                    @foreach($interviewers as $usr)
                        <label class="flex items-center gap-2.5 text-xs text-white cursor-pointer hover:text-indigo-300 transition-colors py-0.5">
                            <input type="checkbox" name="assigned_interviewers[]" value="{{ $usr->id }}" @checked(in_array($usr->id, (array) old('assigned_interviewers', []))) class="accent-indigo-500 rounded w-4 h-4">
                            <span>{{ $usr->name }} <span class="text-slate-400 font-mono text-[11px]">({{ $usr->email }})</span></span>
                        </label>
                    @endforeach
                </div>
                @if($errorBag->has('assigned_interviewers'))
                    <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('assigned_interviewers') }}
                    </p>
                @endif
                @if($errorBag->has('assigned_interviewers.*'))
                    <p class="text-[11px] text-rose-400 mt-1 font-medium flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation text-[10px]"></i> {{ $errorBag->first('assigned_interviewers.*') }}
                    </p>
                @endif
            </div>
        </div>

        <div class="flex justify-end gap-2.5 pt-6 mt-6 border-t border-white/10">
            <x-button type="button" onclick="document.getElementById('create-interview-drawer').classList.remove('active')" variant="secondary">
                Cancel
            </x-button>
            <x-button type="submit" variant="primary" icon="fa-solid fa-paper-plane" :showLoader="true" loadingText="Scheduling...">
                Schedule
            </x-button>
        </div>
    </form>
</x-drawer>