@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mb-2 mx-1">
                    <div class="card" style="min-height: 650px;">
                        <div class="card-header">
                            <h5 class="mb-0">List {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <form class="row g-3 align-items-end justify-content-between mb-3">
                                <div class="col-md-4">
                                    <label for="periode" class="form-label">Periode</label>
                                    <select id="periode" name="periode" class="form-select">
                                        @foreach ($tahun as $th)
                                            <option value="{{ $th }}">{{ $th }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="departemen" class="form-label">Departemen</label>
                                    <select id="departemen" name="departemen" class="form-select">
                                        <option value="" selected></option>
                                        @foreach ($departemen as $dept)
                                            <option value="{{ $dept->id }}">{{ $dept->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label for="nama-karyawan" class="form-label">Karyawan</label>
                                    <select id="nama-karyawan" name="karyawan" class="form-select">
                                        <option value="" selected></option>
                                        @foreach ($karyawan as $kry)
                                            <option value="{{ $kry->nik }}">{{ $kry->nik }} - {{ $kry->nama }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </form>
                            <br>
                            <p>Total Karyawan Checked : <strong id="count-karyawan">0</strong></p>
                            <hr>

                            <div class="table-responsive">
                                <table class="table display" id="list-seragam">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="5%">Action</th>
                                            <th>Nama Karyawan</th>
                                            <th>Departemen</th>
                                            {{-- Header untuk jenis seragam dibuat secara dinamis di JS --}}
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>

                            <div class="mt-3">
                                <button type="button" class="btn btn-primary" id="btn-simpan">
                                    Simpan
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        // Simpan daftar jenis seragam dari PHP ke variabel JavaScript
        const jenisSeragamList = @json($jenis->pluck('nama_jenis_seragam'));
        let selectedSeragam = {}; // Objek untuk menyimpan data yang dicentang

        $(document).ready(function() {
            // Inisialisasi Select2
            $('#departemen').select2({ placeholder: "Departemen", allowClear: true, width: '100%' });
            $('#nama-karyawan').select2({ placeholder: "Nama Karyawan", allowClear: true, width: '100%' });

            // Setup CSRF token untuk AJAX
            $.ajaxSetup({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });

            // Buat header tabel secara dinamis
            renderTableHeader();

            // PERUBAHAN: Tampilkan pesan awal, bukan memuat data langsung
            showInitialPrompt();
        });

        /**
         * Fungsi untuk menampilkan pesan awal di tabel
         */
        function showInitialPrompt() {
            let tbody = $("#list-seragam tbody");
            let colSpan = 3 + jenisSeragamList.length;
            tbody.html(`<tr><td colspan="${colSpan}" class="text-center text-muted">Silakan pilih departemen terlebih dahulu.</td></tr>`);
        }

        /**
         * Membuat header tabel secara dinamis
         */
        function renderTableHeader() {
            let thead = $("#list-seragam thead tr");
            // Hapus header jenis seragam lama (jika ada)
            thead.find('th:not(:first-child):not(:nth-child(2)):not(:nth-child(3))').remove();

            // Tambahkan header baru dari daftar jenis
            jenisSeragamList.forEach(jenis => {
                thead.append(`<th>${jenis}</th>`);
            });
        }

        /**
         * Menulis ulang fungsi renderTable untuk menangani struktur data baru.
         */
        function renderTable(data) {
            let tbody = $("#list-seragam tbody");
            tbody.empty();

            if (data.length === 0) {
                let colSpan = 3 + jenisSeragamList.length;
                tbody.html(`<tr><td colspan="${colSpan}" class="text-center text-muted">Tidak ada data untuk kriteria yang dipilih.</td></tr>`);
                return;
            }

            $.each(data, function(index, karyawan) {
                // Buat objek untuk menyimpan string teks yang sudah diformat
                const seragamInfoByJenis = {};

                // Loop untuk setiap item seragam yang dimiliki karyawan
                karyawan.seragam.forEach(item => {
                    const jenisKey = item.nama_jenis_seragam;
                    const infoText = `${item.jumlah} (${item.nama_tipe_seragam})`;

                    // PERUBAHAN LOGIKA DI SINI
                    // Jika jenis seragam sudah ada, tambahkan info baru dengan koma
                    if (seragamInfoByJenis[jenisKey]) {
                        seragamInfoByJenis[jenisKey] += `, ${infoText}`;
                    } else {
                        // Jika belum ada, buat entri baru
                        seragamInfoByJenis[jenisKey] = infoText;
                    }
                });

                let tr = `<tr>
                    <td>
                        <div class="form-check">
                            <input class="form-check-input check-seragam" type="checkbox" data-nik="${karyawan.nik_karyawan}">
                        </div>
                    </td>
                    <td>${karyawan.nama_karyawan}</td>
                    <td>${karyawan.nama_department}</td>`;

                // Loop untuk setiap jenis seragam di header
                jenisSeragamList.forEach(jenisNama => {
                    // Ambil teks info yang sudah digabungkan, atau tampilkan '-'
                    const displayText = seragamInfoByJenis[jenisNama] || '-';
                    tr += `<td>${displayText}</td>`;
                });

                tr += "</tr>";

                // Simpan data lengkap karyawan ke dalam elemen tr untuk checkbox
                let $row = $(tr);
                $row.data('karyawanData', karyawan);
                tbody.append($row);
            });
        }

        /**
         * Menyederhanakan logika checkbox.
         */
        $(document).on('change', '.check-seragam', function() {
            let $row = $(this).closest('tr');
            let nik = $(this).data('nik');
            let karyawanData = $row.data('karyawanData');

            if ($(this).is(':checked')) {
                selectedSeragam[nik] = karyawanData;
            } else {
                delete selectedSeragam[nik];
            }

            $("#count-karyawan").text(Object.keys(selectedSeragam).length);
            console.log("Selected Seragam:", selectedSeragam);
        });

        /**
         * PERUBAHAN: Function untuk mengambil data via AJAX dengan validasi
         */
        function getDataSeragam() {
            let selectedYear = $('#periode').val();
            let selectedDept = $('#departemen').val();
            let selectedKaryawan = $('#nama-karyawan').val();

            // Validasi: Jika departemen belum dipilih, tampilkan pesan awal dan hentikan fungsi
            if (!selectedDept) {
                showInitialPrompt();
                return;
            }

            $.ajax({
                url: '{{ URL::to('/') }}/distsr/getDataSeragam',
                type: 'POST',
                data: { tahun: selectedYear, departemen: selectedDept, nik_karyawan: selectedKaryawan },
                beforeSend: function() {
                    let tbody = $("#list-seragam tbody");
                    let colSpan = 3 + jenisSeragamList.length;
                    tbody.html(`<tr><td colspan="${colSpan}" class="text-center">
                        <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
                        <div>Sedang memuat data...</div>
                    </td></tr>`);
                },
                success: function(response) {
                    if (response.message === 'success') {
                        renderTable(response.data);
                    } else {
                        let tbody = $("#list-seragam tbody");
                        let colSpan = 3 + jenisSeragamList.length;
                        tbody.html(`<tr><td colspan="${colSpan}" class="text-center text-danger">Gagal memuat data.</td></tr>`);
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    let tbody = $("#list-seragam tbody");
                    let colSpan = 3 + jenisSeragamList.length;
                    tbody.html(`<tr><td colspan="${colSpan}" class="text-center text-danger">Terjadi kesalahan.</td></tr>`);
                }
            });
        }

        // Event handler untuk filter
        $('#periode, #departemen, #nama-karyawan').change(function() {
            getDataSeragam();
        });

        // Event handler untuk tombol simpan
        $('#btn-simpan').click(function() {
            if (Object.keys(selectedSeragam).length === 0) {
                Swal.fire({ title: 'Warning', text: 'Belum ada karyawan yang dicek!', icon: 'warning', confirmButtonColor: '#028284' });
                return;
            }

            let $btn = $(this);
            $btn.prop('disabled', true);
            let originalText = $btn.html();
            $btn.html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);

            $.ajax({
                url: "{{ URL::to('/') }}/distsr",
                type: "POST",
                dataType: "JSON",
                data: { seragam: selectedSeragam },
                success: function(response) {
                    if (response.message === 'success') {
                        Swal.fire({ title: 'Sukses', text: 'Berhasil Melakukan Pengecekan', icon: 'success', confirmButtonColor: '#028284' })
                            .then((result) => {
                                if (result.isConfirmed) {
                                    window.location.href = "{{ URL::to('/') }}/distsr";
                                }
                            });
                    } else {
                        Swal.fire({ title: 'Error', text: response.error || 'Terjadi kesalahan yang tidak diketahui.', icon: 'error', confirmButtonColor: '#028284' });
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    Swal.fire({ title: 'Error', text: 'Terjadi kesalahan pada server.', icon: 'error', confirmButtonColor: '#028284' });
                },
                complete: function() {
                    $btn.prop('disabled', false);
                    $btn.html(originalText);
                }
            });
        });
    </script>

    <style>
        /* Select2 height fix */
        .select2-container .select2-selection--single {
            height: 30px !important;
            /* match Bootstrap form-control */
            display: flex;
            align-items: center;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px !important;
        }

        /* Button filter fix */
        .btn-filter {
            height: 40px;
            /* match select2 */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
        }
    </style>
@endpush