@extends('layouts.admin.app', ["title" => "Detail Pembelian"])

@push('css')
<style>
    @media (max-width: 575.98px) {
        .ml-1 { margin-left: 0 !important; }
    }
    @media (min-width: 1024px) {
        .modal-header { padding: 15px 25px !important; }
    }
    .modal-footer {
        padding-top: 0 !important;
        justify-content: center !important;
    }
    .modal-body { padding-bottom: 0 !important; }
    .modal-footer .btn {
        width: 100% !important;
        align-items: center;
    }
    .card-icon { padding: 10px 10px !important; }
    .card-statistic-2 {
        overflow: auto !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Detail Pembelian</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Laporan</a></div>
                <div class="breadcrumb-item"><a href="{{ route('laporan_pembelian') }}">Pembelian</a></div>
                <div class="breadcrumb-item">Detail</div>
            </div>
        </div>

        <div class="section-body">
            <div class="mb-2">
                <a href="{{ route('laporan_pembelian') }}" class="btn btn-primary">
                    <i class="fa-solid fa-backward"></i> Kembali
                </a>
            </div>

            <div class="row">

                {{-- Card Tanggal --}}
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-active card-statistic-2">
                        <div class="card-icon active-icon shadow-white bg-white">
                            <i class="fa-solid fa-calendar"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-white">Tanggal</h4>
                            </div>
                            <div class="card-body text-white" id="tanggal"></div>
                        </div>
                    </div>
                </div>

                {{-- Card Faktur --}}
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-icon shadow-primary bg-primary">
                            <i class="fa-solid fa-newspaper" style="color:#fff;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-primary">Faktur</h4>
                            </div>
                            <div class="card-body text-primary" id="faktur"></div>
                        </div>
                    </div>
                </div>

                {{-- Card Total Barang --}}
                <div class="col-lg-4 col-md-12 col-sm-12">
                    <div class="card card-active card-statistic-2">
                        <div class="card-icon active-icon shadow-white bg-white">
                            <i class="fa-solid fa-dolly" style="color:var(--primary)"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-white">Total Barang</h4>
                            </div>
                            <div class="card-body text-white" id="total-barang"></div>
                        </div>
                    </div>
                </div>

                {{-- Detail Info --}}
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Detail</h4>
                            <div class="card-header-action">
                                <button type="button" class="btn btn-warning ml-2 btn-cetak">
                                    <i class="fas fa-print"></i> Struk
                                </button>
                            </div>
                        </div>
                        <div class="card-body row" style="padding-top: 5px;">
                            <div class="col-12 col-md-6 col-lg-6">
                                <table class="table table-detail table-horizontal-lines">
                                    <tbody>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Supplier</th>
                                            <td class="detail-isi" id="supplier"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Kasir</th>
                                            <td class="detail-isi" id="kasir"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Catatan</th>
                                            <td class="detail-catatan" id="catatan"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-12 col-md-6 col-lg-6">
                                <table class="table table-detail table-horizontal-lines">
                                    <tbody>
                                        <tr>
                                            <th class="fw-semibold detail-label text-dark">Total Pembelian</th>
                                            <td class="detail-isi text-right" id="total-pembelian"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold text-dark detail-label">Bayar</th>
                                            <td class="detail-isi text-right" id="bayar"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabel List Barang --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">List Barang</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped" id="tableData">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Kode</th>
                                            <th>Nama</th>
                                            <th>QTY</th>
                                            <th>Harga Satuan</th>
                                            <th>Harga Beli Total</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center"></tbody>
                                    <tfoot class="table-dark">
                                        <tr>
                                            <td class="text-center" colspan="4">
                                                <h6>Subtotal</h6>
                                            </td>
                                            <td class="text-right">
                                                <span style="float:left">Rp</span>
                                                <span class="subtotal" style="float:right">0</span>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

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

@push('js')
<script>
    let id    = `{{ $id }}`;
    let token = `{{ $token }}`;

    $(document).ready(function () {
        showDetail(id);
    });

    // ── Ambil detail header pembelian ────────────────────────────────────────
    function showDetail(data) {
        $.ajax({
            url:  '/api/laporans/pembelian/' + data,
            type: 'GET',
            headers: { 'Authorization': 'Bearer ' + token },
            success: function (response) {
                let t = new Date(response.pembelian.created_at);
                let formatTanggal =
                    t.getDate().toString().padStart(2, '0') + '-' +
                    (t.getMonth() + 1).toString().padStart(2, '0') + '-' +
                    t.getFullYear();

                $('#tanggal').text(formatTanggal);
                $('#faktur').text(response.pembelian.faktur);
                $('#total-barang').text(response.total + ' Barang');
                $('#supplier').text(response.pembelian.supplier?.nama ?? '-');
                $('#kasir').text(response.pembelian.user?.nama ?? '-');
                $('#catatan').text(response.pembelian.catatan ?? '-');
                $('#total-pembelian').text('Rp ' + rupiah(response.subtotal));
                $('#bayar').text('Rp ' + rupiah(response.pembelian.bayar));

                // Init tabel setelah data header loaded
                listData(data);
            },
            error: function (xhr) {
                Swal.fire({
                    icon:  'error',
                    title: 'Gagal',
                    html:  xhr.responseJSON?.message ?? 'Terjadi kesalahan'
                });
            }
        });
    }

    // ── Tabel list barang ────────────────────────────────────────────────────
    function listData(data) {
        // Destroy dulu kalau sudah ada instance
        if ($.fn.DataTable.isDataTable('#tableData')) {
            $('#tableData').DataTable().destroy();
        }

        $('#tableData').DataTable({
            lengthChange: false,
            searching:    false,
            paginate:     false,
            info:         false,
            autoWidth:    false,
            ordering:     false,
            language: {
                emptyTable: "Barang masih kosong"
            },
            ajax: {
                url:  '/api/laporans/pembelian/list/' + data,
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                dataSrc: function(json) {
                    // Debug: cek apa yang diterima
                    console.log('Response list:', json);
                    return json.data || [];
                }
            },
            columns: [
                {
                    data: 'barang.kode',
                    class: 'text-center',
                    render: function (data) { return data ?? '-'; }
                },
                {
                    data: 'barang.nama',
                    class: 'text-center',
                    render: function (data) { return data ?? '-'; }
                },
                {
                    data: 'qty',
                    class: 'text-right',
                    render: function (data, type, row) {
                        return `${rupiah(data)} / ${row.barang?.satuan?.nama ?? 'Qty'}`;
                    }
                },
                {
                    data: 'harga_satuan',
                    class: 'text-right',
                    render: function (data) {
                        return `<span style="float:left">Rp</span>
                                <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    data: 'total_calculated',
                    class: 'text-right',
                    render: function (data) {
                        return `<span style="float:left">Rp</span>
                                <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
            ],
            drawCallback: function () {
                let api      = this.api();
                let subtotal = 0;

                api.rows().data().each(function (row) {
                    let val = parseFloat(
                        (row.total_calculated ?? 0).toString()
                            .replace(/\./g, '')
                            .replace(/,/g, '')
                    ) || 0;
                    subtotal += val;
                });

                $(api.table().footer()).find('.subtotal').html(rupiah(subtotal));
            }
        });
    }

    // Tombol cetak struk
    $(document).on('click', '.btn-cetak', function () {
        const url = "{{ route('pembelian.struk', ['id' => 'id_pembelian']) }}"
            .replace('id_pembelian', id);
        window.open(url, '_blank');
    });
</script>
@endpush