@extends('layouts.master')

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

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .badge-draft        { background:#e5e7eb; color:#374151; }
    .badge-diajukan     { background:#dbeafe; color:#1d4ed8; }
    .badge-diproses     { background:#fef9c3; color:#854d0e; }
    .badge-selesai               { background:#d1fae5; color:#065f46; }
    .badge-selesai_kurang_lengkap { background:#fef3c7; color:#92400e; }
    .badge-dikembalikan { background:#fee2e2; color:#991b1b; }
    .badge-ditolak      { background:#fce7f3; color:#9d174d; }
    #tblPPB th, #tblPPB td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblPPB thead th { background: #f8f9fa; }
    #tblPPB_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblPPB_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblPPB_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; min-width: 70px; }
    #tblPPB_wrapper .dataTables_filter label,
    #tblPPB_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblPPB_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">Permintaan Barang</p>
            <span class="fs-13 text-muted">Mutasi Barang &rarr; Permintaan Barang</span>
        </div>
        <a href="{{ route('permintaan-pengeluaran.create') }}" class="btn btn-primary btn-sm px-2 py-1 mt-2 mt-md-0">
            <i class="bx bx-plus me-1"></i> Buat Permintaan Barang
        </a>
    </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 Permintaan 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-3">
                            <label class="form-label mb-1 small fw-semibold">Faskes</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">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="diproses">Diproses</option>
                                <option value="selesai">Selesai</option>
                                <option value="selesai_kurang_lengkap">Selesai Kurang Lengkap</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="tblPPB" 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:110px">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>

<form id="formAksi" method="POST" style="display:none">@csrf</form>
@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 };
function defaultDari() {
    const d = new Date();
    return `01-${String(d.getMonth()+1).padStart(2,'0')}-${d.getFullYear()}`;
}
function defaultSampai() {
    const d = new Date();
    return `${String(d.getDate()).padStart(2,'0')}-${String(d.getMonth()+1).padStart(2,'0')}-${d.getFullYear()}`;
}

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

$('#filterFaskes').select2({ placeholder: 'Semua Faskes', allowClear: true, width: '100%' });
$('#filterFaskes').on('change', () => tbl.ajax.reload());

const statusBadge = {
    draft:        '<span class="badge badge-draft">Draft</span>',
    diajukan:     '<span class="badge badge-diajukan">Diajukan</span>',
    diproses:     '<span class="badge badge-diproses">Diproses</span>',
    selesai:                '<span class="badge badge-selesai">Selesai</span>',
    selesai_kurang_lengkap: '<span class="badge badge-selesai_kurang_lengkap">Selesai Kurang Lengkap</span>',
    dikembalikan: '<span class="badge badge-dikembalikan">Dikembalikan</span>',
    ditolak:      '<span class="badge badge-ditolak">Ditolak</span>',
};

const tbl = $('#tblPPB').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 + '/permintaan-pengeluaran/datatable',
        type: 'GET',
        data: d => {
            d.faskes  = $('#filterFaskes').val();
            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}/permintaan-pengeluaran/${id}" class="btn btn-info btn-sm px-2 py-1 me-1" title="Lihat"><i class="bx bx-show fs-14"></i></a>`;
              if (row.status === 'draft' || row.status === 'dikembalikan') {
                  btns += `<a href="${BASE_URL}/permintaan-pengeluaran/${id}/edit" class="btn btn-warning btn-sm px-2 py-1 me-1" title="Edit"><i class="bx bx-edit fs-14"></i></a>`;
                  btns += `<button onclick="hapus(${id})" class="btn btn-danger btn-sm px-2 py-1" title="Hapus"><i class="bx bx-trash fs-14"></i></button>`;
              }
              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: v => statusBadge[v] ?? v },
    ],
    order: [[3, 'desc']],
    pageLength: 10,
    language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' },
});

$('#filterStatus').on('change', () => tbl.ajax.reload());
$('#btnFilter').on('click', () => tbl.ajax.reload());
$('#btnReset').on('click', () => {
    $('#filterFaskes').val('').trigger('change.select2');
    $('#filterStatus').val('');
    document.getElementById('filterDari')._flatpickr?.clear();
    document.getElementById('filterSampai')._flatpickr?.clear();
    tbl.ajax.reload();
});

function hapus(id) {
    Swal.fire({
        title: 'Hapus pengiriman ini?',
        text: 'Data yang dihapus tidak dapat dikembalikan.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc2626',
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        $.ajax({
            url: BASE_URL + '/permintaan-pengeluaran/' + id,
            method: 'POST',
            data: { _method: 'DELETE', _token: '{{ csrf_token() }}' },
            success: r => {
                if (r.success) { tbl.ajax.reload(); Swal.fire({ icon:'success', title:'Terhapus', timer:1200, showConfirmButton:false }); }
            },
            error: xhr => {
                Swal.fire({ icon:'error', title:'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
            }
        });
    });
}
</script>
@endsection