@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-6">
                                    <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-6">
                                    <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-3 d-flex align-items-end">
                                    <button type="button" class="btn btn-primary w-100 btn-filter m-1"
                                        onclick="getDataSeragam()">
                                        Terapkan
                                    </button>
                                </div> --}}
                            </form>
                            <br>
                            <p>Total Karyawan Checked : <strong id="count-karyawan"></strong></p>
                            <hr>

                            <div class="table-responsive">
                                <table class="table display" id="list-seragam">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkAll">
                                                </div>
                                            </th>
                                            <th>Nama Karyawan</th>
                                            <th>Departemen</th>
                                            @foreach ($jenis as $jns)
                                                <th>{{ $jns->nama_jenis_seragam }}</th>
                                            @endforeach
                                        </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>

    <!-- Modal Complain -->
    <div class="modal fade" id="modalComplain" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Complain Seragam</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modalNik">
                    <input type="hidden" id="modalPeriode">
                    <div id="container-complain"></div>
                    <button id="add-item" class="btn btn-sm btn-secondary">+ Tambah Item</button>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button class="btn btn-primary" id="btn-simpan-complain">Simpan</button>
                </div>
            </div>
        </div>
    </div>

    {{-- template untuk form complain --}}
    <div id="complain-template" class="d-none">
        <div class="complain-item border rounded p-2 mb-3">
            <div class="row">
                <div class="col-6">
                    <div class="mb-2">
                        <label>Jenis Seragam</label>
                        <select name="jenis[]" class="form-select jenis-select"></select>
                    </div>
                </div>
                <div class="col-6">
                    <div class="mb-2">
                        <label>Tipe Seragam</label>
                        <select name="tipe[]" class="form-select tipe-select"></select>
                    </div>
                </div>

            </div>

            <div class="mb-1">
                <label>Catatan Item</label>
                <textarea name="note[]" class="form-control" placeholder="Tulis alasan komplain untuk item ini..."></textarea>
            </div>
            <div class="mb-1 text-end">
                <button type="button" class="btn btn-danger btn-sm mt-4 btn-hapus-item">Hapus</button>
            </div>
        </div>
    </div>



























    {{-- <div class="modal fade" id="modalComplain" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Complain Seragam</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modalNik">
                    <input type="hidden" id="modalPeriode">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label>Jenis Seragam</label>
                                <select id="modalJenis" class="form-select"></select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label>Tipe Seragam</label>
                                <select id="modalTipe" class="form-select"></select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label>Note</label>
                        <textarea class="form-control" id="modalNote" placeholder="Tulis alasan complain..."></textarea>
                    </div>
                    <button id="add-item" class="btn btn-sm btn-secondary">Add Item</button>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button class="btn btn-primary" id="btn-simpan-complain">Simpan</button>
                </div>
            </div>
        </div>
    </div> --}}


    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @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>
        let karyawanChecked = [];
        let selectedSeragam = {};
        // let listJenisSeragam = [];
        $(document).ready(function() {
            window.listJenisSeragam = [];
            window.listTipeSeragam = [];

            $('#departemen').select2({
                placeholder: "Departemen",
                allowClear: true,
                width: '100%'
            });

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

            function loadDataJenisSeragam(data) {
                window.listJenisSeragam = data;

            }

            function loadDataTipeSeragam(data) {
                window.listTipeSeragam = data;
            }

            function addItem() {
                let template = $("#complain-template").html();
                let $el = $(template);

                // isi dropdown jenis
                let jenisSelect = $el.find("select[name='jenis[]']");
                jenisSelect.empty().append('<option value="">-- Pilih Jenis --</option>');
                window.listJenisSeragam.forEach(function(j) {
                    jenisSelect.append(
                        `<option value="${j.jenis_seragam_id}">${j.jenis_seragam_nama}</option>`
                    );
                });

                // isi dropdown tipe (awal kosong dulu)
                let tipeSelect = $el.find("select[name='tipe[]']");
                tipeSelect.empty().append('<option value="">-- Pilih Tipe --</option>');

                // event ketika jenis dipilih
                jenisSelect.on("change", function() {
                    let selectedJenis = $(this).val();

                    // ambil semua tipe seragam yang sudah dipilih di form lain
                    let usedTipe = [];
                    $("select[name='tipe[]']").each(function() {
                        let val = $(this).val();
                        if (val) usedTipe.push(val);
                    });

                    // isi ulang tipe sesuai jenis dan exclude yg sudah dipakai
                    tipeSelect.empty().append('<option value="">-- Pilih Tipe --</option>');
                    window.listTipeSeragam
                        .filter(t => t.jenis_seragam_id == selectedJenis)
                        .forEach(function(t) {
                            if (!usedTipe.includes(t.tipe_seragam_id.toString())) {
                                tipeSelect.append(
                                    `<option value="${t.tipe_seragam_id}">${t.tipe_seragam_nama}</option>`
                                );
                            }
                        });
                });

                $("#container-complain").append($el);
            }



            function getJenisTipeSeragam(nik, periode) {
                $.ajax({
                    url: '{{ URL::to('/') }}/pserag/getJenisTipeSeragam',
                    method: "POST",
                    data: {
                        nik: nik,
                        periode: periode
                    },
                    success: function(response) {
                        if (response.status == 'success') {
                            console.log("Response ", response.jenis_seragam)
                            loadDataJenisSeragam(response.jenis_seragam);
                            loadDataTipeSeragam(response.tipe_seragam);

                            $("#modalNik").val(nik);
                            $("#modalPeriode").val(periode);

                            // reset container
                            $("#container-complain").empty();
                            addItem(); // tambahkan 1 item default

                            $('#modalComplain').modal('show');
                        } else {
                            Swal.fire({
                                title: 'Oops!',
                                text: 'Get Data Failed',
                                icon: 'warning',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                });
            }

            $(document).on('click', '.complain-btn', function() {
                let nik = $(this).data('nik');
                let periode = $(this).data('periode');

                getJenisTipeSeragam(nik, periode);
            });

            $("#add-item").click(function() {
                addItem();
            });

            $(document).on("click", ".btn-hapus-item", function() {
                $(this).closest(".complain-item").remove();
            });
        });

        // function addItem() {
        //     let template = $("#complain-template").html();
        //     let $el = $(template);

        //     // isi dropdown jenis
        //     let jenisSelect = $el.find("select[name='jenis[]']");
        //     jenisSelect.empty().append('<option value="">-- Pilih Jenis --</option>');
        //     window.listJenisSeragam.forEach(function(j) {
        //         jenisSelect.append(`<option value="${j.id}">${j.nama}</option>`);
        //     });

        //     // isi dropdown tipe
        //     let tipeSelect = $el.find("select[name='tipe[]']");
        //     tipeSelect.empty().append('<option value="">-- Pilih Tipe --</option>');
        //     window.listTipeSeragam.forEach(function(t) {
        //         tipeSelect.append(`<option value="${t.id}">${t.nama}</option>`);
        //     });

        //     $("#container-complain").append($el);
        // }

        $(document).on('change', '#checkAll', function() {
            let isChecked = $(this).is(':checked');
            $(".check-seragam").prop('checked', isChecked).trigger('change');
            // trigger('change') supaya event yang isi selectedSeragam juga jalan
        });

        $(document).on('change', '.check-seragam', function() {
            let row = $(this).closest('tr');
            let nik = row.find('input[name="nik_karyawan[]"]').val();

            if ($(this).is(':checked')) {
                // ambil semua data hidden untuk karyawan ini
                let seragamList = [];

                // loop hidden input jenis_seragam_nama untuk karyawan ini
                row.find(`input[name^="jenis_seragam_nama[${nik}]"]`).each(function(i, el) {
                    let jenisNama = $(el).val();
                    let jumlah = row.find(`input[name^="jumlah_seragam[${nik}]"]`).eq(i).val();
                    let jenisId = row.find(`input[name^="jenis_seragam_id[${nik}]"]`).val();
                    let tipeId = row.find(`input[name^="tipe_seragam_id[${nik}]"]`).val();
                    let tipeNama = row.find(`input[name^="tipe_seragam_nama[${nik}]"]`).eq(i).val();

                    seragamList.push({
                        jenis_seragam_id: jenisId,
                        jenis_seragam_nama: jenisNama,
                        tipe_seragam_id: tipeId,
                        tipe_seragam_nama: tipeNama,
                        jumlah_seragam: jumlah
                    });
                });

                // simpan ke object utama
                selectedSeragam[nik] = {
                    nik_karyawan: nik,
                    nama_karyawan: row.find("td:nth-child(2)").text().trim(),
                    nama_department: row.find("td:nth-child(3)").text().trim(),
                    seragam: seragamList
                };

            } else {
                $("#checkAll").prop('checked', false);
                // kalau di-uncheck → hapus
                delete selectedSeragam[nik];
            }

            // update counter
            $("#count-karyawan").text(Object.keys(selectedSeragam).length);

            console.log("selectedSeragam:", selectedSeragam);
        });

        // $(document).on('click', '.complain-btn', function() {
        //     let nik = $(this).data('nik');
        //     $('#modalNik').val(nik);
        //     $.ajax({
        //         url: '{{ URL::to('/') }}/pserag/getJenisTipeSeragam',
        //         method: "POST",
        //         data: {
        //             nik: nik
        //         },
        //         success: function(response) {
        //             if (response.status == 'success') {
        //                 loadDataJenisSeragam(response.jenis_seragam);
        //                 loadDataTipeSeragam(response.tipe_seragam);
        //                 $('#modalComplain').modal('show');

        //             } else {
        //                 Swal.fire({
        //                     title: 'Oops!',
        //                     text: 'Get Data Failed',
        //                     icon: 'warning',
        //                     confirmButtonText: 'OK'
        //                 });
        //             }
        //         },
        //     })
        //     $('#modalMaterial').data('trigger-source', index);
        // });


        // function loadDataJenisSeragam(jenis_seragam, selectedJenisSeragam = null) {
        //     $('#modalJenis').empty();
        //     $('#modalJenis').append('<option value="">-- Pilih Jenis Seragam --</option>');
        //     jenis_seragam.forEach(function(j) {
        //         let selected = (selectedJenisSeragam && selectedJenisSeragam == j.jenis_seragam_id) ? 'selected' :
        //             '';
        //         $('#modalJenis').append(
        //             `<option value="${j.jenis_seragam_id}" ${selected}>${j.jenis_seragam_nama}</option>`);
        //     });
        // }

        // function loadDataTipeSeragam(tipe_seragam, selectedTipeSeragam = null) {

        //     $('#modalTipe').empty();
        //     $('#modalTipe').append('<option value="">-- Pilih Tipe Seragam --</option>');
        //     tipe_seragam.forEach(function(j) {
        //         let selected = (selectedTipeSeragam && selectedTipeSeragam == j.tipe_seragam_id) ? 'selected' : '';
        //         $('#modalTipe').append(
        //             `<option value="${j.tipe_seragam_id}" ${selected}>${j.tipe_seragam_nama}</option>`);
        //     });
        // }

        // $('#btn-simpan-complain').click(function() {
        //     let periode = $('#periode').val();
        //     let nik = $('#modalNik').val();
        //     let jenis_seragam_id = $('#modalJenis').val();


        //     let tipe_seragam_id = $('#modalTipe').val();
        //     let note = $('#modalNote').val();

        //     if (jenis_seragam_id == '' || tipe_seragam_id == '' || note == '') {
        //         Swal.fire({
        //             title: 'Warning',
        //             text: 'Semua field harus diisi !',
        //             icon: 'warning',
        //             confirmButtonColor: '#028284'
        //         });
        //         return;
        //     }

        //     $.ajax({
        //         url: '{{ URL::to('/') }}/pserag/complain',
        //         method: 'POST',
        //         data: {
        //             periode: periode,
        //             nik: nik,
        //             jenis_id: jenis_seragam_id,
        //             tipe_id: tipe_seragam_id,
        //             note: note
        //         },
        //         success: function(res) {
        //             if (res.status == 'success') {
        //                 $('#modalComplain').modal('hide');
        //                 Swal.fire('Berhasil', 'Complain berhasil disimpan', 'success');
        //             } else {
        //                 Swal.fire('Gagal', res.message || 'Terjadi kesalahan', 'error');
        //             }
        //         }
        //     });
        // })

        $("#btn-simpan-complain").click(function() {
            let data = {
                nik: $("#modalNik").val(),
                periode: $("#modalPeriode").val(),
                items: []
            };

            $("#container-complain .complain-item").each(function() {
                data.items.push({
                    jenis: $(this).find("select[name='jenis[]']").val(),
                    tipe: $(this).find("select[name='tipe[]']").val(),
                    note: $(this).find("textarea[name='note[]']").val(),
                });
            });

            $.ajax({
                url: '{{ URL::to('/') }}/pserag/complain',
                type: "POST",
                data: {
                    ...data
                },
                success: function() {
                    Swal.fire("Berhasil!", "Data berhasil disimpan", "success");
                    $("#modalComplain").modal("hide");
                },
                error: function() {
                    Swal.fire("Gagal!", "Terjadi kesalahan saat simpan", "error");
                }
            });
        });

        // $(document).on('click', '.complain-btn', function() {
        //     let nik = $(this).data('nik');
        //     let seragam = $(this).data('seragam'); // array seragam karyawan
        //     console.log("Seragam ", seragam);
        //     console.log(seragam);

        //     $('#modalNik').val(nik);
        //     $('#modalJenis').empty();
        //     $('#modalTipe').empty();

        //     // isi dropdown Jenis
        //     seragam.forEach(s => {
        //         $('#modalJenis').append(
        //             `<option value="${s.jenis_seragam_id}">${s.jenis_seragam_nama}</option>`);
        //     });

        //     // isi dropdown Tipe sesuai default pertama
        //     let firstTipe = seragam[0]?.tipe_seragam_id;
        //     seragam.forEach(s => {
        //         if (s.jenis_seragam_id == firstTipe) {
        //             $('#modalTipe').append(
        //                 `<option value="${s.tipe_seragam_id}">${s.tipe_seragam_nama}</option>`);
        //         }
        //     });

        //     // update Tipe ketika Jenis diganti
        //     $('#modalJenis').off('change').on('change', function() {
        //         let jenisId = $(this).val();
        //         $('#modalTipe').empty();
        //         seragam.forEach(s => {
        //             if (s.jenis_seragam_id == jenisId) {
        //                 $('#modalTipe').append(
        //                     `<option value="${s.tipe_seragam_id}">${s.tipe_seragam_nama}</option>`
        //                     );
        //             }
        //         });
        //     });

        //     $('#modalComplain').modal('show');
        // });





        // Render tabel
        function renderTable(data) {
            let tbody = $("#list-seragam tbody");
            tbody.empty();
            if (data.length === 0) {
                tbody.html(`
                    <tr>
                        <td colspan="20" class="text-center text-muted">Tidak ada data</td>
                    </tr>
                `);
                return;
            }

            $.each(data, function(index, row) {
                console.log("ROW ", row)
                let tr = "<tr>";
                if (row.is_distributed == 1) {
                    // jika sudah didistribusi, tampilkan button Complain
                    tr += `<td>
                        <button class="btn btn-warning btn-sm complain-btn"
                                data-nik="${row.nik_karyawan}"
                                data-periode="${row.periode}">
                            Complain
                        </button>
                    </td>`;
                } else {
                    // jika belum didistribusi, tampilkan checkbox
                    let isChecked = karyawanChecked[row.nik_karyawan] ? "checked" : "";
                    tr += `<td>
                          <div class="form-check">
                              <input class="form-check-input check-seragam" type="checkbox"
                                    data-nik="${row.nik_karyawan}" ${isChecked}>
                          </div>
                    </td>`;
                }
                tr += `<td>${row.nama_karyawan}
                  <input type="hidden" name="nik_karyawan[]" value="${row.nik_karyawan}">

                  </td>`;
                tr += "<td>" + row.nama_department + "</td>";

                @foreach ($jenis as $jns)
                    var jenis = @json($jns->nama_jenis_seragam);
                    var pivot = row[jenis] ?? null;
                    console.log("Pivot ", pivot);
                    if (pivot) {
                        tr += `<td>${pivot.jumlah}
                          <input type="hidden" name="jenis_seragam_id[${row.nik_karyawan}]" value="${pivot.jenis_seragam_id}">
                          <input type="hidden" name="jenis_seragam_nama[${row.nik_karyawan}][]" value="${pivot.jenis_seragam_nama}">
                          <input type="hidden" name="tipe_seragam_id[${row.nik_karyawan}]" value="${pivot.tipe_seragam_id}">
                          <input type="hidden" name="tipe_seragam_nama[${row.nik_karyawan}][]" value="${pivot.tipe_seragam_nama}">
                          <input type="hidden" name="jumlah_seragam[${row.nik_karyawan}][]" value="${pivot.jumlah}">
                        </td>`;
                    } else {
                        tr += `<td>-</td>`;
                    }
                @endforeach

                tr += "</tr>";
                tbody.append(tr);
            });
        }

        // function detail ajax
        function getDataSeragam() {
            let selectedYear = $('#periode').val();
            let selectedDept = $('#departemen').val();
            let selectedKaryawan = $('#nama-karyawan').val();

            $.ajax({
                url: '{{ URL::to('/') }}/pserag/getDataSeragam',
                type: 'POST',
                data: {
                    tahun: selectedYear,
                    departemen: selectedDept,
                },
                beforeSend: function() {
                    let tbody = $("#list-seragam tbody");
                    tbody.html(`
                        <tr>
                            <td colspan="20" 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);
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                }
            });
        }


        $('#periode').change(function() {
            getDataSeragam();
        })
        $('#departemen').change(function() {
            getDataSeragam();
        })
        $('#nama-karyawan').change(function() {
            getDataSeragam();
        })


        $('#btn-simpan').click(function() {
            console.log("Selected Seragam ", selectedSeragam);
            let $btn = $(this);
            if (Object.keys(selectedSeragam).length == 0) {
                Swal.fire({
                    title: 'Warning',
                    text: 'Belum ada karyawan yang dicek!',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }
            $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('/') }}/pserag",
                type: "POST",
                dataType: "JSON",
                data: {
                    seragam: selectedSeragam
                },

                success: function(response) {
                    if (response.message == 'success') {
                        Swal.fire({
                            title: 'Sukses',
                            text: 'Berhasil Melakukan Distribusi',
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        });
                        window.location.href = "{{ URL::to('/') }}/pserag"
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: response.error,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                        $btn.prop('disabled', false); // aktifkan kembali tombol
                        $btn.html(originalText);
                    }
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                }
            })

        })
    </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