@extends('layouts.master')

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

@section('styles')
<style>
    #tblBatal th, #tblBatal td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblBatal thead th { background: #f8f9fa; }
    #tblBatal_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblBatal_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblBatal_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 8px; }
    #tblBatal_wrapper .dataTables_filter label,
    #tblBatal_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblBatal_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
    .level-radio label { display:block; padding:8px 12px; border:1px solid #dee2e6; border-radius:6px; margin-bottom:6px; cursor:pointer; transition:.15s; }
    .level-radio input:checked + label { border-color:#dc3545; background:#fff5f5; }
    .level-radio label .desc { font-size:.78rem; color:#888; margin-top:2px; }
</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 text-danger"><i class="bx bx-x-circle me-2"></i>Batal Penjualan KSO</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Batal Penjualan KSO</span>
        </div>
    </div>

    <div class="alert alert-warning d-flex gap-2 align-items-start mb-3" role="alert">
        <i class="bx bx-error-circle fs-5 mt-1 flex-shrink-0"></i>
        <div>
            <strong>Perhatian:</strong> Halaman ini digunakan untuk membatalkan faktur atau pemakaian KSO.
            Pilih level pembatalan dengan cermat — <strong>Batal Pemakaian akan mengembalikan stok</strong> dan tidak dapat dibatalkan.
        </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 KSO — Dapat Dibatalkan</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="disetujui">Disetujui</option>
                                <option value="upload_ppn">Upload eFaktur</option>
                                <option value="valid">Valid</option>
                                <option value="selesai">Selesai</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Dari Tgl. Faktur</label>
                            <input type="text" id="filterDari" class="form-control form-control-sm flatpickr-input" 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-input" placeholder="dd/mm/yyyy" readonly>
                        </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>
                </div>

                {{-- DataTable --}}
                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblBatal" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:80px">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</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

{{-- Modal Batalkan --}}
<div class="modal fade" id="modalBatal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white py-2">
                <h6 class="modal-title text-white"><i class="bx bx-x-circle me-2"></i>Batalkan Faktur — <span id="modalNomor">—</span></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Level Pembatalan <span class="text-danger">*</span></label>
                    <div class="level-radio">
                        <input type="radio" name="batal_level" id="lvl1" value="batal_faktur" class="d-none">
                        <label for="lvl1">
                            <span class="fw-semibold text-warning">Dibatalkan menjadi Upload Faktur PPN</span>
                            <div class="desc">File eFaktur PPN dihapus. Faktur kembali ke status <strong>Revisi Upload Faktur PPN</strong> (siap upload ulang). Pemakaian tetap terhubung. Stok tidak berubah. Hanya tersedia jika sudah upload PPN.</div>
                        </label>
                        <input type="radio" name="batal_level" id="lvl2" value="batal_penjualan" class="d-none">
                        <label for="lvl2">
                            <span class="fw-semibold text-danger">Dibatalkan menjadi Revisi Draft Penjualan</span>
                            <div class="desc">Faktur kembali ke status <strong>Revisi Draft Penjualan</strong>. Pemakaian tetap terhubung dan bisa direvisi. Stok tidak berubah.</div>
                        </label>
                        <input type="radio" name="batal_level" id="lvl3" value="batal_pemakaian" class="d-none">
                        <label for="lvl3">
                            <span class="fw-semibold text-danger">Dibatalkan menjadi Revisi ke Draft Pemakaian</span>
                            <div class="desc">Faktur <strong>dihapus</strong>. Stok dikembalikan. Semua pemakaian yang terhubung berubah ke status <strong>Direvisi ke Draft</strong> dan dapat divalidasi ulang.</div>
                        </label>
                    </div>
                </div>
                <div id="levelWarning" class="alert alert-danger d-none" role="alert">
                    <i class="bx bx-error me-1"></i> <span id="levelWarnText"></span>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Alasan Pembatalan <span class="text-danger">*</span></label>
                    <textarea id="alasanBatal" class="form-control" rows="3" maxlength="500" placeholder="Wajib diisi..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                <button class="btn btn-danger btn-sm" id="btnKonfirmBatal" disabled>
                    <i class="bx bx-x-circle me-1"></i> Batalkan
                </button>
            </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() }}";
let currentId  = null;

const tbl = $('#tblBatal').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: `${BASE_URL}/batal-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, t, r) => `
            <div class="d-flex gap-1 justify-content-center">
              <a href="${BASE_URL}/faktur-penjualan-kso/${id}" target="_blank" class="btn btn-info btn-sm px-2 py-1" title="Lihat"><i class="bx bx-show fs-14"></i></a>
              @can('batal_penjualan_kso.batal')
              <button onclick="openBatal(${id}, '${r.nomor}', '${r.status}')" class="btn btn-danger btn-sm px-2 py-1" title="Batalkan"><i class="bx bx-x-circle fs-14"></i></button>
              @endcan
            </div>` },
        { 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());

flatpickr('#filterDari',   { dateFormat:'d/m/Y', allowInput:false, onChange: () => tbl.ajax.reload() });
flatpickr('#filterSampai', { dateFormat:'d/m/Y', allowInput:false, onChange: () => tbl.ajax.reload() });

function openBatal(id, nomor, status) {
    currentId = id;
    $('#modalNomor').text(nomor);
    $('input[name=batal_level]').prop('checked', false);
    $('#alasanBatal').val('');
    $('#levelWarning').addClass('d-none');
    $('#btnKonfirmBatal').prop('disabled', true);

    // lvl1 hanya tersedia jika sudah ada file PPN (status upload_ppn ke atas)
    const canBatalFaktur = ['upload_ppn', 'cetak_dokumen', 'selesai'].includes(status);
    $('#lvl1').prop('disabled', !canBatalFaktur);
    $('label[for=lvl1]').css('opacity', canBatalFaktur ? 1 : 0.4);

    $('#lvl3').prop('disabled', false);
    $('label[for=lvl3]').css('opacity', 1);

    new bootstrap.Modal(document.getElementById('modalBatal')).show();
}

$('input[name=batal_level]').on('change', function () {
    const warnings = {
        batal_faktur:    'Faktur akan kembali ke status Revisi Upload Faktur PPN. File eFaktur dihapus. Pemakaian tetap terhubung.',
        batal_penjualan: 'Faktur kembali ke Revisi Draft Penjualan. Pemakaian tetap terhubung dan bisa direvisi. Stok tidak berubah.',
        batal_pemakaian: 'PERHATIAN: Faktur akan dihapus permanen. Stok dikembalikan. Semua pemakaian berubah ke Direvisi ke Draft.',
    };
    const val = $(this).val();
    $('#levelWarnText').text(warnings[val] || '');
    $('#levelWarning').toggleClass('d-none', !warnings[val]);
    checkEnableBtn();
});

$('#alasanBatal').on('input', checkEnableBtn);

function checkEnableBtn() {
    const hasLevel  = $('input[name=batal_level]:checked').length > 0;
    const hasAlasan = $('#alasanBatal').val().trim().length > 0;
    $('#btnKonfirmBatal').prop('disabled', !(hasLevel && hasAlasan));
}

$('#btnKonfirmBatal').on('click', function () {
    const level  = $('input[name=batal_level]:checked').val();
    const alasan = $('#alasanBatal').val().trim();
    if (!level || !alasan) return;

    const labelMap = {
        batal_faktur:    'Dibatalkan menjadi Upload Faktur PPN',
        batal_penjualan: 'Dibatalkan menjadi Revisi Draft Penjualan',
        batal_pemakaian: 'Dibatalkan menjadi Revisi ke Draft Pemakaian',
    };

    Swal.fire({
        title: 'Konfirmasi Pembatalan',
        html: `Level: <strong>${labelMap[level]}</strong><br>Alasan: ${alasan}`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        confirmButtonText: 'Ya, Batalkan!',
        cancelButtonText: 'Tidak',
    }).then(res => {
        if (!res.isConfirmed) return;
        $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
        $.ajax({
            url: `${BASE_URL}/batal-penjualan-kso/${currentId}/batal`,
            method: 'POST',
            data: { _token: CSRF, level, alasan },
            success: r => {
                if (r.success) {
                    bootstrap.Modal.getInstance(document.getElementById('modalBatal')).hide();
                    Swal.fire({ icon:'success', title:'Berhasil dibatalkan', timer:1500, showConfirmButton:false })
                        .then(() => tbl.ajax.reload());
                }
            },
            error: xhr => {
                $('#btnKonfirmBatal').prop('disabled', false).html('<i class="bx bx-x-circle me-1"></i> Batalkan');
                Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error');
            },
        });
    });
});
</script>
@endsection