@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="section-first">
        <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">
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button execute --}}
                                <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">
                                        ADD</button>
                            @endif
                            <input type="hidden" id="auth-add" name="auth-add" value="{{ $authorize->add }}">
                            <input type="hidden" id="auth-edit" name="auth-edit" value="{{ $authorize->edit }}">
                            <input type="hidden" id="auth-delete" name="auth-delete" value="{{ $authorize->delete }}">
                            <input type="hidden" id="auth-approval" name="auth-approval"
                                value="{{ $authorize->approval }}">



                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <form>
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <!-- Tanggal Transaksi -->
                                <div class="col-lg-4">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputdate" class="form-label">Date</label>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="start-date" name="start-date"
                                                    placeholder="Date From" max="2026-10-03">
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="end-date" name="end-date"
                                                    placeholder="Date To" max="2026-10-03">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>
                                <!-- ID Transaksi -->
                                <div class="col-lg-3">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2" style="min-width: 150px;">Nama
                                                Barang</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <input type="text" id="nbarang" name="nbarang" class="form-control"
                                                    value="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-1 d-flex justify-content-center">
                                    <div style="border-left: 2px solid #ddd; height: 50%;"></div>
                                </div>
                                {{-- Status --}}
                                <div class="col-lg-3">
                                    <div class="row mb-3">
                                        <div class="col-lg-4">
                                            <label for="inputCust" class="form-label me-2"
                                                style="min-width: 150px;">Status</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="flex flex-col mb-2 input-group">
                                                <select id="statusSelect" name="report-filter-status" class="form-select">
                                                    <option value="ALL">ALL</option>

                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}">
                                                            {{ $s->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <button type="submit" class="btn btn-primary mb-1 mt-3" id="search-form">
                                <i class="fa fa-magnifying-glass"></i> Search
                            </button>


                            <hr class="horizontal dark mt-0">
                            {{-- <div class="row g-3 mb-3"> --}}

                            {{-- <div class="col-lg-6">
                                    <div class="card border-danger h-100">
                                        <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong>Urgent Items</strong>
                                                <span class="badge bg-danger ms-2">{{ $urgentCount ?? 0 }}</span>


                                            </div>

                                        </div>
                                        <div class="card-body p-2">
                                            @if (!empty($urgentItems) && count($urgentItems))
                                                <div class="table-responsive">
                                                    <table class="table table-sm align-middle mb-0" id="urgentItems">
                                                        <thead>
                                                            <tr class="table-light">
                                                                <th style="width:36%">ID Trans</th>

                                                                <th style="width:36%">Barang</th>
                                                                <th>Qty</th>

                                                                <th>Status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($urgentItems as $row)
                                                                <tr>
                                                                    <td>{{ $row->idtrans }}</td>

                                                                    <td class="text-truncate"
                                                                        title="{{ $row->uraian }}">
                                                                        {{ $row->uraian }}</td>
                                                                    <td>{{ $row->quantity }} {{ $row->satuan }}</td>

                                                                    </td>
                                                                    <td>
                                                                        @switch($row->status)
                                                                            @case('F')
                                                                                <span class="badge bg-success">Finish</span>
                                                                            @break

                                                                            @case('C')
                                                                                <span class="badge bg-danger">Cancel</span>
                                                                            @break

                                                                            @case('P')
                                                                                <span
                                                                                    class="badge bg-warning text-dark">Partial</span>
                                                                            @break

                                                                            @case('E')
                                                                                <span class="badge bg-primary">Entry</span>
                                                                            @break

                                                                            @case('CL')
                                                                                <span class="badge bg-info text-dark">Close</span>
                                                                            @break

                                                                            @default
                                                                                <span
                                                                                    class="badge bg-secondary">{{ $row->status }}</span>
                                                                        @endswitch
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="text-muted small">Tidak ada item urgent dengan filter saat ini.
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div> --}}

                            {{-- Partial Items --}}
                            {{-- <div class="col-lg-6">
                                    <div class="card border-warning h-100">
                                        <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong>Partial Items</strong>
                                                <span class="badge ms-2"
                                                    style="background-color:  	#FF8C00;">{{ $partialCount ?? 0 }}</span>


                                            </div>
                                        </div>
                                        <div class="card-body
                                                    p-2">
                                            @if (!empty($partialItems) && count($partialItems))
                                                <div class="table-responsive">
                                                    <table class="table table-sm align-middle mb-0" id="partialItems">
                                                        <thead>
                                                            <tr class="table-light">
                                                                <th style="width:40%">ID Trans</th>

                                                                <th style="width:40%">Barang</th>
                                                                <th>Qty</th>
                                                                <th>Sisa</th>
                                                                <th>Status</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($partialItems as $row)
                                                                <tr>
                                                                    <td>{{ $row->idtrans }}</td>
                                                                    <td class="text-truncate"
                                                                        title="{{ $row->uraian }}">
                                                                        {{ $row->uraian }}
                                                                    </td>
                                                                    <td>{{ $row->quantity }} {{ $row->satuan }}
                                                                    </td>
                                                                    <td>{{ $row->sisa }} {{ $row->satuan }}
                                                                    </td>


                                                                    <td>
                                                                        @switch($row->status)
                                                                            @case('F')
                                                                                <span class="badge bg-success">Finish</span>
                                                                            @break

                                                                            @case('C')
                                                                                <span class="badge bg-danger">Cancel</span>
                                                                            @break

                                                                            @case('P')
                                                                                <span class="badge"
                                                                                    style="background-color:  	#FF8C00;">
                                                                                    Partial</span>
                                                                            @break

                                                                            @case('E')
                                                                                <span class="badge bg-primary">Entry</span>
                                                                            @break

                                                                            @case('CL')
                                                                                <span class="badge bg-info text-dark">Close</span>
                                                                            @break

                                                                            @default
                                                                                <span
                                                                                    class="badge bg-secondary">{{ $row->status }}</span>
                                                                        @endswitch
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="text-muted small">Tidak ada item partial dengan filter
                                                    saat
                                                    ini.</div>
                                            @endif
                                        </div>
                                    </div>
                                </div> --}}
                            {{-- </div> --}}

                            <div class="card shadow-sm h-100">
                                <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>Belum Diterima</strong>
                                        <span class="badge bg-secondary ms-2">{{ $totalCount ?? 0 }}</span>
                                        <span class="badge bg-danger ms-1">Urgent: {{ $urgentCount ?? 0 }}</span>
                                    </div>
                                    {{-- opsional: link ke halaman list/filter --}}
                                    {{-- <a href="{{ route('fppIndex', ['status' => ['E','P']]) }}" class="btn btn-sm btn-outline-secondary">View all</a> --}}
                                </div>

                                <div class="card-body p-2">
                                    @if (!empty($entryItems) && count($entryItems))
                                        <div class="table-responsive">
                                            <table class="table table-sm align-middle mb-0" id="pendingItems">
                                                <thead>
                                                    <tr class="table-light">
                                                        <th style="width:36%">ID Trans</th>
                                                        <th style="width:36%">Barang</th>
                                                        <th>Qty</th>
                                                        <th>Sisa</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($entryItems as $row)
                                                        <tr class="{{ $row->urgency ? 'table-danger' : '' }}">
                                                            <td>{{ $row->idtrans }}</td>
                                                            <td class="text-truncate" title="{{ $row->uraian }}">
                                                                {{ $row->uraian }}</td>
                                                            <td>{{ $row->quantity }} {{ $row->satuan }}</td>
                                                            <td>{{ $row->sisa ?? 0 }} {{ $row->satuan }}</td>
                                                            <td>
                                                                @switch($row->status)
                                                                    @case('F')
                                                                        <span class="badge bg-success">Finish</span>
                                                                    @break

                                                                    @case('C')
                                                                        <span class="badge bg-danger">Cancel</span>
                                                                    @break
                                                                    {{-- partial --}}
                                                                    @case('P')
                                                                        <span class="badge" style="background-color: #FC7354; color: white;">Partial</span>
                                                                    @break

                                                                    @case('E')
                                                                        <span class="badge bg-primary">Entry</span>
                                                                    @break

                                                                    @case('CL')
                                                                        <span class="badge bg-info text-dark">Close</span>
                                                                    @break

                                                                    @default
                                                                        <span
                                                                            class="badge bg-secondary">{{ $row->status }}</span>
                                                                @endswitch
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                    style="color: #ffc2cd;" class="fas fa-circle"></i> Urgent</code>
                                        </div>
                                        {{-- Ringkasan bawah --}}
                                        {{-- <div
                                            class="d-flex justify-content-between align-items-center mt-2 small text-muted">
                                            <div>Total item: <strong>{{ $totalCount ?? 0 }}</strong></div>
                                            <div>Urgent: <span class="badge bg-danger">{{ $urgentCount ?? 0 }}</span>
                                            </div>
                                        </div> --}}
                                    @else
                                        <div class="text-muted small">Tidak ada item belum diterima dengan filter saat ini.
                                        </div>
                                    @endif
                                </div>
                            </div>

                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4" id="listtable">
        <div class="row">
            <div class="col-md-12">
                <div class="card overflow-auto">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">List Form PP</p>

                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <!-- Trigger -->
                            <div class="table-responsive">
                                <table class="table table-hover" id="list_formpp">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">Action</th>
                                            <th scope="col">ID</th>
                                            <th scope="col">Tanggal</th>
                                            <th scope="col">Dept</th>
                                            <th scope="col">Status</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .detail-row>td>div {
            animation: fadeIn 0.2s ease-in;
        }

        @keyframes fadeIn {
            tr.detail-row>td {
                border-top: none !important;
            }

            tr.detail-row table {
                border-color: #d8e2eb;
            }
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.5/vfs_fonts.js"></script>
    <script>
        $(document).ready(function() {
            $('#addItemModal .js-select2').each(function() {
                $(this).select2({
                    dropdownParent: $(this).closest('.position-relative'), // ⬅️ kunci
                    width: '100%',
                    dropdownAutoWidth: true,
                    minimumResultsForSearch: 0
                });
            });
            $('#list_formpp').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: false,
                responsive: true,
            });

            $('#pendingItems').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: false,
                responsive: true,
            });

            $('#urgentItems').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });

            $('#partialItems').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                "destroy": true,
                ordering: true,
                responsive: true,
            });


            // Mendapatkan tanggal hari ini dalam waktu lokal
            var today = new Date();

            // Mendapatkan tanggal 1 bulan ini dalam waktu lokal
            var firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);

            // Format tanggal ke format YYYY-MM-DD secara manual untuk menghindari masalah zona waktu
            var formattedToday = today.getFullYear() + '-' +
                String(today.getMonth() + 1).padStart(2, '0') + '-' +
                String(today.getDate()).padStart(2, '0');

            var formattedFirstDay = firstDayOfMonth.getFullYear() + '-' +
                String(firstDayOfMonth.getMonth() + 1).padStart(2, '0') + '-' +
                String(firstDayOfMonth.getDate()).padStart(2, '0');

            // Tetapkan nilai default pada input
            $("input[name='start-date']").val(formattedFirstDay); // Default: Tanggal 1 bulan ini
            $("input[name='end-date']").val(formattedToday); // Default: Hari ini

            searchTransactions(formattedFirstDay, formattedToday);
        });


        var authadd = document.getElementById('auth-add').value;
        var authedit = document.getElementById('auth-edit').value;
        var authdelete = document.getElementById('auth-delete').value;
        var authapproval = document.getElementById('auth-approval').value;

        $('#search-form').click(function(event) {
            event.preventDefault();
            searchTransactions();

        });

        function searchTransactions(startDate = null, endDate = null) {
            // Ambil nilai input dari form
            var nbarang = $('#nbarang').val();
            var sdate = startDate || $('#start-date').val();
            var edate = endDate || $('#end-date').val();
            var status = $("#statusSelect").val();


            // Validasi input
            if (nbarang === '' && (sdate === '' || edate === '')) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Please fill out ID or both Start Date and End Date!',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            } else if (sdate !== '' && edate !== '' && sdate > edate) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'Start Date must be less than or equal to End Date',
                    icon: 'error',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Tambahkan spinner dan nonaktifkan tombol
            $('#search-form').append(
                '<span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
            );
            $('#search-form').attr('disabled', true);

            // Buat filter
            var filter = {
                nbarang: nbarang,
                frdate: sdate,
                todate: edate,
                status: status
            };
            console.log(filter);

            // Kirim permintaan AJAX
            $.ajax({
                url: '{{ URL::to('/') }}/trsfpp/search',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Tambahkan CSRF token
                },
                data: filter, // Kirim data dalam format URL-encoded
                success: function(response) {
                    // Tampilkan div tabel dan muat data
                    $('#listtable').removeAttr('hidden');
                    loadrefreshItem(response.data);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.status === 404) {
                        Swal.fire({
                            icon: 'error',
                            title: 'No Data Found',
                            text: jqXHR.responseJSON.message,
                            confirmButtonColor: '#d33'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!',
                            confirmButtonColor: '#d33'
                        });
                    }
                },
                complete: function() {
                    // Hapus spinner dan aktifkan tombol
                    $('#search-form').find('.icon-load').remove(); // Hapus elemen spinner
                    $('#search-form').attr('disabled', false); // Aktifkan kembali tombol
                }
            });
        }

        //function menampilkan data yang telah di filter
        function loadrefreshItem(data) {
            // Kosongkan tabel (tanpa menghancurkan DataTables)
            const table = $('#list_formpp').DataTable(); // Ambil instance DataTables
            table.clear(); // Hapus semua data di DataTables

            // Iterasi melalui data dan tambahkan baris ke tbody
            data.forEach(item => {

                // Status dengan Badge
                let status = '';
                switch (item.status) {
                    case 'F':
                        status =
                            '<span class="badge bg-success">Finish</span>';
                        break;
                    case 'E':
                        status =
                            '<span class="badge bg-primary"> Entry</span>';
                        break;
                    case 'A':
                        status =
                            '<span class="badge bg-info"> Approve</span>';
                        break;
                    case 'P':
                        status =
                            '<span class="badge" style="background-color: #FF8C00;"> Partial</span>';
                        break;
                    default:
                        status = '<span class="badge bg-secondary">Unknown</span>';
                }


                // Bangun elemen dropdown dengan kondisi
                let dropdownItems = '';
                if (item.status === 'E') {
                    if (authedit === '1') {
                        dropdownItems += `
                                <li><a class="dropdown-item" onclick="edit('${item.idtrans}')" style="cursor: pointer;">
                                    <i class="fas fa-pen-to-square"></i> <span> Edit</span>
                                </a></li>
                                `;
                    }
                    dropdownItems += `
                       <li>                     
                         <a class="dropdown-item"
                            href="#"
                            data-id="${item.idtrans}"
                            onclick="approve('${item.idtrans}')">
                           <i class="fa fa-paper-plane"></i> <span>  Approve</span>
                        </a>
                        </li>
                        `;

                    if (authdelete === '1') {
                        dropdownItems += `
                            <li><a class="dropdown-item" onclick="deletetr('${item.idtrans}')" style="cursor: pointer;">
                                <i class="fas fa-trash"></i> <span> Delete</span>
                            </a></li>
                            `;
                    }
                } else if (item.status === 'A') {

                    dropdownItems += `
                             <li><a class="dropdown-item btn-print" data-id="${item.idtrans}" style="cursor: pointer;">
                                <i class="fas fa-print"></i> <span> Print</span>
                            </a></li>
                            `;

                    dropdownItems += `
                       <li>                     
                         <a class="dropdown-item"
                            href="#"
                            data-id="${item.idtrans}"
                            onclick="unapprove('${item.idtrans}')">
                           <i class="fas fa-undo-alt"></i> <span>  unApprove</span>
                        </a>
                        </li>
                        `;
                } else if (item.status === 'P') {
                    dropdownItems += `
                            <li><a class="dropdown-item btn-print" data-id="${item.idtrans}" style="cursor: pointer;">
                                <i class="fas fa-print"></i> <span> Print</span>
                            </a></li>
                            `;
                } else if (item.status === 'F') {
                    dropdownItems += `
                            <li><a class="dropdown-item btn-print" data-id="${item.idtrans}" style="cursor: pointer;">
                                <i class="fas fa-print"></i> <span> Print</span>
                            </a></li>
                            `;
                }
                // Tambahkan baris ke DataTables
                const rowNode = table.row.add([
                    `<div class="btn-group dropright">
                    <button type="button" class="btn btn-primary" id="view-${item.idtrans}" onclick="view('${item.idtrans}')">
                        <i class="fas fa-eye"></i> View
                    </button>
                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                        ${dropdownItems}
                    </div>
                </div>`,
                    item.idtrans,
                    item.date,
                    item.department,
                    status,
                ]).draw(false).node(); // <- ambil node baris yang baru

                // tambahkan data-id ke <tr> yang baru
                $(rowNode).attr('data-id', item.idtrans);

            });
            // Perbarui tampilan DataTables
            table.draw(); // Render ulang tabel
        }
        //function view
        function view(id) {
            var id = id;

            if (id) {
                window.location.href = "{{ url($url_menu . '/show' . '/') }}/" + (id);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        function edit(id) {
            var id = id;

            if (id) {
                window.location.href = "{{ url($url_menu . '/edit' . '/') }}/" + (id);
            } else {
                Swal.fire({
                    title: 'Oops!',
                    text: 'Pilih ID DA terlebih dahulu!',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            }
        }

        function approve(id) {
            var id = id;

            Swal.fire({
                title: `Data ${id} akan di Approve?`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/trsfpp/approve/' + id,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.status === 'success') {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    html: `
                                    <b>Data ${id} berhasil di Approve</b><br>
                                    <hr>
                                
                                `,
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6'
                                }).then(() => {
                                    window.location.replace("{{ url('/trsfpp') }}");
                                });
                            } else {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: data.message || `Data ${id} gagal diproses!`,
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6'
                                });
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat diupdate!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        function unapprove(id) {
            var id = id;

            Swal.fire({
                title: `Data ${id} akan di Approve?`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/trsfpp/unapprove/' + id,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.status === 'success') {
                                Swal.fire({
                                    title: 'Berhasil!',
                                    html: `
                                    <b>Data ${id} berhasil di unApprove</b><br>
                                    <hr>
                                
                                `,
                                    icon: 'success',
                                    confirmButtonColor: '#3085d6'
                                }).then(() => {
                                    window.location.replace("{{ url('/trsfpp') }}");
                                });
                            } else {
                                Swal.fire({
                                    title: 'Oops!',
                                    text: data.message || `Data ${id} gagal diproses!`,
                                    icon: 'error',
                                    confirmButtonColor: '#3085d6'
                                });
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat diupdate!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }


        function deletetr(id) {
            var id = id;

            Swal.fire({
                title: `Data ${id} akan dihapus`, // Perbaikan pada format string
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Hapus'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Ajax untuk memproses data ke database
                    $.ajax({
                        url: '{{ URL::to('/') }}/trsfpp/delete/' + id,
                        type: "POST",
                        dataType: "JSON",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            // Redirect ke halaman tpuror setelah sukses
                            Swal.fire({
                                title: 'Berhasil!',
                                text: `Data ${id} berhasil dihapus!`,
                                icon: 'success',
                                confirmButtonColor: '#3085d6'
                            }).then(() => {
                                window.location.replace("{{ URL::to('/') }}/trsfpp/");
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            Swal.fire({
                                title: 'Oops!',
                                text: `Data ${id} tidak dapat dihapus!`,
                                icon: 'error',
                                confirmButtonColor: '#3085d6'
                            });
                        }

                    });
                }
            });
        }

        $('#list_formpp tbody').on('click', 'tr', function(e) {
            // biar gak bentrok sama tombol/menu dropdown
            if ($(e.target).closest('.dropdown-menu, .dropdown-toggle, .btn').length) return;

            const $tr = $(this);
            const idtrans = $tr.data('id');
            if (!idtrans) return;

            console.log('idtrans', idtrans);

            // kalau sudah terbuka → tutup
            if ($tr.next().hasClass('detail-row')) {
                $tr.next().remove();
                return;
            }

            // tutup detail lain
            $('tr.detail-row').remove();

            // tampilkan loading
            $tr.after(`
                <tr class="detail-row">
                    <td colspan="5" class="p-0 text-center text-muted small py-2">
                        Loading detail form <b>${idtrans}</b>...
                    </td>
                </tr>
            `);

            $.ajax({
                url: "{{ url('/trsfpp/detail_formpp') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    idtrans
                },
                dataType: "json",
                success: function(resp) {
                    const rowsHtml = (resp.rows ?? []).map((r, i) => `
                <tr>
                    <td>${i + 1}</td>
                    <td>${r.uraian ?? ''}</td>
                    <td>${r.type ?? '-'}</td>
                    <td class="text-end">${r.quantity ?? '-'}</td>
                    <td class="text-center">
                    ${
                        r.status === 'C'
                        ? '<span class="badge bg-info text-dark">Close</span>'
                        :
                        r.status === 'P'
                        ? '<span class="badge" style="background-color:#FF8C00;"> Partial</span>'
                        :
                        r.status === 'E'
                        ? '<span class="badge bg-warning text-dark">Belum Diterima</span>'
                        : r.status === 'F'
                        ? '<span class="badge bg-success">Sudah Diterima</span>'
                        : r.status === 'C'
                        ? '<span class="badge bg-danger">Batal</span>'
                        : '<span class="badge bg-secondary">-</span>'
                    }
                    </td>

                </tr>
                `).join('') || `<tr><td colspan="4" class="text-center text-muted">Tidak ada data</td></tr>`;

                    const detailHtml = `
                    <tr class="detail-row bg-white">
                    <td colspan="5" class="p-0">
                        <div class="border rounded shadow-sm my-2 px-3 py-2" 
                            style="background:#f8fafc; font-size:14px;">
                        <div class="fw-bold text-dark mb-2">
                            <i class="fas fa-list text-primary me-2"></i> Detail Transaksi ${idtrans}
                        </div>
                        <table class="table table-hover table-sm align-middle mb-0">
                            <thead class="table-light border-top border-bottom">
                            <tr>
                                <th style="width:60px;">No</th>
                                <th>Uraian Barang</th>
                                <th style="width:200px;">Tipe Barang</th>
                                <th style="width:90px;" class="text-end">Qty</th>
                                <th style="width:90px;" >Status</th>

                            </tr>
                            </thead>
                            <tbody>
                            ${(resp.rows ?? []).map((r, i) => `
                                                                            <tr>
                                                                            <td>${i + 1}</td>
                                                                            <td>${r.uraian ?? ''}</td>
                                                                            <td>${r.type ?? '-'}</td>
                                                                            <td class="text-end">${r.quantity ?? '-'}</td>
                                                                            <td class="text-center">
                                                                            ${
                                                                            r.status === 'CL'
                                                                            ? '<span class="badge bg-info">Close</span>'
                                                                            :
                                                                            r.status === 'P'
                                                                            ? '<span class="badge" style="background-color:  	#FF8C00;">Partial</span>'
                                                                            :
                                                                            r.status === 'E'
                                                                            ? '<span class="badge bg-warning">Belum Diterima</span>'
                                                                            : r.status === 'F'
                                                                            ? '<span class="badge bg-success">Sudah Diterima</span>'
                                                                            : r.status === 'C'
                                                                            ? '<span class="badge bg-danger">Batal</span>'
                                                                            : '<span class="badge bg-secondary">-</span>'
                                                                            }                                                                                                                                                                                                 `).join('') || 
                                 `<tr><td colspan="4" class="text-center text-muted py-2">Tidak ada data</td></tr>`}
                            </tbody>
                        </table>
                        </div>
                    </td>
                    </tr>`;

                    $tr.next().remove();
                    $tr.after(detailHtml);
                },
                error: function(xhr, status) {
                    const msg = xhr.responseJSON?.message || `Gagal load detail (${status})`;
                    $tr.next().remove();
                    $tr.after(`
                <tr class="detail-row">
                    <td colspan="5" class="text-center text-danger small py-2">
                        ${msg}
                    </td>
                </tr>
            `);
                }
            });
        });

        $('#list_formpp').on('click', '.btn-print', function() {
            const idtrans = $(this).data('id');

            $.ajax({
                url: '{{ URL::to('/') }}/trsfpp/print/' + idtrans,
                method: 'GET',
                dataType: 'json',
                beforeSend() {
                    Swal.fire({
                        title: 'Mempersiapkan dokumen...',
                        text: 'Mohon tunggu sebentar',
                        didOpen: () => Swal.showLoading(),
                        allowOutsideClick: false
                    });
                },
                success: function(resp) {
                    Swal.close();

                    const header = resp.header || {};
                    const details = resp.details || [];

                    let rowIndex = 1;
                    const checkBase64 =
                        "{{ base64_encode(file_get_contents(storage_path('app/public/centang.png'))) }}";
                    const tickCell = (cond) =>
                        cond ? {
                            image: 'data:image/png;base64,' + checkBase64,
                            width: 10,
                            height: 10,
                            alignment: 'center',
                            margin: [0, 5, 0, 5],
                        } : {
                            text: '',
                            alignment: 'center'
                        };
                    // Format docDefinition tetap pakai versi lamamu 100%
                    const docDefinition = {
                        pageOrientation: 'portrait',
                        pageSize: 'A4',
                        pageMargins: [10, 20, 10, 20],
                        content: [{
                                text: 'Form Permintaan Pembelian (PP) Alat Penunjang',
                                style: 'header',
                                alignment: 'center',
                            },
                            '\n\n',
                            {
                                text: `Department: ${header.department ?? '-'}
                                \n
                                Tanggal: ${header.date ? new Date(header.date).toLocaleDateString('id-ID', 
                                {
                                    day: '2-digit',
                                    month: 'long',
                                    year: 'numeric'
                                })
                                : '-' }`,
                                style: 'subheader',
                            },
                            '\n\n',
                            {
                                table: {
                                    widths: [20, 100, 50, 25, 27, 125, 42, 20, 20, '*'],
                                    body: [
                                        [{
                                                text: 'No',
                                                rowSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 25, 0, 0]
                                            },
                                            {
                                                text: 'Uraian Barang',
                                                rowSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 25, 0, 0]
                                            },
                                            {
                                                text: 'Jenis/Type/Merk/Ukuran',
                                                rowSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 25, 0, 0]
                                            },
                                            {
                                                text: 'Jumlah',
                                                colSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 20, 0, 0]
                                            }, '',
                                            {
                                                text: 'Keperluan',
                                                rowSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 25, 0, 0]
                                            },
                                            {
                                                text: 'Tgl Dibutuhkan',
                                                rowSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 25, 0, 0]
                                            },
                                            {
                                                text: 'Contoh Barang / Sample / Penawaran',
                                                colSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 4, 0, 4]
                                            }, '',
                                            {
                                                text: 'Keterangan',
                                                rowSpan: 2,
                                                alignment: 'center',
                                                bold: true,
                                                margin: [0, 25, 0, 0]
                                            },
                                        ],
                                        ['', '', '',
                                            {
                                                text: 'QTY',
                                                alignment: 'center',
                                                bold: true
                                            },
                                            {
                                                text: 'Satuan',
                                                alignment: 'center',
                                                bold: true
                                            },
                                            '', '',
                                            {
                                                text: 'Ada',
                                                alignment: 'center',
                                                bold: true
                                            },
                                            {
                                                text: 'Tidak Ada',
                                                alignment: 'center',
                                                bold: true
                                            },
                                            ''
                                        ],
                                        ...details.map((d) => ([{
                                                text: rowIndex++,
                                                alignment: 'center'
                                            },
                                            {
                                                text: d.uraian ?? '',
                                                alignment: 'left'
                                            },
                                            {
                                                text: d.type ?? '',
                                                alignment: 'center'
                                            },
                                            {
                                                text: d.quantity ?? '',
                                                alignment: 'center'
                                            },
                                            {
                                                text: d.satuan ?? '',
                                                alignment: 'center'
                                            },
                                            {
                                                text: d.purpose ?? '',
                                                alignment: 'center'
                                            },
                                            {
                                                text: d.required_date ?
                                                    new Date(d.required_date)
                                                    .toLocaleDateString('id-ID', {
                                                        day: '2-digit',
                                                        month: 'long',
                                                        year: 'numeric'
                                                    }) : '',
                                                alignment: 'center'
                                            },

                                            tickCell(Number(d
                                                .sample_available) === 1),
                                            // Kolom “Tidak Ada”
                                            tickCell(Number(d
                                                .sample_available) === 0),
                                            {
                                                text: d.notes ?? '',
                                                alignment: 'left'
                                            },
                                        ]))
                                    ],
                                },
                            },
                            '\n\n',
                            {
                                columns: [{
                                        text: 'Diminta oleh:\n\n\n\n(________________________)',
                                        alignment: 'center',
                                        style: 'sign'
                                    },
                                    {
                                        text: 'Mengetahui:\n\n\n\n(________________________)\nKepala Dept Ybs.',
                                        alignment: 'center',
                                        style: 'sign'
                                    },
                                    {
                                        text: 'Diterima oleh:\n\n\n\n(________________________)\nHRGA',
                                        alignment: 'center',
                                        style: 'sign'
                                    },
                                ],
                            },
                            '\n\n',
                            {
                                text: 'Note: Bagi user yang kurang memahami mengenai spesifikasi barang yang direquest, dapat memberikan penjelasan langsung kepada bagian Purchasing.\n* Coret yang tidak perlu',
                                style: 'note',
                                alignment: 'left',
                            },
                        ],
                        styles: {
                            header: {
                                fontSize: 14,
                                bold: true
                            },
                            subheader: {
                                fontSize: 8,
                                margin: [0, 6, 0, 6]
                            },
                            note: {
                                fontSize: 8
                            },
                            sign: {
                                fontSize: 8
                            },
                        },
                        defaultStyle: {
                            fontSize: 8,
                            margin: [0, 4, 0, 4]
                        },
                    };

                    pdfMake.createPdf(docDefinition).open();
                },
                error(xhr, status) {
                    Swal.fire('Gagal!', 'Tidak dapat memuat data Form PP.', 'error');
                }
            });
        });
    </script>
@endsection