@extends('admin.layout')

@section('title', 'Responden Pengguna Lulusan')

@section('page-title', 'Formulir Input Responden Pengguna Lulusan')
@section('page-subtitle', 'Formulir input jumlah responden (pengguna lulusan) yang mengisi survei')

@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-2xl 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.responden-pengguna.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.responden-pengguna.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 Responden Pengguna</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.responden-pengguna.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">Jumlah Responden (Pengguna)</th>
                                <th rowspan="2" 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">Jumlah Lulusan Yang Dinilai</th>
                            </tr>
                            <tr>
                                <!-- Empty row for structure if needed -->
                            </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-gray-200 dark:border-gray-600 px-4 py-1 text-center">4</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 }},
                                    responden: {{ $item['values']->Nilai4 ?? 0 }},
                                    dinilai: {{ $item['values']->Nilai5 ?? 0 }},
                                }">
                                    <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">
                                        <input type="number" name="data[{{ $item['year'] }}][responden]" x-model="responden" 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="px-4 py-2 text-center">
                                        <input type="number" name="data[{{ $item['year'] }}][dinilai]" x-model="dinilai" 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>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="flex flex-col-reverse sm:flex-row items-center justify-between gap-4">
                    <a href="{{ route('penilaian.responden-pengguna.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