@extends('layouts.master')

@section('title', 'Pemakaian Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .pm-summary-card { border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
    .pm-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; }
    .pm-summary-card .label { font-size: .7rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .pm-summary-card .value { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #222; }
    .pm-summary-card.draft     .icon-wrap { background: #f1f3f5; color: #6c757d; }
    .pm-summary-card.disetujui .icon-wrap { background: #dbeafe; color: #1d6fdf; }
    #tblPemakaian th, #tblPemakaian td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblPemakaian thead th { background: #f8f9fa; }
    #tblPemakaian_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblPemakaian_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblPemakaian_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblPemakaian_wrapper .dataTables_filter label,
    #tblPemakaian_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblPemakaian_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">Pemakaian Barang</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Pemakaian Barang</span>
        </div>
        @can('pemakaian_barang.create')
        <a href="{{ route('penjualan.pemakaian-barang.create') }}" class="btn btn-primary btn-sm px-2 py-1 mt-2 mt-md-0">
            <i class="bx bx-plus me-1"></i> Catat Pemakaian
        </a>
        @endcan
    </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="pm-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-4">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="pm-summary-card disetujui">
                        <div class="icon-wrap"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Divalidasi</div><div class="value" id="sumDisetujui">—</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 Pemakaian Barang</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</option>
                                <option value="draft_pemakaian">Draft</option>
                                <option value="direvisi_ke_draft">Direvisi ke Draft</option>
                                <option value="divalidasi">Divalidasi</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Faskes KSO</label>
                            <select id="filterFaskes" class="form-select form-select-sm" style="width:100%;">
                                <option value="">Semua Faskes</option>
                                @foreach($faskesList as $f)
                                    <option value="{{ $f->id }}">{{ $f->nama }}</option>
                                @endforeach
                            </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 flatpickr" placeholder="dd-mm-yyyy">
                        </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">
                        </div>
                        <div class="col-md-2">
                            <button type="button" class="btn btn-primary btn-sm w-100" id="btnFilter">
                                <i class="bx bx-search me-1"></i> Filter
                            </button>
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblPemakaian" class="table table-hover table-bordered align-middle mb-0 w-100">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:1%">No.</th>
                                    <th class="text-center" style="width:110px">Aksi</th>
                                    <th>No. Pemakaian</th>
                                    <th>Faskes</th>
                                    <th>Nama Pasien</th>
                                    <th>Tgl. Transaksi</th>
                                    <th>Tgl. Pemakaian</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-center">Status</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_URL   = "{{ url('/') }}";
const CSRF       = "{{ csrf_token() }}";
const CAN_CREATE = {{ auth('internal')->user()->can('pemakaian_barang.create') ? 'true' : 'false' }};
const CAN_EDIT   = {{ auth('internal')->user()->can('pemakaian_barang.edit') ? 'true' : 'false' }};
const CAN_DELETE = {{ auth('internal')->user()->can('pemakaian_barang.delete') ? 'true' : 'false' }};
let tbl;

$(function () {
    flatpickr('.flatpickr', { dateFormat: 'd-m-Y' });
    $('#filterFaskes').select2({ placeholder: 'Semua Faskes', allowClear: true, width: '100%' });

    $.get(BASE_URL + '/pemakaian-barang/summary', function (d) {
        $('#sumDraft').text(d.draft);
        $('#sumDisetujui').text(d.disetujui);
    });

    tbl = $('#tblPemakaian').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 + '/pemakaian-barang/data',
            data: d => {
                d.status         = $('#filterStatus').val();
                d.faskes_id      = $('#filterFaskes').val();
                d.tanggal_dari   = $('#filterDari').val();
                d.tanggal_sampai = $('#filterSampai').val();
            },
        },
        columns: [
            {
                data: null, orderable: false, searchable: false,
                render: (_, __, ___, meta) => meta.row + meta.settings._iDisplayStart + 1
            },
            {
                data: 'aksi', orderable: false, searchable: false, className: 'text-center',
                render: (id, _, row) => {
                    let btns = `<a href="${BASE_URL}/pemakaian-barang/${id}" class="btn btn-sm btn-primary px-2 py-1" title="Detail"><i class="bx bx-show"></i></a>`;
                    if (CAN_CREATE) {
                        btns += ` <a href="${BASE_URL}/pemakaian-barang/${id}/copy" class="btn btn-sm btn-info px-2 py-1" title="Copy"><i class="bx bx-copy"></i></a>`;
                    }
                    if (row.status === 'draft_pemakaian' || row.status === 'direvisi_ke_draft') {
                        if (CAN_EDIT) {
                            btns += ` <a href="${BASE_URL}/pemakaian-barang/${id}/edit" class="btn btn-sm btn-warning px-2 py-1" title="Edit"><i class="bx bx-edit"></i></a>`;
                        }
                        if (CAN_DELETE) {
                            btns += ` <button onclick="doHapus(${id})" class="btn btn-sm btn-danger px-2 py-1" title="Hapus"><i class="bx bx-trash"></i></button>`;
                        }
                    }
                    return btns;
                }
            },
            { data: 'nomor_penjualan_kso', render: (v, _, row) => `<a href="${BASE_URL}/pemakaian-barang/${row.id}">${v}</a>` },
            { data: 'nama_faskes' },
            { data: 'nama_pasien' },
            { data: 'tanggal_fmt' },
            { data: 'tgl_pemakaian_fmt' },
            { data: 'total_fmt', className: 'text-end' },
            { data: 'status_badge', className: 'text-center', orderable: false },
        ],
        order: [[0, 'desc']],
        language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
    });

    $('#btnFilter').on('click', () => tbl.draw());
});

function doHapus(id) {
    Swal.fire({ title:'Hapus Draft?', text:'Data ini akan dihapus permanen.',
        icon:'warning', showCancelButton:true, confirmButtonColor:'#dc3545',
        confirmButtonText:'Ya, Hapus', cancelButtonText:'Batal' })
    .then(r => {
        if (!r.isConfirmed) return;
        $.ajax({ url:`${BASE_URL}/pemakaian-barang/${id}`, method:'POST',
            data:{ _token:CSRF, _method:'DELETE' },
            success: () => { Swal.fire({ icon:'success', title:'Terhapus', timer:1200, showConfirmButton:false }).then(() => tbl.draw()); },
            error:   () => Swal.fire('Gagal','Tidak dapat menghapus.','error') });
    });
}
</script>
@endsection