<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.konsultasi.index') }}" class="text-white/70 hover:text-white transition-colors">
                <i class="fas fa-arrow-left"></i>
            </a>
            <i class="fas fa-stethoscope text-white/80"></i>
            <span>Buat Konsultasi Baru</span>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">

            @if($errors->any())
            <div class="p-4 rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700">
                <div class="flex items-center space-x-2 mb-2">
                    <i class="fas fa-exclamation-circle text-red-500"></i>
                    <span class="font-semibold text-red-700 dark:text-red-300 text-sm">Ada kesalahan input:</span>
                </div>
                <ul class="list-disc list-inside space-y-1">
                    @foreach($errors->all() as $e)
                    <li class="text-red-600 dark:text-red-400 text-sm">{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
            @endif

            <form action="{{ route('admin.konsultasi.store') }}" method="POST">
                @csrf

                <div class="kkd-card space-y-6">
                    <div>
                        <h2 class="section-title flex items-center space-x-2">
                            <i class="fas fa-user-injured text-teal-500"></i>
                            <span>Data Konsultasi</span>
                        </h2>
                        <p class="section-subtitle mt-0.5">Pilih pasien dan dokter untuk sesi konsultasi</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        {{-- Pasien --}}
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                                Pasien <span class="text-red-500">*</span>
                            </label>
                            <select name="pasien_id" id="pasienSelect" required
                                    class="w-full px-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition-colors">
                                <option value="">-- Pilih Pasien --</option>
                                @foreach($pasiens as $p)
                                <option value="{{ $p->id }}" {{ old('pasien_id') == $p->id ? 'selected' : '' }}>
                                    {{ $p->nama_lengkap }} — {{ $p->no_rm ?? 'no RM' }}
                                </option>
                                @endforeach
                            </select>
                            @error('pasien_id')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                        </div>

                        {{-- Dokter --}}
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                                Dokter <span class="text-red-500">*</span>
                            </label>
                            <select name="dokter_id" id="dokterSelect" required
                                    class="w-full px-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition-colors">
                                <option value="">-- Pilih Dokter --</option>
                                @foreach($dokters as $d)
                                <option value="{{ $d->id }}" {{ old('dokter_id') == $d->id ? 'selected' : '' }}>
                                    {{ $d->nama_dokter }} — {{ $d->spesialisasi ?? 'Umum' }}
                                </option>
                                @endforeach
                            </select>
                            @error('dokter_id')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                        </div>

                        {{-- Pemeriksaan (opsional) --}}
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                                Pemeriksaan Terkait
                                <span class="text-slate-400 font-normal text-xs">(opsional)</span>
                            </label>
                            <select name="pemeriksaan_id"
                                    class="w-full px-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition-colors">
                                <option value="">-- Tidak Ada --</option>
                                @foreach($pemeriksaans as $pm)
                                <option value="{{ $pm->id }}" {{ old('pemeriksaan_id') == $pm->id ? 'selected' : '' }}>
                                    {{ $pm->pasien->nama_lengkap ?? '?' }} — {{ $pm->created_at?->format('d/m/Y') }} — {{ Str::limit($pm->keluhan ?? 'Pemeriksaan', 40) }}
                                </option>
                                @endforeach
                            </select>
                            @error('pemeriksaan_id')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                        </div>

                        {{-- Keluhan --}}
                        <div class="md:col-span-2">
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                                Keluhan Pasien
                            </label>
                            <textarea name="keluhan_pasien" rows="3"
                                      placeholder="Deskripsi keluhan utama pasien..."
                                      class="w-full px-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 placeholder-slate-400 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition-colors resize-none">{{ old('keluhan_pasien') }}</textarea>
                            @error('keluhan_pasien')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                        </div>

                        {{-- Lama Keluhan --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1.5">
                                Lama Keluhan
                            </label>
                            <input type="text" name="lama_keluhan" value="{{ old('lama_keluhan') }}"
                                   placeholder="mis: 3 hari, 2 minggu"
                                   class="w-full px-3 py-2.5 text-sm border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 placeholder-slate-400 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition-colors">
                            @error('lama_keluhan')<p class="mt-1 text-xs text-red-500">{{ $message }}</p>@enderror
                        </div>
                    </div>

                    {{-- Info Box --}}
                    <div class="p-4 rounded-xl bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-700 flex items-start space-x-3">
                        <i class="fas fa-info-circle text-teal-500 mt-0.5 shrink-0"></i>
                        <p class="text-xs text-teal-700 dark:text-teal-300 leading-relaxed">
                            Setelah konsultasi dibuat, dokter yang ditugaskan dapat mengisi hasil pemeriksaan, diagnosa, dan resep via menu <strong>Konsultasi</strong> di dashboard dokter. Admin dapat membuat tagihan setelah dokter menandai konsultasi sebagai <strong>Selesai</strong>.
                        </p>
                    </div>

                    {{-- Buttons --}}
                    <div class="flex items-center justify-end space-x-3 pt-2">
                        <a href="{{ route('admin.konsultasi.index') }}"
                           class="px-5 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded-xl transition-colors">
                            Batal
                        </a>
                        <button type="submit"
                                class="px-6 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-teal-500 to-teal-600 hover:from-teal-600 hover:to-teal-700 rounded-xl shadow-sm hover:shadow-md transition-all duration-150 flex items-center space-x-2">
                            <i class="fas fa-save text-xs"></i>
                            <span>Buat Konsultasi</span>
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</x-app-layout>