@extends('admin.layout')

@section('title', 'Laporan')

@section('page-title', 'Laporan')
@section('page-subtitle', 'Buat dan kelola laporan tracer study')

@section('content')
    <!-- laporan -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- laporan alumni -->
        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                </div>
                <span class="text-xs font-semibold bg-blue-100 text-blue-800 px-3 py-1 rounded-full">Populer</span>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-2">Laporan Alumni Tahunan</h3>
            <p class="text-sm text-gray-600 mb-4">Laporan lengkap statistik alumni per tahun akademik</p>
            <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg transition font-medium">
                Generate Laporan
            </button>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                        </path>
                    </svg>
                </div>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-2">Laporan Pekerjaan</h3>
            <p class="text-sm text-gray-600 mb-4">Analisis status pekerjaan dan wirausaha alumni</p>
            <button class="w-full bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg transition font-medium">
                Generate Laporan
            </button>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                        </path>
                    </svg>
                </div>
            </div>
            <h3 class="text-lg font-bold text-gray-800 mb-2">Laporan Per Program Studi</h3>
            <p class="text-sm text-gray-600 mb-4">Statistik alumni berdasarkan program studi</p>
            <button class="w-full bg-purple-500 hover:bg-purple-600 text-white py-2 rounded-lg transition font-medium">
                Generate Laporan
            </button>
        </div>
    </div>

    <!-- laporah khusus -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <h3 class="text-lg font-bold text-gray-800 mb-6 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
                </path>
            </svg>
            Buat Laporan Kustom
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Jenis Laporan</label>
                <select
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option>Pilih Jenis Laporan</option>
                    <option>Laporan Alumni</option>
                    <option>Laporan Pekerjaan</option>
                    <option>Laporan Kuesioner</option>
                    <option>Laporan Kompetensi</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Periode</label>
                <select
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option>Tahun Ini</option>
                    <option>Tahun Lalu</option>
                    <option>5 Tahun Terakhir</option>
                    <option>Custom Range</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Program Studi</label>
                <select
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option>Semua Prodi</option>
                    <option>Teknik Informatika</option>
                    <option>Sistem Informasi</option>
                    <option>Manajemen</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Format</label>
                <select
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option>PDF</option>
                    <option>Excel</option>
                    <option>CSV</option>
                </select>
            </div>
        </div>
        <div class="flex space-x-3">
            <button
                class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition font-medium flex items-center space-x-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                    </path>
                </svg>
                <span>Generate Laporan</span>
            </button>
            <button
                class="border border-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-50 transition font-medium">
                Reset
            </button>
        </div>
    </div>

    <!-- laporan terbaru -->
    <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Laporan Terbaru</h3>
        <div class="space-y-3">
            @php
                $reports = [
                    ['name' => 'Laporan Alumni 2023', 'date' => '25 Nov 2025', 'type' => 'PDF', 'size' => '2.3 MB', 'color' => 'blue'],
                    ['name' => 'Statistik Pekerjaan Q4 2024', 'date' => '20 Nov 2025', 'type' => 'Excel', 'size' => '1.5 MB', 'color' => 'green'],
                    ['name' => 'Laporan Per Prodi 2023-2024', 'date' => '15 Nov 2025', 'type' => 'PDF', 'size' => '3.1 MB', 'color' => 'purple'],
                    ['name' => 'Data Kuesioner Alumni', 'date' => '10 Nov 2025', 'type' => 'CSV', 'size' => '856 KB', 'color' => 'yellow'],
                ];
            @endphp

            @foreach($reports as $report)
                <div
                    class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                    <div class="flex items-center space-x-4">
                        <div class="w-12 h-12 bg-{{ $report['color'] }}-100 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6 text-{{ $report['color'] }}-600" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800">{{ $report['name'] }}</h4>
                            <p class="text-sm text-gray-500">{{ $report['date'] }} • {{ $report['type'] }} •
                                {{ $report['size'] }}</p>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-blue-600 hover:text-blue-800 p-2 hover:bg-blue-50 rounded-lg transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                </path>
                            </svg>
                        </button>
                        <button class="text-green-600 hover:text-green-800 p-2 hover:bg-green-50 rounded-lg transition">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection