@extends('layouts.master')

@section('title', 'Penjualan Langsung')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    #tblPenjualan th, #tblPenjualan td { vertical-align: middle; font-size: .83rem; border-color: #e9ecef !important; }
    #tblPenjualan thead th { background: #f8f9fa; }
    .summary-card { border-radius: 10px; padding: 14px 18px; }
</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">Penjualan Langsung</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Penjualan Langsung</span>
        </div>
        <a href="{{ route('penjualan.create') }}" class="btn btn-primary btn-sm mt-2 mt-md-0">
            <i class="bx bx-plus me-1"></i> Buat Penjualan
        </a>
    </div>

    {{-- Summary Cards --}}
    <div class="row g-3 mb-3" id="summaryCards">
        <div class="col-6 col-md-3">
            <div class="card custom-card summary-card">
                <div class="text-muted fs-12">Draft</div>
                <div class="fw-bold fs-22 text-secondary" id="sumDraft">—</div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card custom-card summary-card">
                <div class="text-muted fs-12">Selesai Bulan Ini</div>
                <div class="fw-bold fs-22 text-success" id="sumSelesai">—</div>
            </div>
        </div>
        <div class="col-6 col-md-6">
            <div class="card custom-card summary-card">
                <div class="text-muted fs-12">Total Nilai Bulan Ini</div>
                <div class="fw-bold fs-22 text-primary" id="sumTotal">—</div>
            </div>
        </div>
    </div>

    {{-- Filter --}}
    <div class="card custom-card mb-3">
        <div class="card-body py-2">
            <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="divalidasi">Upload eFaktur PPN</option>
                        <option value="verifikasi_fisik">Verifikasi Fisik</option>
                    </select>
                </div>
                <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">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 d-flex gap-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>
    </div>

    {{-- Tabel --}}
    <div class="card custom-card">
        <div class="card-body">
            <div class="table-responsive">
                <table id="tblPenjualan" class="table table-bordered mb-0 w-100">
                    <thead class="table-light">
                        <tr>
                            <th style="width:1%">No.</th>
                            <th class="text-center" style="width:80px">Aksi</th>
                            <th>No. Penjualan</th>
                            <th>Faskes</th>
                            <th>Nakes</th>
                            <th>Tanggal</th>
                            <th class="text-end">Total</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Faktur PPN</th>
                        </tr>
                    </thead>
                </table>
            </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>Faktur Penjualan</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_URL = "{{ url('/') }}";
let tbl;

$(function () {
    flatpickr('.flatpickr', { dateFormat: 'd-m-Y' });

    $('#filterFaskes').select2({ placeholder: 'Semua Faskes', allowClear: true, width: '100%' });

    $.get(BASE_URL + '/penjualan/summary', function (d) {
        $('#sumDraft').text(d.draft);
        $('#sumSelesai').text(d.selesai_bulan);
        $('#sumTotal').text('Rp ' + d.total_bulan);
    });

    tbl = $('#tblPenjualan').DataTable({
        processing: true, serverSide: true,
        dom: '<"d-flex align-items-center justify-content-between mb-2"l<"ms-auto"f>>rt<"d-flex justify-content-between mt-2"ip>',
        ajax: {
            url: BASE_URL + '/penjualan/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}/penjualan/${id}" class="btn btn-sm btn-primary px-2 py-1" title="Lihat Detail"><i class="bx bx-show"></i></a>`;
                    if (row.status === 'draft') {
                        btns += ` <a href="${BASE_URL}/penjualan/${id}/edit" class="btn btn-sm btn-warning px-2 py-1" title="Edit"><i class="bx bx-edit"></i></a>`;
                    }
                    return btns;
                }
            },
            { data: 'nomor_penjualan', render: (v, _, row) => `<a href="${BASE_URL}/penjualan/${row.id}">${v}</a>` },
            { data: 'nama_faskes' },
            { data: 'nama_nakes', render: v => v || '—' },
            { data: 'tanggal_fmt' },
            { data: 'total_fmt', className: 'text-end' },
            { data: 'status_badge', className: 'text-center', orderable: false },
            {
                data: 'has_faktur', className: 'text-center', orderable: false,
                render: v => v === '1'
                    ? '<span class="badge bg-success-transparent text-success">Ada</span>'
                    : '<span class="text-muted small">—</span>'
            },
        ],
        order: [[2, 'desc']],
        language: { url: BASE_URL + '/build/assets/json/datatables-id.json' },
    });

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

    document.getElementById('modalPdfPreview').addEventListener('hidden.bs.modal', function () {
        document.getElementById('iframePdf').src = '';
    });
});

function bukaPdfModal(url) {
    document.getElementById('iframePdf').src = url;
    document.getElementById('btnDlPdf').href  = url;
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalPdfPreview')).show();
}
</script>
@endsection