@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">{{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center gap-2">
                                        <a href="{{ url('prapr') }}" class="btn btn-secondary mb-0">
                                            <i class="fas fa-list me-1"></i>
                                            <span class="font-weight-bold">Kembali ke List</span>
                                        </a>
                                        <div class="d-flex align-items-center gap-2">
                                            <label class="text-sm mb-0">Status</label>
                                            <select name="status" id="statusFilter"
                                                class="form-select form-select-xxl px-4 py-2" style="width:auto;">
                                                @php $selStatus = $filters['status'] ?? ''; @endphp
                                                <option value="">Semua</option>
                                                <option value="approve" {{ $selStatus === 'approve' ? 'selected' : '' }}>
                                                    Approve</option>
                                                <option value="reject" {{ $selStatus === 'reject' ? 'selected' : '' }}>
                                                    Reject</option>
                                                <option value="cancel" {{ $selStatus === 'cancel' ? 'selected' : '' }}>
                                                    Cancel</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display nowrap" id="history_{{ $dmenu }}"
                                    style="width:100%;">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="font-weight-bolder">No</th>
                                            <th class="font-weight-bolder">Tgl Pengajuan</th>
                                            <th class="font-weight-bolder">No PRA PR</th>
                                            <th class="font-weight-bolder">No Order</th>
                                            <th class="font-weight-bolder">No Aset</th>
                                            <th class="font-weight-bolder">Pemohon</th>
                                            <th class="font-weight-bolder">Dept</th>
                                            <th class="font-weight-bolder">Nama Barang</th>
                                            <th class="font-weight-bolder">Qty</th>
                                            <th class="font-weight-bolder">Tgl Diperlukan</th>
                                            <th class="font-weight-bolder">Deskripsi</th>
                                            <th class="font-weight-bolder">Status</th>
                                            <th class="font-weight-bolder">Processed At</th>
                                            <th class="font-weight-bolder">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $rowNum = 1; @endphp
                                        @foreach ($rows as $row)
                                            @php
                                                $statusColors = [
                                                    'entry' => '#6c757d',
                                                    'pending' => '#ffc107',
                                                    'finish' => '#28a745',
                                                    'draft' => '#6c757d',
                                                    'final' => '#ffc107',
                                                    'parsial' => '#17a2b8',
                                                    'approve' => '#28a745',
                                                    'reject' => '#dc3545',
                                                    'cancel' => '#6c757d',
                                                    'Pending Head' => '#ffc107',
                                                    'Pending PPIC' => '#ffc107',
                                                ];

                                                $rawDetailStatus = $row->detail_status ?? 'draft';
                                                $badgeColor = $statusColors[$rawDetailStatus] ?? '#6c757d';

                                                $userRoles = $users_rules ?? [];
                                                $isApprover =
                                                    in_array('head', $userRoles) || in_array('ppic', $userRoles);

                                                $displayStatus =
                                                    $isApprover &&
                                                    in_array($rawDetailStatus, ['Pending Head', 'Pending PPIC'])
                                                        ? 'Pending'
                                                        : $rawDetailStatus;

                                                $processedAt = $row->processed_at
                                                    ? date('d M Y H:i', strtotime($row->processed_at))
                                                    : '-';
                                            @endphp
                                            <tr>
                                                <td><span class="text-sm font-weight-bold">{{ $rowNum++ }}</span></td>
                                                <td><span
                                                        class="text-sm">{{ date('d M y', strtotime($row->tanggal_pengajuan)) }}</span>
                                                </td>
                                                <td><span class="text-sm font-weight-bold">{{ $row->no_prapr }}</span></td>
                                                <td><span class="text-sm">{{ $row->no_order ?? '-' }}</span></td>
                                                <td><span class="text-sm">{{ $row->no_aset ?? '-' }}</span></td>
                                                <td><span class="text-sm">{{ strtoupper($row->user_name) }}</span></td>
                                                <td><span
                                                        class="text-sm">{{ strtoupper($row->nama_departemen ?? '-') }}</span>
                                                </td>
                                                <td><span class="text-sm">{{ strtoupper($row->nama_barang ?? '-') }}</span>
                                                </td>
                                                <td><span class="text-sm">{{ $row->qty ?? '-' }}
                                                        {{ strtoupper($row->satuan ?? '') }}</span></td>
                                                <td><span
                                                        class="text-sm">{{ $row->tanggal_dibutuhkan ? date('d.m.Y', strtotime($row->tanggal_dibutuhkan)) : '-' }}</span>
                                                </td>
                                                <td><span class="text-sm">{{ strtoupper($row->deskripsi ?? '-') }}</span>
                                                </td>
                                                <td>
                                                    <span class="badge badge-sm"
                                                        style="background-color: {{ $badgeColor }}; color: #ffffff;">{{ strtoupper($displayStatus) }}</span>
                                                </td>
                                                {{-- <td><span class="text-sm">{{ $row->processed_by }}</span></td> --}}
                                                {{-- <td>
                                                    <span
                                                        class="text-sm">{{ strtoupper($row->approver_name ?? '-') }}</span>
                                                </td> --}}
                                                <td><span class="text-sm">{{ $processedAt }}</span></td>
                                                <td>
                                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                        title="View History"
                                                        onclick="window.location='{{ url($url_menu . '/show/' . $row->detail_id) }}'">
                                                        <i class="fas fa-eye me-1"></i><span class="font-weight-bold">
                                                            View</span>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {
            const tableId = 'history_{{ $dmenu }}';
            const tableSelector = '#' + tableId;
            const statusFilter = document.getElementById('statusFilter');

            if ($.fn.DataTable.isDataTable('#history_{{ $dmenu }}')) {
                $(tableSelector).DataTable().destroy();
            }

            $.fn.dataTable.ext.search.push(function(settings, data) {
                if (settings.nTable.id !== tableId) {
                    return true;
                }

                const selectedStatus = (statusFilter?.value || '').toLowerCase();
                if (!selectedStatus) {
                    return true;
                }

                const rawStatusCell = data[11] || '';
                const cleanStatusText = rawStatusCell.replace(/<[^>]*>/g, '').trim().toLowerCase();
                return cleanStatusText === selectedStatus;
            });

            const dt = $(tableSelector).DataTable({
                order: [
                    [13, 'desc']
                ],
                pageLength: 25,
                responsive: true,
                // Hindari scrollbar horizontal DataTables di tengah konten
                scrollX: false,
                autoWidth: true,
                columnDefs: [{
                    targets: -1,
                    orderable: false
                }],
                dom: '<"row d-flex justify-content-between align-items-center mb-3"<"col-lg-12 d-flex justify-content-between align-items-center"<"d-flex align-items-center gap-3"Bl>f>>rtip',
                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                        className: 'btn btn-secondary mb-0',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        className: 'btn btn-secondary mb-0',
                        orientation: 'landscape',
                        pageSize: 'LEGAL',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-primary"></i><span class="font-weight-bold"> Print</span>',
                        className: 'btn btn-secondary mb-0',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        }
                    }
                ],
                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)',
                    paginate: {
                        first: 'Awal',
                        last: 'Akhir',
                        next: 'Selanjutnya',
                        previous: 'Sebelumnya'
                    }
                }
            });

            statusFilter?.addEventListener('change', function() {
                dt.draw();
            });

            dt.draw();
            dt.columns.adjust();
            $('.dt-button').removeClass('dt-button');
        });
    </script>
    <style>
        /* Wrapper agar horizontal scroll berada di bawah tabel, bukan di tengah */
        .table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Perbaiki potensi gap pada footer/no-footer */
        table.dataTable.no-footer {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        /* Pastikan header tidak terpotong ketika lebar tabel melebihi kontainer */
        .dataTables_wrapper .row>.col-sm-12 {
            overflow: visible;
        }
    </style>
@endpush