@extends('layouts.master')

@section('title', 'Persetujuan PO')

@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.menunggu .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    .po-summary-card.nilai    .icon-wrap { background: #f3e8ff; color: #7c3aed; }
    /* ── 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; }
    #tblPersetujuan th, #tblPersetujuan td { vertical-align: middle; font-size: .85rem; border-color: #e9ecef !important; }
    #tblPersetujuan thead th { white-space: nowrap; }
    #tblPersetujuan tbody td { white-space: nowrap; }
    #tblPersetujuan tbody td:nth-child(4) { white-space: normal; }
    #tblPersetujuan_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblPersetujuan_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblPersetujuan_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblPersetujuan_wrapper .dataTables_filter label,
    #tblPersetujuan_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblPersetujuan_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">Persetujuan PO</p>
            <span class="fs-13 text-muted">Pengadaan &rarr; Persetujuan PO</span>
        </div>
    </div>

    {{-- ══ Summary Cards ════════════════════════════════════════════ --}}
    <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 menunggu">
                        <div class="icon-wrap"><i class="bx bx-time-five"></i></div>
                        <div><div class="label">Menunggu Persetujuan</div><div class="value" id="sumJumlah">—</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 nilai">
                        <div class="icon-wrap"><i class="bx bx-money"></i></div>
                        <div><div class="label">Total Nilai</div><div class="value" id="sumNilai">—</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 — Menunggu Persetujuan</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-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="tblPersetujuan" 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:80px">Aksi</th>
                                    <th style="width:160px">Nomor PO</th>
                                    <th style="min-width:180px">Supplier</th>
                                    <th style="width:110px">Tgl. Input</th>
                                    <th style="width:130px">Total Harga</th>
                                    <th style="width:130px">Diajukan Oleh</th>
                                    <th style="width:140px">Tgl. Diajukan</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_PO    = '{{ url("pengadaan/persetujuan-po") }}';
const SUMMARY_URL = '{{ route("pengadaan.persetujuan-po.summary") }}';

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());

const tbl = $('#tblPersetujuan').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url : '{{ route("pengadaan.persetujuan-po.data") }}',
        data: d => {
            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: id => `<a href="${BASE_PO}/${id}" class="btn btn-info btn-sm px-2 py-1" title="Detail"><i class="bx bx-show fs-14"></i></a>` },
        { data: 'nomor_po' },
        { data: 'nama_produsen' },
        { data: 'tanggal_fmt' },
        { data: 'total_harga_fmt' },
        { data: 'diajukan_oleh_nama', defaultContent: '—' },
        { data: 'diajukan_fmt' },
    ],
    order   : [[7, 'desc']],
    language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
});

function loadSummary() {
    $.get(SUMMARY_URL, d => {
        document.getElementById('sumJumlah').textContent = d.jumlah;
        document.getElementById('sumNilai').textContent  = d.total_nilai;
    });
}
loadSummary();

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

function resetFilter() {
    $('#filterProdusen').val('').trigger('change');
    document.getElementById('filterDari')._flatpickr.clear();
    document.getElementById('filterSampai')._flatpickr.clear();
    tbl.draw();
    loadSummary();
}
</script>
@endsection