@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('head-link')
    {{-- Select2 CSS --}}
    <link rel="stylesheet" href="{{ asset('/') }}assets/css/select2.min.css">
    <script src="{{ asset('/') }}assets/js/select2.min.js" crossorigin="anonymous"></script>
@endsection

{{-- section content --}}
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <form id="my-form">
        @csrf
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            <button type="button" class="btn btn-secondary mb-0"
                                onclick="window.location='{{ URL::to($url_menu) }}'">
                                <i class="fas fa-chevron-left me-1"></i>Kembali
                            </button>
                            <button id="reset" type="button" class="btn btn-info mb-0" style="display: none;">
                                <i class="fas fa-refresh me-1"></i> Reset
                            </button>
                            <button type="submit" class="btn btn-primary mb-0">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid py-2">
            <div class="row">
                <div class="col-md-12">
                    <div class="row mx-1">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Header Filter</h5>
                            </div>
                            <div class="card-body">
                                <div class="row align-items-end">
                                    @php
                                        $selectedBulan = old('bulan', now()->format('m'));
                                        $selectedTahun = old('tahun', now()->format('Y'));
                                    @endphp
                                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                                        <label class="form-label">Bulan</label>
                                        <select class="form-select" id="bulan" name="bulan" required>
                                            @foreach ($bulan as $type)
                                                <option value="{{ $type->value }}"
                                                    {{ $type->value == $selectedBulan ? 'selected' : '' }}>
                                                    {{ $type->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="bulan_fix" id="bulan_fix">
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                                        <label class="form-label">Tahun</label>
                                        <select class="form-select" id="tahun" name="tahun" required>
                                            @foreach ($tahun as $type)
                                                <option value="{{ $type->value }}"
                                                    {{ $type->value == $selectedTahun ? 'selected' : '' }}>
                                                    {{ $type->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="tahun_fix" id="tahun_fix">
                                    </div>
                                    <div class="col-12 col-md-4 mb-3 mb-md-0">
                                        <label class="form-label">Lowongan/Posisi</label>
                                        <div class="select2-wrapper">
                                            <select id="lowongan" name="lowongan[]" multiple>
                                                <option value="all">Pilih Semua</option>
                                                @foreach ($lowongan as $low)
                                                    @php
                                                        $start = $low->start_date
                                                            ? date('d M Y', strtotime($low->start_date))
                                                            : '-';
                                                        $end = $low->end_date
                                                            ? date('d M Y', strtotime($low->end_date))
                                                            : '-';
                                                        $periode =
                                                            $low->start_date || $low->end_date
                                                                ? "$start s/d $end"
                                                                : 'Belum ada peserta';
                                                    @endphp
                                                    <option value="{{ $low->id }}"
                                                        data-periode="{{ $periode }}">
                                                        {{ $low->posisi }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-2">
                                        <button type="button" id="generate-button"
                                            class="btn btn-primary w-100">Generate</button>
                                    </div>
                                    <div class="col-12 col-md-4 mt-2">
                                        <label class="form-label font-weight-bold">Catatan (Opsional)</label>
                                        <textarea class="form-control" name="catatan" id="catatan" placeholder="Masukkan catatan / keterangan perhitungan absen disini..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="hasil-mahasiswa" class="mt-3 card" style="display: none;">
                            <div class="card-header">
                                <h5 class="mb-0">Detail Mahasiswa</h5>
                            </div>
                            <div class="card-body"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function() {

            // ===================================================================
            // BAGIAN 1: INISIALISASI DAN FUNGSI HELPER
            // ===================================================================

            // Fungsi untuk memformat tampilan opsi di dalam Dropdown Select2
            function formatLowongan(state) {
                if (!state.id) return state.text;
                var periode = $(state.element).data('periode');

                // Jika "Pilih Semua"
                if (state.id === 'all') return $('<span><strong>' + state.text + '</strong></span>');

                // Tampilan Custom
                return $(
                    '<div style="line-height: 1.2;">' +
                    '<span class="fw-bold">' + state.text + '</span><br>' +
                    '<small class="text-muted lowongan-periode" style="font-size: 0.75rem;">' + (periode ?
                        periode : '-') +
                    '</small>' +
                    '</div>'
                );
            }

            // Inisialisasi Select2 dengan template custom
            $('#lowongan').select2({
                placeholder: 'Pilih Lowongan/Posisi',
                allowClear: true,
                width: '100%',
                templateResult: formatLowongan,
            });

            // ===================================================================
            // BAGIAN 2: EVENT HANDLERS
            // ===================================================================

            // Handler untuk fitur "Pilih Semua" di Select2
            $('#lowongan').on('select2:select', function(e) {
                if (e.params.data.id === 'all') {
                    const allValues = [];
                    $('#lowongan option').each(function() {
                        if ($(this).val() !== 'all') allValues.push($(this).val());
                    });
                    $('#lowongan').val(allValues).trigger('change');
                }
            });

            // Handler untuk unselect "Pilih Semua"
            $('#lowongan').on('select2:unselect', function(e) {
                if (e.params.data.id === 'all') {
                    $('#lowongan').val(null).trigger('change');
                }
            });

            // Handler Tombol Generate (AJAX Call)
            $('#generate-button').on('click', function(e) {
                e.preventDefault();
                const $btn = $(this);
                let bulan = $('#bulan').val();
                let tahun = $('#tahun').val();
                let lowongan = $('#lowongan').val();

                if (!bulan || !tahun) {
                    Swal.fire('Peringatan', 'Mohon lengkapi Bulan dan Tahun!', 'warning');
                    return;
                }

                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Loading...');
                $('#bulan_fix').val(bulan);
                $('#tahun_fix').val(tahun);
                if (lowongan && Array.isArray(lowongan)) lowongan = lowongan.filter(id => id !== 'all');

                $.ajax({
                    url: '{{ route('ajax.get.mahasiswa') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        bulan,
                        tahun,
                        lowongan
                    },
                    success: function(res) {
                        const {
                            data,
                            nominal,
                            error,
                            message
                        } = res;
                        
                        let html = '';
                        
                        // Cek jika ada error (data sudah pernah di-generate)
                        if (error) {
                            html = `<div class="alert alert-danger text-white">${message}</div>`;
                            
                            // Disable Filter Inputs dan munculkan tombol Reset
                            $('#bulan, #tahun, #lowongan').prop('disabled', true);
                            $('#reset').show();
                            $btn.prop('disabled', true);
                            
                            $('#hasil-mahasiswa .card-body').html(html);
                            $('#hasil-mahasiswa').fadeIn();
                            return;
                        }
                        
                        if (data.length === 0) {
                            html =
                                `<div class="alert alert-warning text-white">Tidak ada mahasiswa magang aktif di periode yang dipilih.</div>`;
                            
                            // Disable Filter Inputs dan munculkan tombol Reset
                            $('#bulan, #tahun, #lowongan').prop('disabled', true);
                            $('#reset').show();
                            $btn.prop('disabled', true);
                        } else {
                            // START PASTE AREA (TABEL MAHASISWA)
                            html += `
                            <div class="mb-3">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                    <input type="text" id="search-mahasiswa" class="form-control" placeholder="Cari nama mahasiswa atau rekening...">
                                </div>
                            </div>
                            <div class="table-responsive">
                            <table class="table table-sm table-bordered table-hover align-middle" id="tabel-mahasiswa">
                                <thead class="text-center text-xs font-weight-bolder text-uppercase" style="background-color: #f8f9fa;">
                                    <tr><th style="width: 5%">No</th><th hidden>ID</th><th style="width: 25%">Nama & Rekening</th><th style="width: 15%">Departemen</th><th style="width: 15%">Posisi</th><th style="width: 10%">Absen WFO</th><th style="width: 12%">Absen Finger</th><th style="width: 13%">Nominal</th><th style="width: 15%">Total</th></tr>
                                </thead>
                                <tbody>`;

                            data.forEach((mhs, i) => {
                                html += `<tr>
                                    <td class="text-center">${i + 1}</td>
                                    <td hidden><input type="hidden" name="id_mhs[]" value="${mhs.id}"></td>
                                    <td>
                                        <div class="d-flex flex-column px-2">
                                            <h6 class="mb-0 text-sm">${mhs.nama_lengkap}</h6>
                                            <small class="text-xs text-secondary">${mhs.rekening_no || 'No Rekening -'}</small>
                                            <input type="hidden" name="nama_mhs[]" value="${mhs.nama_lengkap}">
                                        </div>
                                    </td>
                                    <td class="text-xs font-weight-bold">${mhs.nama_departemen ?? '-'}<input type="hidden" name="nama_departemen[]" value="${mhs.nama_departemen ?? ''}"></td>
                                    <td class="text-xs font-weight-bold">${mhs.posisi ?? '-'}<input type="hidden" name="posisi[]" value="${mhs.posisi ?? ''}"></td>
                                    <td class="text-center font-weight-bold text-dark">${mhs.jumlah_absen ?? 0}<input type="hidden" name="jumlah_absen[]" value="${mhs.jumlah_absen ?? 0}"></td>
                                    <td class="text-center">
                                        <input type="number" step="1" min="0" class="form-control form-control-sm text-center input-finger fw-bold" style="border: 1px solid #d2d6da;" name="jumlah_finger[]" data-index="${i}" data-nominal="${nominal}" required>
                                    </td>
                                    <td class="text-end text-sm">Rp ${nominal.toLocaleString('id-ID')}<input type="hidden" name="nominal[]" value="${nominal}"></td>
                                    <td class="text-end fw-bold text-dark" id="total-nominal-${i}">Rp 0<input type="hidden" name="total_nominal[]" value="0"></td>
                                </tr>`;
                            });

                            html +=
                                `</tbody><tfoot class="bg-gray-100"><tr><th colspan="5" class="text-end font-weight-bold">GRAND TOTAL</th><th class="text-center font-weight-bold" id="sum-finger">0</th><th class="text-end">Rp ${nominal.toLocaleString('id-ID')}</th><th class="text-end font-weight-bolder text-primary" id="sum-total">Rp 0</th></tr></tfoot></table></div>`;
                            // END PASTE AREA

                            // Disable Filter Inputs
                            $('#bulan, #tahun, #lowongan').prop('disabled', true);
                            $('#reset').show();
                        }
                        $('#hasil-mahasiswa .card-body').html(html);
                        $('#hasil-mahasiswa').fadeIn();

                        // Disable tombol Generate setelah data muncul
                        if (data.length > 0) {
                            $btn.prop('disabled', true);
                        }

                        // Handler untuk hitung total
                        $('.input-finger').on('input', function() {
                            const index = $(this).data('index'),
                                nominal = parseFloat($(this).data('nominal')) || 0,
                                finger = parseFloat($(this).val()) || 0,
                                total = nominal * finger;
                            $(`#total-nominal-${index}`).html(
                                `Rp ${total.toLocaleString('id-ID')}<input type="hidden" name="total_nominal[]" value="${total}">`
                            );
                            updateTotals();
                        });

                        function updateTotals() {
                            let sumFinger = 0,
                                sumTotal = 0;
                            $('.input-finger').each(function() {
                                sumFinger += parseFloat($(this).val()) || 0;
                            });
                            $('input[name="total_nominal[]"]').each(function() {
                                sumTotal += parseFloat($(this).val()) || 0;
                            });
                            $('#sum-finger').text(sumFinger.toLocaleString('id-ID'));
                            $('#sum-total').text('Rp ' + sumTotal.toLocaleString('id-ID'));
                        }
                        updateTotals();
                        
                        // Handler untuk Search Box
                        $('#search-mahasiswa').on('keyup', function() {
                            const searchValue = $(this).val().toLowerCase();
                            let visibleCount = 0;
                            
                            $('#tabel-mahasiswa tbody tr').each(function() {
                                const nama = $(this).find('h6').text().toLowerCase();
                                const rekening = $(this).find('small').text().toLowerCase();
                                
                                if (nama.indexOf(searchValue) > -1 || rekening.indexOf(searchValue) > -1) {
                                    $(this).show();
                                    visibleCount++;
                                } else {
                                    $(this).hide();
                                }
                            });
                            
                            // Update nomor urut sesuai hasil filter
                            let no = 1;
                            $('#tabel-mahasiswa tbody tr:visible').each(function() {
                                $(this).find('td:first').text(no++);
                            });
                            
                            // Tampilkan pesan jika tidak ada hasil
                            if (visibleCount === 0 && searchValue !== '') {
                                if ($('#no-result-message').length === 0) {
                                    $('#tabel-mahasiswa tbody').append(
                                        '<tr id="no-result-message"><td colspan="9" class="text-center text-muted py-3">Tidak ada hasil yang cocok dengan pencarian "' + searchValue + '"</td></tr>'
                                    );
                                }
                            } else {
                                $('#no-result-message').remove();
                            }
                        });
                    },
                    error: function() {
                        Swal.fire('Error', 'Gagal mengambil data mahasiswa.', 'error');
                        $btn.prop('disabled', false).html('Generate');
                    },
                    complete: function() {
                        // Request sudah selesai: hilangkan indikator loading.
                        // Tombol tetap disabled setelah hasil ditampilkan dan
                        // dapat diaktifkan lagi melalui tombol Reset.
                        $btn.html('Generate');
                    }
                });
            });

            // Handler Tombol Reset
            $('#reset').on('click', function() {
                $('#bulan, #tahun, #lowongan').prop('disabled', false);
                $('#generate-button').prop('disabled', false).html('Generate'); // Enable tombol Generate
                $('#lowongan').val(null).trigger('change');
                $('#hasil-mahasiswa').hide().find('.card-body').html('');
                $(this).hide();
            });

            // Handler Tombol Simpan Form
            $("#my-form").submit(function(e) {
                e.preventDefault();
                const $btn = $(this).find('button[type="submit"]');
                let isValid = true;
                $('.input-finger').each(function() {
                    if ($(this).val() === '') isValid = false;
                });
                if (!isValid) {
                    Swal.fire('Gagal', 'Pastikan semua kolom absen finger terisi (isi 0 jika tidak ada).',
                        'error');
                    return;
                }
                $btn.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');
                $.ajax({
                    url: "{{ URL::to($url_menu) }}",
                    type: "POST",
                    data: new FormData(this),
                    contentType: false,
                    processData: false,
                    success: function() {
                        Swal.fire('Sukses', 'Data Berhasil Disimpan', 'success').then(() =>
                            window.location.href = "{{ url($url_menu) }}");
                    },
                    error: function(jqXHR) {
                        let msg = jqXHR.responseJSON?.message || 'Terjadi kesalahan.';
                        Swal.fire('Gagal', msg, 'error');
                        $btn.prop('disabled', false).html(
                            '<i class="fas fa-floppy-disk me-1"></i> Simpan');
                    }
                });
            });
        });
    </script>
    <style>
        /* CSS FIX: Hover Select2 agar teks terbaca (Putih) */
        .select2-results__option--highlighted {
            color: #ffffff !important;
            background-color: #028284 !important;
            /* Warna highlight default template Anda */
        }

        /* Pastikan teks kecil (periode) juga jadi putih saat hover */
        .select2-results__option--highlighted .text-muted,
        .select2-results__option--highlighted .lowongan-periode {
            color: #f8f9fa !important;
        }

        /* --- STYLE RESPONSIVE LAMA ANDA --- */
        @media (max-width: 767.98px) {
            .row.align-items-end {
                align-items: stretch !important;
            }

            .row.align-items-end>[class*="col-"] {
                margin-bottom: 1rem;
            }

            .row.align-items-end>[class*="col-"]:last-child {
                margin-bottom: 0;
            }

            #generate-button {
                margin-top: 0.5rem;
            }
        }

        @media (min-width: 768px) {
            .row.align-items-end {
                align-items: flex-start !important;
            }

            .row.align-items-end>[class*="col-"] {
                margin-bottom: 0 !important;
            }

            .row.align-items-end .form-label {
                margin-bottom: 0.5rem;
                display: block;
            }

            #generate-button {
                margin-top: 1.9rem;
            }
        }

        .select2-container {
            width: 100% !important;
        }

        .btn {
            margin-bottom: 0rem !important;
        }
    </style>
@endsection