@extends('admin.layout')

@section('title', 'Kesesuaian Bidang Kerja')

@section('page-title', 'Formulir Input Kesesuaian Bidang Kerja')
@section('page-subtitle', 'Formulir input jumlah lulusan terlacak dengan tingkat kesesuaian bidang kerja')


@section('content')
    <div class="flex flex-col gap-6 overflow-x-hidden">
        @if (session('success'))
            <div class="p-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400 border border-green-200 dark:border-green-900"
                role="alert">
                <span class="font-medium">Berhasil!</span> {{ session('success') }}
            </div>
        @endif

        <!-- Card Filter -->
        <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 transition-colors duration-300">
            <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-4 uppercase tracking-wider">Filter Program
                Studi</h3>
            <form method="GET" action="{{ route('penilaian.bidang-kerja.create') }}"
                class="flex flex-col md:flex-row md:items-end gap-3">
                <div class="w-full md:w-72">
                    <select name="filterprodi" id="filterprodi"
                        class="bg-white border border-gray-300 text-gray-900 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white transition-all shadow-sm">
                        <option value="">- Silakan Pilih Prodi -</option>
                        @foreach($prodis as $prodi)
                            <option value="{{ $prodi->KodeID }}" {{ $selectedProdi == $prodi->KodeID ? 'selected' : '' }}>
                                {{ $prodi->KodeID }} - {{ $prodi->Nama }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
                    <button type="submit"
                        class="w-full md:w-auto px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl shadow-md shadow-blue-500/20 transition-all flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8" />
                            <path d="m21 21-4.3-4.3" />
                        </svg>
                        Filter
                    </button>
                    @if($selectedProdi)
                        <a href="{{ route('penilaian.bidang-kerja.create') }}"
                            class="w-full md:w-auto px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm font-bold rounded-xl transition-all flex items-center justify-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
                                <path d="M3 3v5h5" />
                            </svg>
                            Reset
                        </a>
                    @endif
                </div>
            </form>
        </div>

        <!-- Card Table -->
        <div
            class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden transition-colors duration-300">
            <div
                class="p-6 border-b border-gray-50 dark:border-gray-700 flex flex-col md:flex-row md:items-center justify-between gap-4">
                <h3 class="font-bold text-gray-800 dark:text-white">Input Data Kesesuaian Bidang Kerja</h3>
                @if($selectedProdi)
                    <span
                        class="px-3 py-1 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-xs font-bold rounded-full border border-blue-100 dark:border-blue-800">
                        Prodi: {{ $selectedProdi }}
                    </span>
                @endif
            </div>

            <form method="POST" action="{{ route('penilaian.bidang-kerja.store') }}" class="p-6">
                @csrf
                <input type="hidden" name="filterprodi" value="{{ $selectedProdi }}">

                <div class="overflow-x-auto mb-8 rounded-xl border border-gray-100 dark:border-gray-700">
                    <table class="min-w-full border-collapse text-sm text-gray-800 dark:text-gray-200">
                        <thead class="bg-gray-50 dark:bg-gray-700/50">
                            <tr>
                                <th rowspan="2"
                                    class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-px text-center font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    Tahun Lulus</th>
                                <th rowspan="2"
                                    class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-px text-center font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    Jumlah Lulusan</th>
                                <th rowspan="2"
                                    class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-px text-center font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    Terlacak</th>
                                <th colspan="3"
                                    class="border-b border-gray-200 dark:border-gray-600 px-4 py-px text-center font-bold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
                                    Kesesuaian Bidang Kerja</th>
                            </tr>
                            <tr>
                                <th
                                    class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center font-bold text-red-600 dark:text-red-400 bg-red-50/30 dark:bg-red-900/10">
                                    Rendah</th>
                                <th
                                    class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-2 text-center font-bold text-yellow-600 dark:text-yellow-400 bg-yellow-50/30 dark:bg-yellow-900/10">
                                    Sedang</th>
                                <th
                                    class="border-b border-gray-200 dark:border-gray-600 px-4 py-2 text-center font-bold text-green-600 dark:text-green-400 bg-green-50/30 dark:bg-green-900/10">
                                    Tinggi</th>
                            </tr>
                            <tr class="bg-gray-100/30 dark:bg-gray-800/50 text-red-500 font-bold text-xs">
                                <td class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-1 text-center">1
                                </td>
                                <td class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-1 text-center">2
                                </td>
                                <td class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-1 text-center">3
                                </td>
                                <td class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-1 text-center">4
                                </td>
                                <td class="border-b border-r border-gray-200 dark:border-gray-600 px-4 py-1 text-center">5
                                </td>
                                <td class="border-b border-gray-200 dark:border-gray-600 px-4 py-1 text-center">6</td>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                            @foreach($data as $key => $item)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors" x-data="{ 
                                                                    jl: {{ $item['values']->Nilai2 ?? 0 }},
                                                                    rendah: {{ $item['values']->Nilai4 ?? 0 }},
                                                                    sedang: {{ $item['values']->Nilai5 ?? 0 }},
                                                                    tinggi: {{ $item['values']->Nilai6 ?? 0 }},
                                                                    get terlacak() { 
                                                                        return parseInt(this.rendah) + parseInt(this.sedang) + parseInt(this.tinggi);
                                                                    }
                                                                }">
                                    <td
                                        class="border-r border-gray-100 dark:border-gray-700 px-4 py-2 font-bold text-center text-blue-600 dark:text-blue-400 bg-gray-50/30 dark:bg-gray-900/5">
                                        {{ $item['label'] }}
                                    </td>
                                    <td class="border-r border-gray-100 dark:border-gray-700 px-4 py-2 text-center">
                                        <input type="number" name="data[{{ $item['year'] }}][jl]" x-model="jl" min="0"
                                            class="w-24 text-center bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm transition-all focus:scale-105">
                                    </td>
                                    <td class="border-r border-gray-100 dark:border-gray-700 px-4 py-2 text-center font-bold text-lg"
                                        :class="terlacak > 0 ? 'text-gray-800 dark:text-white' : 'text-gray-300 dark:text-gray-600'"
                                        x-text="terlacak === 0 ? '-' : terlacak">
                                        -
                                    </td>
                                    <td
                                        class="border-r border-gray-100 dark:border-gray-700 px-4 py-2 text-center bg-red-50/10 dark:bg-red-900/5">
                                        <input type="number" name="data[{{ $item['year'] }}][rendah]" x-model="rendah" min="0"
                                            class="w-24 text-center bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm transition-all focus:scale-105">
                                    </td>
                                    <td
                                        class="border-r border-gray-100 dark:border-gray-700 px-4 py-2 text-center bg-yellow-50/10 dark:bg-yellow-900/5">
                                        <input type="number" name="data[{{ $item['year'] }}][sedang]" x-model="sedang" min="0"
                                            class="w-24 text-center bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-yellow-500 focus:border-yellow-500 p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm transition-all focus:scale-105">
                                    </td>
                                    <td class="px-4 py-2 text-center bg-green-50/10 dark:bg-green-900/5">
                                        <input type="number" name="data[{{ $item['year'] }}][tinggi]" x-model="tinggi" min="0"
                                            class="w-24 text-center bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white shadow-sm transition-all focus:scale-105">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="flex flex-col-reverse sm:flex-row items-center justify-between gap-4">
                    <a href="{{ route('penilaian.bidang-kerja.index') }}"
                        class="w-full sm:w-auto px-5 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white flex items-center justify-center gap-2 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m15 18-6-6 6-6" />
                        </svg>
                        Kembali ke Laporan
                    </a>
                    @if($selectedProdi)
                        <button type="submit"
                            class="w-full sm:w-auto px-8 py-3 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-500/30 hover:shadow-blue-500/40 transition-all flex items-center justify-center gap-3 active:scale-95">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 font-bold" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
                                <polyline points="17 21 17 13 7 13 7 21" />
                                <polyline points="7 3 7 8 15 8" />
                            </svg>
                            Simpan Data
                        </button>
                    @else
                        <button type="button" disabled
                            class="w-full sm:w-auto px-8 py-3 text-sm font-bold text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-xl cursor-not-allowed flex items-center justify-center gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                            </svg>
                            Pilih Prodi untuk Simpan
                        </button>
                    @endif
                </div>
            </form>
        </div>
    </div>
@endsection