@extends('layouts.admin.app', ["title" => "Detail Retur 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 Retur 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_retur_pembelian') }}">Retur Pembelian</a>
                </div>
                <div class="breadcrumb-item">Detail</div>
            </div>
        </div>

        <div class="section-body">
            <div class="mb-2">
                <a href="{{ route('laporan_retur_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 Diretur --}}
                <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>
                        <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 Jumlah Retur
                                            </th>
                                            <td class="detail-isi text-right" id="total-jumlah-retur"></td>
                                        </tr>
                                        <tr>
                                            <th class="fw-semibold detail-label text-dark">
                                                Total Nilai Retur
                                            </th>
                                            <td class="detail-isi text-right" id="total-nilai-retur"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabel List Barang Diretur --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">List Barang Diretur</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 Retur</th>
                                            <th>Harga Satuan</th>
                                            <th>Nilai Retur</th>
                                            <th>Catatan</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center"></tbody>
                                    <tfoot class="table-dark">
                                        <tr>
                                            <td class="text-center" colspan="4">
                                                <h6>Total Nilai Retur</h6>
                                            </td>
                                            <td class="text-right">
                                                <span style="float:left">Rp</span>
                                                <span class="subtotal" style="float:right"></span>
                                            </td>
                                            <td></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 header detail retur pembelian ──────────────────────────────────
    function showDetail(data) {
        $.ajax({
            url:  '/api/laporans/retur_pembelian/' + data,
            type: 'GET',
            headers: { 'Authorization': 'Bearer ' + token },
            success: function (response) {
                let t = new Date(response.retur.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.retur.pembelian?.faktur ?? '-');
                $('#total-barang').text(response.total + ' Barang');
                $('#supplier').text(response.retur.pembelian?.supplier?.nama ?? '-');
                $('#kasir').text(response.retur.user?.nama ?? '-');
                $('#catatan').text(response.retur.pembelian?.catatan ?? '-');
                $('#total-jumlah-retur').text(response.jumlah_barang + ' Retur');
                $('#total-nilai-retur').text('Rp ' + rupiah(response.subtotal));

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

    // ── Tabel list barang yang diretur ───────────────────────────────────────
    function listData(data) {
        $('#tableData').DataTable({
            lengthChange: false,
            searching:    false,
            paginate:     false,
            info:         false,
            autoWidth:    false,
            ordering:     false,
            language: {
                emptyTable: "Tidak ada data retur"
            },
            ajax: {
                url:  '/api/laporans/retur_pembelian/list/' + data,
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token },
            },
            columns: [
                {
                    data: 'pembelian_barang.barang.kode',
                    class: 'text-center',
                    render: function (data) { return data; }
                },
                {
                    data: 'pembelian_barang.barang.nama',
                    class: 'text-center',
                    render: function (data) { return data; }
                },
                {
                    data: 'retur',
                    class: 'text-right',
                    render: function (data, type, row) {
                        return `${rupiah(data)} / ${row.pembelian_barang.barang.satuan?.nama ?? 'Qty'}`;
                    }
                },
                {
                    data: 'harga_satuan',
                    render: function (data) {
                        return `<span style="float:left">Rp</span>
                                <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    data: 'total_calculated',
                    render: function (data) {
                        return `<span style="float:left">Rp</span>
                                <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    data: 'catatan',
                    class: 'text-center',
                    render: function (data) { return data ?? '-'; }
                },
            ],
            drawCallback: function () {
                let api      = this.api();
                let subtotal = 0;

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

                $(api.table().footer()).find('.subtotal').html(rupiah(subtotal));
            }
        });
    }
</script>
@endpush