@extends('layouts.master')

@section('title', 'Purchase Order')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    /* ── Summary Cards ── */
    .po-summary-card { border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
    .po-summary-card .icon-wrap { width: 36px; height: 36px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .po-summary-card .label { font-size: .7rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .po-summary-card .value { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #222; }
    .po-summary-card.nilai .value { font-size: .88rem; }
    .po-summary-card.draft     .icon-wrap { background: #f1f3f5; color: #6c757d; }
    .po-summary-card.diajukan  .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    .po-summary-card.direvisi  .icon-wrap { background: #fef9c3; color: #b45309; }
    .po-summary-card.disetujui .icon-wrap { background: #d1fae5; color: #059669; }
    .po-summary-card.ditolak   .icon-wrap { background: #fee2e2; color: #dc2626; }
    .po-summary-card.nilai             .icon-wrap { background: #f3e8ff; color: #7c3aed; }
    .po-summary-card.diterima-sebagian .icon-wrap { background: #cffafe; color: #0891b2; }
    .po-summary-card.selesai-diterima  .icon-wrap { background: #ccfbf1; color: #0d9488; }
    /* ── DataTable ── */
    .select2-container .select2-selection--single { height: 31px !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 29px !important; font-size: .875rem; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px !important; }
    .select2-dropdown { font-size: .875rem; }
    #tblPO th, #tblPO td { vertical-align: middle; font-size: .85rem; border-color: #e9ecef !important; }
    #tblPO thead th { white-space: nowrap; }
    #tblPO tbody td { white-space: nowrap; }
    #tblPO tbody td:nth-child(4) { white-space: normal; }
    #tblPO_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblPO_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblPO_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblPO_wrapper .dataTables_filter label,
    #tblPO_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblPO_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">Purchase Order</p>
            <span class="fs-13 text-muted">Pengadaan &rarr; Purchase Order</span>
        </div>
    </div>

    {{-- ══ Summary Cards ════════════════════════════════════════════ --}}
    <div id="summaryRow">
        {{-- Row 1: Draft, Diajukan, Direvisi, Disetujui --}}
        <div class="row g-2 mb-2">
            <div class="col-6 col-md-3">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card draft">
                            <div class="icon-wrap"><i class="bx bx-file-blank"></i></div>
                            <div><div class="label">Draft</div><div class="value" id="sumDraft">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card diajukan">
                            <div class="icon-wrap"><i class="bx bx-send"></i></div>
                            <div><div class="label">Diajukan</div><div class="value" id="sumDiajukan">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card direvisi">
                            <div class="icon-wrap"><i class="bx bx-revision"></i></div>
                            <div><div class="label">Direvisi</div><div class="value" id="sumDirevisi">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card disetujui">
                            <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                            <div><div class="label">Disetujui</div><div class="value" id="sumDisetujui">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Row 2: Ditolak, Diterima Sebagian, Selesai Diterima --}}
        <div class="row g-2 mb-3">
            <div class="col-6 col-md-4">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card ditolak">
                            <div class="icon-wrap"><i class="bx bx-x-circle"></i></div>
                            <div><div class="label">Ditolak</div><div class="value" id="sumDitolak">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card diterima-sebagian">
                            <div class="icon-wrap"><i class="bx bx-package"></i></div>
                            <div><div class="label">Diterima Sebagian</div><div class="value" id="sumDiterimaSebagian">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4">
                <div class="card custom-card mb-0">
                    <div class="card-body p-2">
                        <div class="po-summary-card selesai-diterima">
                            <div class="icon-wrap"><i class="bx bx-check-double"></i></div>
                            <div><div class="label">Selesai Diterima</div><div class="value" id="sumSelesaiDiterima">—</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </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 Purchase Order</div>
                    @can('po.create')
                    <a href="{{ route('pengadaan.po.create') }}" class="btn btn-primary btn-sm">
                        <i class="bx bx-plus me-1"></i> Buat PO
                    </a>
                    @endcan
                </div>

                {{-- Filter --}}
                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-3">
                            <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="draft">Draft</option>
                                <option value="diajukan">Diajukan</option>
                                <option value="direvisi">Direvisi</option>
                                <option value="disetujui">Disetujui</option>
                                <option value="ditolak">Ditolak</option>
                                <option value="diterima_sebagian">Diterima Sebagian</option>
                                <option value="selesai_diterima">Selesai Diterima</option>
                                <option value="dibatalkan">Ditutup</option>
                                <option value="habis_masa_berlaku">Habis Masa Berlaku</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label mb-1 small fw-semibold">Supplier</label>
                            <select id="filterProdusen" class="form-select form-select-sm">
                                <option value="">Semua Supplier</option>
                                @foreach($produsenList as $p)
                                <option value="{{ $p->id }}">{{ $p->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari Tanggal</label>
                            <input type="text" id="filterDari" class="form-control form-control-sm flatpickr" 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 flatpickr" placeholder="dd-mm-yyyy" readonly>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-outline-secondary btn-sm w-100" onclick="resetFilter()">Reset</button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblPO" 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:145px">Aksi</th>
                                    <th style="width:160px">Nomor PO</th>
                                    <th style="min-width:180px">Supplier</th>
                                    <th style="width:110px">Tanggal</th>
                                    <th style="width:130px">Total Harga</th>
                                    <th class="text-center" style="width:90px">Status</th>
                                    <th style="width:130px">Dibuat Oleh</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ══ Modal Preview PDF ══ --}}
<div class="modal fade" id="modalPdfPreview" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width:88vw">
        <div class="modal-content" style="height:90vh">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0"><i class="bx bx-file-blank me-2"></i>Preview Purchase Order</h6>
                <div class="d-flex gap-2 ms-auto me-2">
                    <a id="btnDlPdf" href="#" target="_blank" class="btn btn-success btn-sm">
                        <i class="bx bx-download me-1"></i> Download PDF
                    </a>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                        onclick="document.getElementById('iframePdf').src=''"></button>
            </div>
            <div class="modal-body p-0" style="flex:1;overflow:hidden">
                <iframe id="iframePdf" src="" style="width:100%;height:100%;border:none"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_PO      = '{{ url("pengadaan/purchase-order") }}';
const SUMMARY_URL  = '{{ route("pengadaan.po.summary") }}';
const ROUTES = {
    data   : '{{ route("pengadaan.po.data") }}',
    show   : (id) => `${BASE_PO}/${id}`,
    edit   : (id) => `${BASE_PO}/${id}/edit`,
    destroy: (id) => `${BASE_PO}/${id}`,
    pdf          : (id) => `${BASE_PO}/${id}/pdf`,
    pdfTanpaHarga: (id) => `${BASE_PO}/${id}/pdf-tanpa-harga`,
};

const CAN = {
    edit  : {{ auth('internal')->user()->can('po.edit')   ? 'true' : 'false' }},
    delete: {{ auth('internal')->user()->can('po.delete') ? 'true' : 'false' }},
    view  : {{ auth('internal')->user()->can('po.view')   ? 'true' : 'false' }},
};

flatpickr('.flatpickr', { dateFormat: 'd-m-Y', locale: 'id' });

$('#filterProdusen').select2({
    dropdownParent: $('body'),
    placeholder   : 'Semua Supplier',
    allowClear    : true,
    width         : '100%',
});
$('#filterProdusen').on('select2:clear', () => tbl.draw());

// ── DataTables ────────────────────────────────────────────────
const tbl = $('#tblPO').DataTable({
    processing : true,
    serverSide : true,
    ajax       : {
        url : ROUTES.data,
        data: (d) => {
            d.status        = $('#filterStatus').val();
            d.produsen_id   = $('#filterProdusen').val();
            d.tanggal_dari  = $('#filterDari').val();
            d.tanggal_sampai= $('#filterSampai').val();
        },
    },
    columns: [
        { data: null, orderable: false, searchable: false, className: 'text-center',
          render: (_, __, ___, meta) => meta.row + meta.settings._iDisplayStart + 1 },
        { data: 'aksi', orderable: false, searchable: false, className: 'text-center',
          render: renderAksi },
        { data: 'nomor_po' },
        { data: 'nama_produsen' },
        { data: 'tanggal_fmt' },
        { data: 'total_fmt' },
        { data: 'status_badge', orderable: false, className: 'text-center' },
        { data: 'dibuat_oleh_nama' },
    ],
    order   : [[4, 'desc']],
    language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
});

function renderAksi(id, _, row) {
    let btn = '';
    if (CAN.view) {
        btn += `<a href="${ROUTES.show(id)}" class="btn btn-info btn-sm px-2 py-1" title="Detail"><i class="bx bx-show fs-14"></i></a>`;
        btn += `<div class="dropdown d-inline-block">
            <button class="btn btn-success btn-sm px-2 py-1 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" title="Unduh PDF"><i class="bx bx-download fs-14"></i></button>
            <ul class="dropdown-menu dropdown-menu-end" style="font-size:.8rem;min-width:160px">
                <li><a class="dropdown-item py-1" href="#" onclick="previewPdf(${id},'harga');return false;"><i class="bx bx-money me-2 text-success"></i>Dengan Harga</a></li>
                <li><a class="dropdown-item py-1" href="#" onclick="previewPdf(${id},'tanpa-harga');return false;"><i class="bx bx-file-blank me-2 text-secondary"></i>Tanpa Harga</a></li>
            </ul>
        </div>`;
    }
    if (CAN.edit && (row.status === 'draft' || row.status === 'direvisi')) {
        btn += `<a href="${ROUTES.edit(id)}" class="btn btn-warning btn-sm px-2 py-1" title="Edit"><i class="bx bx-edit fs-14"></i></a>`;
    }
    if (CAN.delete && row.status === 'draft') {
        btn += `<button class="btn btn-danger btn-sm px-2 py-1" onclick="hapusPO(${id}, '${row.nomor_po}')" title="Hapus"><i class="bx bx-trash fs-14"></i></button>`;
    }
    return btn ? `<div class="d-flex gap-1 justify-content-center flex-nowrap">${btn}</div>` : '-';
}

// ── Summary ───────────────────────────────────────────────────
function loadSummary() {
    $.get(SUMMARY_URL, {
        tanggal_dari  : $('#filterDari').val(),
        tanggal_sampai: $('#filterSampai').val(),
    }, function (d) {
        document.getElementById('sumDraft').textContent     = d.draft;
        document.getElementById('sumDiajukan').textContent  = d.diajukan;
        document.getElementById('sumDirevisi').textContent  = d.direvisi;
        document.getElementById('sumDisetujui').textContent       = d.disetujui;
        document.getElementById('sumDitolak').textContent         = d.ditolak;
        document.getElementById('sumDiterimaSebagian').textContent = d.diterima_sebagian;
        document.getElementById('sumSelesaiDiterima').textContent  = d.selesai_diterima;
        document.getElementById('sumNilai').textContent     = d.total_nilai;
    });
}
loadSummary();

// ── Filter ────────────────────────────────────────────────────
$('#filterStatus').on('change', () => tbl.draw());
$('#filterProdusen').on('change', () => tbl.draw());
$('#filterDari, #filterSampai').on('change', () => { tbl.draw(); loadSummary(); });

function resetFilter() {
    $('#filterStatus').val('');
    $('#filterProdusen').val('').trigger('change');
    document.getElementById('filterDari')._flatpickr.clear();
    document.getElementById('filterSampai')._flatpickr.clear();
    tbl.draw();
    loadSummary();
}

// ── Hapus ─────────────────────────────────────────────────────
function hapusPO(id, nomor) {
    Swal.fire({
        title: 'Hapus PO?',
        html : `Nomor <strong>${nomor}</strong> akan dihapus permanen.<br>Lanjutkan?`,
        icon : 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor : '#6c757d',
        confirmButtonText : 'Ya, hapus',
        cancelButtonText  : 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        $.ajax({
            url   : ROUTES.destroy(id),
            method: 'DELETE',
            data  : { _token: '{{ csrf_token() }}' },
            success: (r) => {
                if (r.success) {
                    Swal.fire({ icon: 'success', title: 'Berhasil', text: r.message, timer: 1800, showConfirmButton: false });
                    tbl.draw(false);
                }
            },
            error: (xhr) => {
                Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error');
            },
        });
    });
}

function previewPdf(id, mode) {
    const url = mode === 'tanpa-harga' ? ROUTES.pdfTanpaHarga(id) : ROUTES.pdf(id);
    document.getElementById('iframePdf').src  = url;
    document.getElementById('btnDlPdf').href  = url;
    new bootstrap.Modal(document.getElementById('modalPdfPreview')).show();
}

// Kosongkan iframe saat modal ditutup agar tidak loading di background
document.getElementById('modalPdfPreview').addEventListener('hidden.bs.modal', function () {
    document.getElementById('iframePdf').src = '';
});
</script>
@endsection