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

<x-drawer
    id="create-interview-drawer"
    title="Schedule Candidate Assessment"
    description="Provision candidate temporary credentials, IDE access timeline, and assign review panelists."
    width="lg"
>
    <form action="{{ route('interview.store') }}" method="POST">
        @csrf
        <div class="space-y-4">
            <div>
                <x-label required>Candidate Name</x-label>
                <x-input type="text" name="candidate_name" required placeholder="e.g. John Doe" />
            </div>

            <div>
                <x-label required>Candidate Email</x-label>
                <x-input type="email" name="candidate_email" required placeholder="john@gmail.com" />
            </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" required placeholder="9876543210" />
                </div>
                <div>
                    <x-label required>Access Duration</x-label>
                    <x-select name="valid_hours" required>
                        <option value="1">1 Hour</option>
                        <option value="2" selected>2 Hours</option>
                        <option value="4">4 Hours</option>
                        <option value="12">12 Hours</option>
                        <option value="24">24 Hours</option>
                    </x-select>
                </div>
            </div>

            <div>
                <x-label>Start Time (Timeline)</x-label>
                <x-input type="datetime-local" name="scheduled_at" value="{{ now()->format('Y-m-d\TH:i') }}" class="bg-slate-900" />
            </div>

            <div>
                <x-label required>Coding Language</x-label>
                <x-select name="language" required>
                    <option value="python">Python 3</option>
                    <option value="cpp">C++ (GCC)</option>
                    <option value="c">C (GCC)</option>
                    <option value="java">Java 15</option>
                    <option value="php">PHP 8.2 / Laravel</option>
                    <option value="javascript">JavaScript (Node.js)</option>
                </x-select>
            </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-[160px] overflow-y-auto bg-black/30 p-3 rounded-xl border border-slate-700/60">
                    @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 }}" 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>
            </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-check">
                Create Session & Password
            </x-button>
        </div>
    </form>
</x-drawer>