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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>

                        {{-- Batch forms (non-AJAX) --}}
                        @if ($authorize->approval == '1')
                            <form id="batchApproveForm" action="{{ url($url_menu . '/batch-approve') }}" method="POST" style="display:none;">
                                @csrf
                            </form>
                            <form id="batchRejectForm" action="{{ url($url_menu . '/batch-reject') }}" method="POST" style="display:none;">
                                @csrf
                                <input type="hidden" name="reason" value="">
                            </form>
                        @endif

                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        <button class="btn btn-primary mb-0" onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                                            <i class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</span>
                                        </button>
                                    @endif
                                    @if ($authorize->approval == '1')
                                        <button id="batchDecisionBtn" class="btn btn-primary mb-0" disabled title="Beri Keputusan untuk Data Terpilih">
                                            <i class="fas fa-gavel me-1"></i><span class="font-weight-bold">Beri Keputusan Terpilih</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            @if ($authorize->approval == '1')
                                                <th width="30"><input type="checkbox" id="select_all"></th>
                                            @endif
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            <!-- HARDCODE HEADER TABEL ANDA DI SINI -->
                                            <th>Nama Lengkap</th>
                                            <th>Kategori</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- CONTOH HARDCODE / MANUAL LOOP DATA ANDA DI SINI -->
                                        <!-- @ foreach($data as $item) -->
                                        <tr>
                                            @if ($authorize->approval == '1')
                                                <td class="text-sm font-weight-normal">
                                                    <!-- Ganti 'ID_DATA' dengan ID manual / hasil query anda -->
                                                    <input type="checkbox" class="row-select" value="{{ encrypt('ID_DATA') }}">
                                                </td>
                                            @endif
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button" title="View Data" onclick="window.location='{{ url($url_menu . '/show/' . encrypt('ID_DATA')) }}'">
                                                        <i class="fas fa-eye"> </i><span class="font-weight-bold"> View</span>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        @if ($authorize->approval == '1')
                                                            <li><hr class="dropdown-divider"></li>
                                                            <button type="button" class="btn btn-sm btn-primary mx-2 mb-0 w-90" title="Beri Keputusan" onclick="beriKeputusan('{{ encrypt('ID_DATA') }}')">
                                                                <i class="fas fa-gavel"></i><span class="font-weight-bold"> Beri Keputusan</span>
                                                            </button>
                                                            <li><hr class="dropdown-divider"></li>
                                                        @endif

                                                        @if ($authorize->edit == '1')
                                                            <li><hr class="dropdown-divider"></li>
                                                            <button type="button" class="btn btn-sm btn-warning mx-2 mb-0 w-90" title="Edit Data" onclick="window.location='{{ url($url_menu . '/edit/' . encrypt('ID_DATA')) }}'">
                                                                <i class="fas fa-edit"></i><span class="font-weight-bold"> Edit</span>
                                                            </button>
                                                        @endif

                                                        @if ($authorize->delete == '1')
                                                            <form action="{{ url($url_menu . '/' . encrypt('ID_DATA')) }}" method="POST" style="display: inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <li><hr class="dropdown-divider"></li>
                                                                <button type="submit" class="btn btn-sm btn-danger mx-2 mb-0 w-90" title="Hapus Data" onclick="return deleteData(event, 'Nama Data','Hapus')">
                                                                    <i class="fas fa-trash"></i><span class="font-weight-bold"> Hapus</span>
                                                                </button>
                                                            </form>
                                                        @endif
                                                        <li><hr class="dropdown-divider"></li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td>1</td>
                                            <!-- HARDCODE ISI TABEL ANDA DI SINI -->
                                            <td class="text-sm font-weight-normal">John Doe</td>
                                            <td class="text-sm font-weight-normal">Karyawan</td>
                                            <td class="text-sm font-weight-normal">Aktif</td>
                                        </tr>
                                        <!-- @ endforeach -->
                                    </tbody>
                                </table>

                                <!-- BAGIAN PAGINATION (MANUAL/HARDCODE) -->
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <div>
                                        <!-- Jika menggunakan Laravel Pagination: Data {{-- $data->firstItem() --}} - {{-- $data->lastItem() --}} dari {{-- $data->total() --}} data. -->
                                        Menampilkan data secara manual.
                                    </div>
                                    <div>
                                        <!-- Jika menggunakan Laravel Pagination: {{-- $data->appends(request()->query())->links('pagination::bootstrap-4') --}} -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </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>
        $(document).ready(function () {
            // Note logic default setup (Silahkan dimodifikasi manual jika dibutuhkan)
            if ($('tr').hasClass('not')) {
                $('#noted').html(`<code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>`);
            }
        });

        // Initialize DataTables
        $('#list_{{ $dmenu }}').DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            },
            dom: '<"row"<"col-12 d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center"<"dt-buttons mb-2 mb-lg-0"B><"dataTables_filter mb-3 mb-lg-0"f>>>rtip',
            buttons: [{
                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                action: function () {
                    window.location.href = "{{ url($url_menu) }}?export=excel";
                }
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                action: function () {
                    window.location.href = "{{ url($url_menu) }}?export=pdf";
                }
            }],
            initComplete: function () {
                var searchBarHtml = `
                    <form method="GET" action="{{ url($url_menu) }}" class="d-flex w-100 justify-content-lg-end justify-content-start">
                        <input type="text" name="search" class="form-control me-2 w-100" placeholder="Search..." value="{{ request('search') }}">
                    </form>
                `;
                $('.dataTables_filter').html(searchBarHtml); 
            }
        });

        // Set color button datatables
        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        
        // Check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/example_manual/list.blade.php</b> on line <b>222</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjhris/example_manual/list.blade.php</b> on line <b>222</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/example_manual/list.blade.php</b> on line <b>223</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjhris/example_manual/list.blade.php</b> on line <b>223</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjhris/example_manual/list.blade.php</b> on line <b>224</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjhris/example_manual/list.blade.php</b> on line <b>224</b><br />

        // Function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); 
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }

        // Define baseUrl globally
        window.baseUrl = "{{ url($url_menu) }}";
        const baseUrl = window.baseUrl;

        // Toggle select all
        $('#select_all').on('change', function () {
            const checked = $(this).is(':checked');
            $('.row-select').prop('checked', checked);
            updateBatchButtons();
        });

        // Update buttons when any row checkbox changes
        $(document).on('change', '.row-select', function () {
            const allChecked = ($('.row-select').length === $('.row-select:checked').length);
            $('#select_all').prop('checked', allChecked);
            updateBatchButtons();
        });

        function updateBatchButtons() {
            const count = $('.row-select:checked').length;
            if (count > 0) {
                $('#batchDecisionBtn').prop('disabled', false);
            } else {
                $('#batchDecisionBtn').prop('disabled', true);
            }
        }

        function updateBadgeCount() {
            const badges = document.querySelectorAll('.nav-link[href="#rdms12"] .badge-circle, .nav-link[href*="rdmcb1"] .badge-circle');
            badges.forEach(badge => {
                const currentCount = parseInt(badge.textContent) || 0;
                if (currentCount > 0) {
                    const newCount = currentCount - 1;
                    if (newCount <= 0) {
                        badge.style.display = 'none';
                    } else {
                        badge.textContent = newCount;
                    }
                }
            });
        }

        // Beri Keputusan (Approve or Reject)
        window.beriKeputusan = function(id) {
            Swal.fire({
                title: 'Beri Keputusan',
                text: 'Pilih keputusan untuk data ini:',
                icon: 'question',
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-check"></i> Setujui',
                denyButtonText: '<i class="fas fa-times"></i> Tolak',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745',
                denyButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    const approveUrl = baseUrl + '/approve/' + id;
                    $.ajax({
                        url: approveUrl,
                        type: 'POST',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(response) {
                            updateBadgeCount();
                            Swal.fire({
                                title: 'Berhasil!',
                                text: response.message || 'Data berhasil disetujui',
                                icon: 'success',
                                confirmButtonColor: '#028284'
                            }).then(() => {
                                location.reload(true);
                            });
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                title: 'Gagal!',
                                text: xhr.responseJSON?.message || 'Terjadi kesalahan: ' + error,
                                icon: 'error',
                                confirmButtonColor: '#028284'
                            });
                        }
                    });
                } else if (result.isDenied) {
                    Swal.fire({
                        title: 'Alasan Penolakan',
                        input: 'textarea',
                        inputLabel: 'Masukkan alasan penolakan',
                        inputPlaceholder: 'Alasan...',
                        showCancelButton: true,
                        confirmButtonText: 'Kirim',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#028284',
                        preConfirm: (value) => {
                            if (!value) {
                                Swal.showValidationMessage('Alasan penolakan harus diisi');
                            }
                            return value;
                        }
                    }).then((reasonResult) => {
                        if (reasonResult.isConfirmed) {
                            const rejectUrl = baseUrl + '/reject/' + id;
                            $.ajax({
                                url: rejectUrl,
                                type: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    reason: reasonResult.value
                                },
                                success: function(response) {
                                    updateBadgeCount();
                                    Swal.fire({
                                        title: 'Berhasil!',
                                        text: response.message || 'Data berhasil ditolak',
                                        icon: 'success',
                                        confirmButtonColor: '#028284'
                                    }).then(() => {
                                        location.reload(true);
                                    });
                                },
                                error: function(xhr, status, error) {
                                    Swal.fire({
                                        title: 'Gagal!',
                                        text: xhr.responseJSON?.message || 'Terjadi kesalahan: ' + error,
                                        icon: 'error',
                                        confirmButtonColor: '#028284'
                                    });
                                }
                            });
                        }
                    });
                }
            });
        };

        // Batch Decision (Approve or Reject)
        $('#batchDecisionBtn').on('click', function() {
            const ids = $('.row-select:checked').map(function() {
                return $(this).val();
            }).get();

            if (ids.length === 0) {
                Swal.fire({
                    title: 'Pilih data',
                    text: 'Silakan pilih data terlebih dahulu',
                    icon: 'warning',
                    confirmButtonColor: '#028284'
                });
                return;
            }

            Swal.fire({
                title: 'Beri Keputusan untuk ' + ids.length + ' Data',
                text: 'Pilih keputusan untuk data terpilih:',
                icon: 'question',
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: '<i class="fas fa-check"></i> Setujui Semua',
                denyButtonText: '<i class="fas fa-times"></i> Tolak Semua',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745',
                denyButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.getElementById('batchApproveForm');
                    if (!form) return;
                    form.querySelectorAll('input[name="ids[]"]').forEach(n => n.remove());
                    ids.forEach(id => {
                        const inp = document.createElement('input');
                        inp.type = 'hidden';
                        inp.name = 'ids[]';
                        inp.value = id;
                        form.appendChild(inp);
                    });
                    form.submit();
                } else if (result.isDenied) {
                    Swal.fire({
                        title: 'Alasan Penolakan',
                        input: 'textarea',
                        inputLabel: 'Masukkan alasan penolakan untuk semua data',
                        inputPlaceholder: 'Alasan...',
                        showCancelButton: true,
                        confirmButtonText: 'Kirim',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#028284',
                        preConfirm: (value) => {
                            if (!value) {
                                Swal.showValidationMessage('Alasan penolakan harus diisi');
                            }
                            return value;
                        }
                    }).then((reasonResult) => {
                        if (reasonResult.isConfirmed) {
                            const reason = reasonResult.value;
                            const form = document.getElementById('batchRejectForm');
                            if (!form) return;
                            form.querySelectorAll('input[name="ids[]"]').forEach(n => n.remove());
                            ids.forEach(id => {
                                const inp = document.createElement('input');
                                inp.type = 'hidden';
                                inp.name = 'ids[]';
                                inp.value = id;
                                form.appendChild(inp);
                            });
                            form.querySelector('input[name="reason"]').value = reason;
                            form.submit();
                        }
                    });
                }
            });
        });
    </script>
@endpush