@extends('layouts.master')

@section('title', 'Faktur Penjualan KSO')

@section('styles')
<style>
    .grn-summary-card { border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
    .grn-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; }
    .grn-summary-card .label { font-size: .7rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
    .grn-summary-card .value { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #222; }
    #tblFaktur th, #tblFaktur td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblFaktur thead th { background: #f8f9fa; }
    #tblFaktur_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblFaktur_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblFaktur_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; }
    #tblFaktur_wrapper .dataTables_filter label,
    #tblFaktur_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblFaktur_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">Faktur Penjualan KSO</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Faktur Penjualan KSO</span>
        </div>
        @can('penjualan_kso_faktur.create')
        <a href="{{ route('penjualan.faktur-kso.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 Faktur Baru
        </a>
        @endcan
    </div>

    {{-- Summary Cards --}}
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="card custom-card mb-0">
                <div class="card-body p-2">
                    <div class="grn-summary-card">
                        <div class="icon-wrap" style="background:#f1f3f5;color:#6c757d"><i class="bx bx-file-blank"></i></div>
                        <div><div class="label">Draft</div><div class="value" id="sc-draft">—</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="grn-summary-card">
                        <div class="icon-wrap" style="background:#dbeafe;color:#1d6fdf"><i class="bx bx-loader-circle"></i></div>
                        <div><div class="label">Dalam Proses</div><div class="value" id="sc-proses">—</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="grn-summary-card">
                        <div class="icon-wrap" style="background:#d1fae5;color:#059669"><i class="bx bx-check-circle"></i></div>
                        <div><div class="label">Selesai Bulan Ini</div><div class="value" id="sc-selesai">—</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="grn-summary-card">
                        <div class="icon-wrap" style="background:#ede9fe;color:#7c3aed"><i class="bx bx-money"></i></div>
                        <div><div class="label">Total Nilai Selesai</div><div class="value" id="sc-nilai" style="font-size:1rem">—</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 Faktur Penjualan KSO</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">
                                <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</option>
                                <option value="draft">Draft</option>
                                <option value="revisi_draft">Revisi Draft Penjualan</option>
                                <option value="divalidasi">Divalidasi</option>
                                <option value="revisi_upload_ppn">Revisi Upload Faktur PPN</option>
                                <option value="upload_ppn">Upload eFaktur</option>
                                <option value="cetak_dokumen">Cetak Dokumen</option>
                                <option value="selesai">Selesai</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 flatpickr-date" 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-date" placeholder="dd-mm-yyyy">
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-primary btn-sm px-2 py-1 w-100" onclick="tbl.ajax.reload()">
                                <i class="bx bx-search"></i>
                            </button>
                        </div>
                        <div class="col-md-2" id="btnMultiTtWrap" style="display:none">
                            <button class="btn btn-warning btn-sm px-2 py-1 w-100" id="btnCetakMultiTt">
                                <i class="bx bx-printer"></i> Cetak TT Multi Faktur <span id="badgeMultiTt" class="badge bg-dark ms-1">0</span>
                            </button>
                        </div>
                    </div>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblFaktur" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:36px"><input type="checkbox" id="chkAll" title="Pilih semua"></th>
                                    <th class="text-center" style="width:60px">Aksi</th>
                                    <th>No. Faktur</th>
                                    <th>Tgl. Faktur</th>
                                    <th>Faskes KSO</th>
                                    <th class="text-center">Pemakaian</th>
                                    <th class="text-end">Total Harga</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL = "{{ url('/') }}";

$.get(`${BASE_URL}/faktur-penjualan-kso/summary`, r => {
    $('#sc-draft').text(r.draft);
    $('#sc-proses').text(r.proses);
    $('#sc-selesai').text(r.selesai);
    $('#sc-nilai').text('Rp ' + Number(r.nilai).toLocaleString('id-ID'));
});

const tbl = $('#tblFaktur').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: `${BASE_URL}/faktur-penjualan-kso/data`,
        data: d => {
            d.faskes_id = $('#filterFaskes').val();
            d.status    = $('#filterStatus').val();
            d.dari      = $('#filterDari').val();
            d.sampai    = $('#filterSampai').val();
        },
    },
    columns: [
        { data: 'aksi', name: 'id', orderable: false, searchable: false, className: 'text-center',
          render: id => `<input type="checkbox" class="chk-row" value="${id}">` },
        { data: 'aksi', name: 'id', orderable: false, searchable: false, className: 'text-center',
          render: id => `<a href="${BASE_URL}/faktur-penjualan-kso/${id}" class="btn btn-info btn-sm px-2 py-1" title="Detail"><i class="bx bx-show fs-14"></i></a>` },
        { data: 'nomor', name: 'nomor', render: (val, t, r) => {
            let html = `<div class="fw-semibold">${val}</div>`;
            if (r.nomor_pemakaian) {
                r.nomor_pemakaian.split('|').forEach(n => {
                    html += `<div class="text-muted small">${n}</div>`;
                });
            }
            return html;
        }},
        { data: 'tgl_fmt', name: 'tanggal_faktur' },
        { data: 'nama_faskes', name: 'nama_faskes' },
        { data: 'pemakaian_count', name: 'id', orderable: false, className: 'text-center' },
        { data: 'total_fmt', name: 'total_harga', className: 'text-end' },
        { data: 'badge_status', name: 'status', className: 'text-center', orderable: false },
    ],
    order: [[2, 'desc']],
    language: { url: `${BASE_URL}/assets/json/datatable-id.json` },
});

$('#filterFaskes,#filterStatus').on('change', () => tbl.ajax.reload());

// Checkbox multi-select
const selectedIds = new Set();

function updateMultiTtBtn() {
    const count = selectedIds.size;
    $('#badgeMultiTt').text(count);
    $('#btnMultiTtWrap').toggle(count > 0);
}

$('#tblFaktur').on('change', '.chk-row', function () {
    const id = $(this).val();
    if (this.checked) selectedIds.add(id);
    else selectedIds.delete(id);
    updateMultiTtBtn();
});

$('#chkAll').on('change', function () {
    const checked = this.checked;
    $('#tblFaktur .chk-row').each(function () {
        this.checked = checked;
        const id = $(this).val();
        if (checked) selectedIds.add(id);
        else selectedIds.delete(id);
    });
    updateMultiTtBtn();
});

tbl.on('draw', function () {
    // restore checked state after redraw
    $('#tblFaktur .chk-row').each(function () {
        this.checked = selectedIds.has($(this).val());
    });
});

$('#btnCetakMultiTt').on('click', function () {
    if (selectedIds.size === 0) return;
    const ids = Array.from(selectedIds).join(',');
    window.open(`${BASE_URL}/faktur-penjualan-kso/cetak-tt-multi?ids=${ids}`, '_blank');
});
</script>
@endsection