@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-xl-6">
                <!-- Card Header with Icon -->
                <div class="card shadow-lg border-0">
                    <div class="card-header bg-gradient-primary text-white py-4">
                        <div class="d-flex align-items-center">
                            <div class="icon-box me-3">
                                <i class="fas fa-filter fa-2x"></i>
                            </div>
                            <div>
                                <h4 class="mb-0 font-weight-bold text-white">Filter Laporan Dept Triwulan</h4>
                                <p class="mb-0 small opacity-75">Pilih triwulan periode untuk melihat laporan</p>
                            </div>
                        </div>
                    </div>

                    <div class="card-body p-4">
                        <form action="{{ URL::to($url_menu) }}" method="POST" id="filterForm">
                            @csrf
                            <div class="mb-4">
                                <label for="quartal" class="form-label fw-bold">
                                    <i class="fas fa-calendar-alt me-2 text-primary"></i>Triwulan Periode
                                </label>
                                <select name="quartal" id="quartal" class="form-select form-select-lg select2" required>
                                    <option value="">-- Pilih Triwulan --</option>
                                    @foreach ($quartal as $q)
                                        @php
                                            $value = $q->tahun . '-' . $q->quartal;
                                            $selected = request('quartal') == $value ? 'selected' : '';
                                        @endphp
                                        <option value="{{ $value }}" {{ $selected }}>
                                            Triwulan {{ $q->quartal }} - {{ $q->tahun }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text">
                                    <i class="fas fa-info-circle me-1"></i>
                                    Pilih triwulan periode yang ingin ditampilkan dalam laporan
                                </div>
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-search me-2"></i>Tampilkan Laporan
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Card Footer with Info -->
                    <div class="card-footer bg-light text-muted py-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <small>
                                <i class="fas fa-database me-1"></i>
                                Total {{ count($quartal) }} triwulan periode tersedia
                            </small>
                            @if (request()->has('quartal'))
                                @php
                                    $quartalParts = explode('-', request('quartal'));
                                    $quartalDisplay =
                                        count($quartalParts) == 2
                                            ? "Triwulan {$quartalParts[1]} - {$quartalParts[0]}"
                                            : request('quartal');
                                @endphp
                                <small class="text-primary">
                                    <i class="fas fa-check-circle me-1"></i>
                                    Filter aktif: {{ $quartalDisplay }}
                                </small>
                            @endif
                        </div>
                    </div>
                </div>
                <!-- Additional Info Card -->
                @if (count($quartal) == 0)
                    <div class="alert alert-warning mt-4" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                            <div>
                                <h5 class="alert-heading mb-1">Tidak Ada Data</h5>
                                <p class="mb-0">Belum ada data periode yang tersedia untuk laporan ini.</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .icon-box {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
        }

        .card {
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
        }

        .card-header {
            border: none;
        }

        .form-select {
            border-radius: 8px;
            border: 2px solid #e0e0e0;
            padding: 12px 16px;
            transition: all 0.3s ease;
        }

        .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-outline-secondary {
            border-radius: 8px;
            padding: 12px 24px;
            font-weight: 600;
            border: 2px solid #6c757d;
            transition: all 0.3s ease;
        }

        .btn-outline-secondary:hover {
            transform: translateY(-2px);
        }

        .select2-container--bootstrap-5 .select2-selection {
            border: 2px solid #e0e0e0 !important;
            border-radius: 8px !important;
            min-height: 48px !important;
        }

        .select2-container--bootstrap-5.select2-container--focus .select2-selection {
            border-color: #667eea !important;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
        }

        .alert {
            border-radius: 12px;
            border: none;
        }

        .form-label {
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }

        .card-footer {
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Initialize Select2 with search functionality
            $('.select2').select2({
                theme: 'bootstrap-5',
                width: '100%',
                placeholder: '-- Pilih Triwulan --',
                allowClear: true,
                language: {
                    noResults: function() {
                        return "Tidak ada hasil yang ditemukan";
                    },
                    searching: function() {
                        return "Mencari...";
                    }
                }
            });

            // Form validation
            $('#filterForm').on('submit', function(e) {
                const quartal = $('#quartal').val();

                if (!quartal) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Silakan pilih triwulan periode terlebih dahulu!',
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#667eea'
                    });
                    return false;
                }
            });

            // Add animation when select changes
            $('#quartal').on('change', function() {
                if ($(this).val()) {
                    $(this).addClass('border-success');
                    setTimeout(() => {
                        $(this).removeClass('border-success');
                    }, 1000);
                }
            });
        });
    </script>
@endpush