@extends('layouts.app', [
    'title' => 'Export Skripsi Mahasiswa',
    'pageTitle' => 'Export Skripsi Mahasiswa',
    'pageSubtitle' => 'Filter dan preview data skripsi mahasiswa, lalu export ke CSV.',
])

@section('content')
    <div class="container-fluid px-2 px-md-3">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                {{-- Header Mobile --}}
                <div class="d-flex align-items-center mb-3 d-lg-none">
                    <a href="{{ route('dashboard') }}" class="btn btn-sm btn-light mr-2">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h5 class="mb-0 font-weight-bold">Export Mahasiswa</h5>
                </div>

                <div class="card card-primary card-outline shadow-sm">
                    <div class="card-header bg-primary text-white d-none d-lg-block">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-filter mr-2"></i>Filter Data Mahasiswa
                        </h3>
                    </div>
                    <div class="card-body p-3 p-lg-4">
                        <form action="{{ route('admin.mahasiswa.export') }}" method="GET">
                            <input type="hidden" name="preview" value="1">

                            {{-- Filter Grid --}}
                            <div class="row">
                                {{-- Filter Prodi --}}
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="prodi_id" class="form-label font-weight-bold small text-uppercase text-muted">
                                        <i class="fas fa-book-open text-primary mr-1"></i>Program Studi
                                    </label>
                                    <select name="prodi_id" id="prodi_id" class="form-control form-control-lg select2-mobile">
                                        <option value="" {{ request('prodi_id') === null ? 'selected' : '' }}>Semua Prodi</option>
                                        @foreach ($prodiList as $prodi)
                                            <option value="{{ $prodi->id }}" {{ request('prodi_id') == $prodi->id ? 'selected' : '' }}>
                                                {{ $prodi->nama_prodi }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Filter Tahun --}}
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="tahun" class="form-label font-weight-bold small text-uppercase text-muted">
                                        <i class="fas fa-calendar text-primary mr-1"></i>Tahun
                                    </label>
                                    <select name="tahun" id="tahun" class="form-control form-control-lg select2-mobile">
                                        <option value="" {{ request('tahun') === null ? 'selected' : '' }}>Semua Tahun</option>
                                        @foreach ($tahunList as $tahun)
                                            <option value="{{ $tahun }}" {{ request('tahun') == $tahun ? 'selected' : '' }}>
                                                {{ $tahun }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Filter Angkatan --}}
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="angkatan" class="form-label font-weight-bold small text-uppercase text-muted">
                                        <i class="fas fa-graduation-cap text-success mr-1"></i>Angkatan
                                    </label>
                                    <select name="angkatan" id="angkatan" class="form-control form-control-lg select2-mobile">
                                        <option value="" {{ request('angkatan') === null ? 'selected' : '' }}>Semua Angkatan</option>
                                        @foreach ($angkatanList as $angkatan)
                                            <option value="{{ $angkatan }}" {{ request('angkatan') == $angkatan ? 'selected' : '' }}>
                                                {{ $angkatan }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Filter Status --}}
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="status" class="form-label font-weight-bold small text-uppercase text-muted">
                                        <i class="fas fa-user-check text-info mr-1"></i>Status
                                    </label>
                                    <select name="status" id="status" class="form-control form-control-lg select2-mobile">
                                        <option value="" {{ request('status') === null ? 'selected' : '' }}>Semua Status</option>
                                        @foreach ($statusList as $status)
                                            <option value="{{ $status->kode_status }}" {{ request('status') == $status->kode_status ? 'selected' : '' }}>
                                                {{ $status->nama_status }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- Filter Jenis Kelamin --}}
                                <div class="col-12 col-md-6 mb-3">
                                    <label for="jenis_kelamin" class="form-label font-weight-bold small text-uppercase text-muted">
                                        <i class="fas fa-venus-mars text-warning mr-1"></i>Jenis Kelamin
                                    </label>
                                    <select name="jenis_kelamin" id="jenis_kelamin" class="form-control form-control-lg select2-mobile">
                                        <option value="" {{ request('jenis_kelamin') === null ? 'selected' : '' }}>Semua</option>
                                        <option value="L" {{ request('jenis_kelamin') === 'L' ? 'selected' : '' }}>Laki-laki</option>
                                        <option value="P" {{ request('jenis_kelamin') === 'P' ? 'selected' : '' }}>Perempuan</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Info Card --}}
                            <div class="alert alert-info alert-dismissible fade show mt-3 mb-4">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-info-circle mt-1 mr-2"></i>
                                    <div class="small">
                                        <strong>Catatan:</strong> Semua filter bersifat opsional. Kosongkan semua untuk preview semua data skripsi mahasiswa.
                                        Judul skripsi ditarik dari data lokal yang sudah sinkron dengan Neo Feeder.
                                    </div>
                                </div>
                            </div>

                            {{-- Buttons --}}
                            <div class="row">
                                <div class="col-6 d-none d-lg-block">
                                    <a href="{{ route('dashboard') }}" class="btn btn-secondary btn-lg btn-block">
                                        <i class="fas fa-arrow-left mr-2"></i>Kembali
                                    </a>
                                </div>
                                <div class="col-12 col-lg-6 mb-2 mb-lg-0">
                                    <button type="submit" class="btn btn-primary btn-lg btn-block shadow-sm">
                                        <i class="fas fa-search mr-2"></i>Tampilkan Data
                                    </button>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <button type="submit" name="export" value="1" class="btn btn-success btn-lg btn-block shadow-sm">
                                        <i class="fas fa-file-export mr-2"></i>Export ke CSV
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                @if(isset($mahasiswaList))
                    <div class="card card-outline card-secondary mt-3 shadow-sm">
                        <div class="card-header bg-secondary text-white">
                            <h3 class="card-title mb-0">
                                <i class="fas fa-table mr-2"></i>Preview Data Mahasiswa (maks. 200 baris)
                            </h3>
                        </div>
                        <div class="card-body p-3 p-lg-4">
                            @if($mahasiswaList->isEmpty())
                                <div class="alert alert-warning mb-0">
                                    Data tidak ditemukan untuk filter yang dipilih.
                                </div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered table-striped mb-0">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>NIM</th>
                                                <th>Nama</th>
                                                <th>Judul Skripsi</th>
                                                <th>Prodi</th>
                                                <th>Angkatan</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($mahasiswaList as $index => $m)
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>{{ $m->nim }}</td>
                                                    <td>{{ $m->nama_mahasiswa }}</td>
                                                    <td>{{ $m->skripsi?->judul ?? '-' }}</td>
                                                    <td>{{ $m->prodi?->nama_prodi ?? '-' }}</td>
                                                    <td>{{ $m->angkatan }}</td>
                                                    <td>{{ $m->masterStatus?->nama_status ?? ucfirst($m->status) }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Tips Card --}}
                <div class="card card-outline card-info mt-3 shadow-sm">
                    <div class="card-body p-3">
                        <h6 class="font-weight-bold mb-2">
                            <i class="fas fa-lightbulb text-warning mr-2"></i>Tips Export
                        </h6>
                        <ul class="small text-muted mb-0 pl-3">
                            <li>File CSV dapat dibuka di Excel atau Google Sheets</li>
                            <li>Gunakan encoding <strong>UTF-8</strong> jika karakter tidak terbaca</li>
                            <li>Export besar mungkin memerlukan waktu beberapa detik</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
    <style>
        /* Mobile Optimizations */
        @media (max-width: 767.98px) {
            .card-body {
                padding: 1rem !important;
            }
            
            .form-control-lg {
                font-size: 16px !important; /* Prevents zoom on iOS */
                padding: 0.75rem 1rem;
                min-height: 48px;
            }
            
            .select2-container--default .select2-selection--single {
                height: 48px !important;
                padding: 0.5rem 0.75rem;
                font-size: 16px;
            }
            
            .select2-container--default .select2-selection--single .select2-selection__rendered {
                line-height: 32px;
                padding-left: 0;
            }
            
            .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 46px;
            }
            
            .select2-dropdown {
                font-size: 16px;
            }
            
            .select2-results__option {
                padding: 12px;
            }
            
            .btn-lg {
                padding: 0.875rem 1.5rem;
                font-size: 1rem;
                min-height: 52px;
            }
            
            .form-label {
                font-size: 0.8rem;
                margin-bottom: 0.5rem;
            }
            
            .alert {
                padding: 0.875rem;
                font-size: 0.875rem;
            }
        }
        
        /* Tablet */
        @media (min-width: 768px) and (max-width: 991.98px) {
            .form-control-lg {
                font-size: 1rem;
            }
        }
        
        /* Select2 Custom Styling */
        .select2-container--default .select2-selection--single {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }
        
        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        /* Touch-friendly improvements */
        select, button, a {
            touch-action: manipulation;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Detect mobile device
            var isMobile = window.innerWidth < 768;
            
            $('.select2-mobile').select2({
                placeholder: 'Pilih...',
                allowClear: true,
                width: '100%',
                // Mobile optimizations
                minimumResultsForSearch: isMobile ? 5 : 0,
                dropdownAutoWidth: true
            });
            
            // Close select2 on scroll for better mobile experience
            if (isMobile) {
                $(window).on('scroll', function() {
                    $('.select2-mobile').select2('close');
                });
            }
        });
    </script>
@endpush