@extends('layouts.master')

@section('title', 'Proses Pengiriman')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .badge-diajukan { background:#dbeafe; color:#1d4ed8; }
    .badge-diproses { background:#fef9c3; color:#854d0e; }
    .badge-selesai               { background:#dcfce7; color:#166534; }
    .badge-selesai_kurang_lengkap { background:#fef3c7; color:#92400e; }
    .badge-ditolak  { background:#fce7f3; color:#9d174d; }
    #tblProses th, #tblProses td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblProses thead th { background: #f8f9fa; }
    #tblProses_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblProses_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblProses_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblProses_wrapper .dataTables_filter label,
    #tblProses_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblProses_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Proses Pengiriman</p>
            <span class="fs-13 text-muted">Mutasi Barang &rarr; Proses Pengiriman</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Pengiriman Menunggu Proses</div>
                </div>

                {{-- Filter --}}
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Status</label>
                            <select id="filterStatus" class="form-select form-select-sm">
                                <option value="">Semua Status</option>
                                <option value="diajukan">Diajukan</option>
                                <option value="diproses">Diproses</option>
                                <option value="selesai">Selesai</option>
                                <option value="selesai_kurang_lengkap">Selesai Kurang Lengkap</option>
                                <option value="ditolak">Ditolak</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari</label>
                            <input type="text" id="filterDari" class="form-control form-control-sm" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Sampai</label>
                            <input type="text" id="filterSampai" class="form-control form-control-sm" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-auto">
                            <button id="btnFilter" class="btn btn-primary btn-sm px-2 py-1">
                                <i class="bx bx-search me-1"></i> Cari
                            </button>
                            <button id="btnReset" class="btn btn-outline-secondary btn-sm px-2 py-1 ms-1">Reset</button>
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblProses" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:45px">No.</th>
                                    <th class="text-center" style="width:120px">Aksi</th>
                                    <th>Nomor</th>
                                    <th>Tanggal</th>
                                    <th>Faskes / Tujuan</th>
                                    <th>Dibuat Oleh</th>
                                    <th class="text-center" style="width:70px">Item</th>
                                    <th class="text-center" style="width:100px">Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Preview PDF --}}
<div class="modal fade" id="modalPdfPreview" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0" id="modalPdfTitle">Preview</h6>
                <div class="d-flex align-items-center gap-2">
                    <a id="btnUnduhPdf" href="#" target="_blank" class="btn btn-sm btn-outline-primary px-2 py-1"><i class="bx bx-download me-1"></i>Unduh</a>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            </div>
            <div class="modal-body p-0">
                <iframe id="iframePdf" src="" style="width:100%;height:80vh;border:none;"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL = '{{ url('') }}';
const fpOpts = { dateFormat: 'd-m-Y', allowInput: false };

flatpickr('#filterDari',   { ...fpOpts });
flatpickr('#filterSampai', { ...fpOpts });

const tbl = $('#tblProses').DataTable({
    processing: true,
    serverSide: true,
    dom: '<"d-flex align-items-center justify-content-between mb-2"lf>rt<"d-flex justify-content-between mt-2"ip>',
    ajax: {
        url: BASE_URL + '/proses-pengiriman/datatable',
        type: 'GET',
        data: d => {
            d.status = $('#filterStatus').val();
            d.dari   = $('#filterDari').val();
            d.sampai = $('#filterSampai').val();
        },
    },
    columns: [
        { data: null, orderable: false, searchable: false, className: 'text-center',
          render: (_, __, ___, meta) => meta.row + meta.settings._iDisplayStart + 1 },
        { data: 'id', orderable: false, searchable: false, className: 'text-center',
          render: (id, _, row) => {
            let btns = `<a href="${BASE_URL}/proses-pengiriman/${id}" class="btn btn-info btn-sm px-2 py-1 me-1" title="Lihat"><i class="bx bx-show fs-14"></i></a>`;
            return btns;
          }
        },
        { data: 'nomor' },
        { data: 'tanggal' },
        { data: 'nama_faskes' },
        { data: 'nama_dibuat_oleh' },
        { data: 'jumlah_item', className: 'text-center' },
        { data: 'status', className: 'text-center',
          render: s => {
            const map = {
                diajukan : ['badge-diajukan', 'Diajukan'],
                diproses : ['badge-diproses', 'Diproses'],
                selesai               : ['badge-selesai',               'Selesai'],
                selesai_kurang_lengkap: ['badge-selesai_kurang_lengkap', 'Selesai Kurang Lengkap'],
                ditolak  : ['badge-ditolak',  'Ditolak'],
            };
            const [cls, label] = map[s] ?? ['badge-secondary', s];
            return `<span class="badge ${cls}">${label}</span>`;
          }
        },
    ],
    order: [],
    pageLength: 10,
    language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
});

$('#btnFilter').on('click', () => tbl.ajax.reload());
function previewPdfModal(url, title) {
    document.getElementById('iframePdf').src = url;
    document.getElementById('btnUnduhPdf').href = url;
    document.getElementById('modalPdfTitle').textContent = title;
    new bootstrap.Modal(document.getElementById('modalPdfPreview')).show();
}

$('#filterStatus').on('change', () => tbl.ajax.reload());
$('#btnReset').on('click', () => {
    $('#filterStatus').val('');
    document.getElementById('filterDari')._flatpickr?.clear();
    document.getElementById('filterSampai')._flatpickr?.clear();
    tbl.ajax.reload();
});
</script>
@endsection