@extends('layouts.admin.app', ["title" => "Transaksi 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-retur {
        min-width: 37% !important;
        justify-content: center !important;
    }
    .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>Retur Pembelian</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Transaksi</a></div>
                <div class="breadcrumb-item">Retur Pembelian</div>
            </div>
        </div>

        <div class="section-body">
            <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 Retur --}}
                <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-box-archive"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-white">Total Retur</h4>
                            </div>
                            <div class="card-body text-white" id="total-retur"></div>
                        </div>
                    </div>
                </div>

                {{-- Detail Pembelian --}}
                <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>
                                    Cetak</button>
                                <button type="button" class="btn btn-selesai btn-success ml-2"> <i class="fas fa-save">
                                    </i>
                                    Selesai</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 detail-label text-dark">Bayar</th>
                                            <td class="detail-isi text-right" id="bayar"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabel Barang Pembelian --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Barang</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped" id="tableBarang">
                                    <thead class="table-dark">
                                        <tr>
                                            <th style="width: 10%;">Action</th>
                                            <th style="width: 15%;">Kode</th>
                                            <th style="width: 20%;">Nama</th>
                                            <th style="width: 10%;">QTY</th>
                                            <th style="width: 20%;">Harga Satuan</th>
                                            <th style="width: 20%;">Harga Beli Total</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Tabel Riwayat Retur --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Retur</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-borderless table-striped" id="tableRetur">
                                    <thead class="table-dark">
                                        <tr>
                                            <th class="table-no">No</th>
                                            <th>Tanggal/Jam</th>
                                            <th>Kode</th>
                                            <th>Nama</th>
                                            <th>Catatan</th>
                                            <th>Kasir</th>
                                            <th style="width: 15%;">Retur</th>
                                            <th style="width: 15%;">Nilai Retur</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot class="table-dark">
                                        <tr>
                                            <td class="text-center" colspan="7">
                                                <h6>Subtotal</h6>
                                            </td>
                                            <td class="text-right">
                                                <span style="float:left">Rp</span>
                                                <span class="subtotal" style="float:right"></span>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

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

{{-- Modal Input Faktur --}}
<div class="modal fade" id="modal-faktur" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-retur" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Retur Pembelian</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white"
                    data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h6 class="text-dark">No. Faktur Pembelian</h6>
                    <div class="input-group">
                        <input type="text" class="form-control" id="input-faktur"
                            placeholder="Masukan No. Faktur Pembelian">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-show-retur btn-primary">
                    <i class="fa-solid fa-magnifying-glass"></i> Cari
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Retur per Barang --}}
@foreach ($barangs as $barang)
<div class="modal fade" id="modal-retur-{{ $barang->id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Retur {{ $barang->nama }}</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white"
                    data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <h6 class="text-dark">Qty</h6>
                    <div class="input-group">
                        <input type="text" id="qty_retur{{ $barang->id }}"
                            class="rupiah input_qty form-control"
                            placeholder="Masukan Qty yang Ingin Diretur">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                {{ $barang->satuan->nama ?? 'Qty' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <h6 class="text-dark">Catatan</h6>
                    <textarea class="form-control" data-height="150"
                        id="catatan_retur{{ $barang->id }}"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-transaksi-retur btn-primary"
                    data-id="{{ $barang->id }}">
                    <i class="fa-solid fa-box-archive"></i> Retur
                </button>
            </div>
        </div>
    </div>
</div>
@endforeach

@endsection

@push('js')
<script>
    let token       = '{{ $token }}';
    let dataFaktur  = sessionStorage.getItem('dataFakturPembelian');
    let returId     = sessionStorage.getItem('returPembelianId');

    $(document).ready(function () {
        $('.btn-cetak').hide();
        if (dataFaktur === null) {
            $('#modal-faktur').modal('show');
        } else {
            showRetur(dataFaktur);
            listBarang(dataFaktur);
            listRetur(dataFaktur);
        }
    });

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

                $('#tanggal').text(formatTanggal);
                $('#faktur').text(response.pembelian.faktur);
                $('#total-retur').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));

                $('#modal-faktur').modal('hide');
                $('#modal-faktur input').val('');
            },
            error: function (xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    html: xhr.responseJSON?.message ?? 'Terjadi kesalahan'
                });
            }
        });
    }

    // ── Tabel barang dari faktur pembelian ───────────────────────────────────
    function listBarang(faktur) {
        $('#tableBarang').DataTable({
            lengthChange: false,
            searching:    false,
            info:         false,
            autoWidth:    false,
            ordering:     false,
            paging:       false,
            destroy:      true,
            language: {
                emptyTable: "Barang sudah kosong"
            },
            ajax: {
                url:     '/api/retur_pembelians/barang',
                type:    'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                data:    { faktur: faktur },
            },
            columns: [
                {
                    data: null,
                    class: 'text-center',
                    render: function (data, type, row) {
                        return `<button class="btn btn-icon btn-danger" data-toggle="modal"
                                    data-target="#modal-retur-${row.barang_id}" type="button">
                                    <i class="far fa-edit">
                                        <a style="font-family: 'Quicksand', sans-serif;"> Retur</a>
                                    </i>
                                </button>`;
                    }
                },
                {
                    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',
                    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>`;
                    }
                },
            ]
        });
    }

    // ── Tabel riwayat retur ──────────────────────────────────────────────────
    function listRetur(faktur) {
        $('#tableRetur').DataTable({
            lengthChange: false,
            searching:    false,
            info:         false,
            autoWidth:    false,
            ordering:     false,
            paging:       false,
            destroy:      true,
            language: {
                emptyTable: "Belum ada retur"
            },
            ajax: {
                url:     '/api/retur_pembelians',
                type:    'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                data:    { faktur: faktur },
                dataSrc: function (json) {
                    if (json.data.length === 0) {
                        $('.btn-cetak').hide();
                    } else {
                        $('.btn-cetak').show();
                    }
                    return json.data;
                }
            },
            columns: [
                {
                    data: null,
                    class: 'text-center',
                    render: function (data, type, row, meta) {
                        sessionStorage.setItem('returPembelianId', row.retur_pembelian_id);
                        returId = row.retur_pembelian_id;
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'created_at',
                    class: 'text-center',
                    render: function (data) {
                        let t = new Date(data);
                        return t.getDate().toString().padStart(2, '0') + '-' +
                               (t.getMonth() + 1).toString().padStart(2, '0') + '-' +
                               t.getFullYear() + '/' +
                               t.getHours() + ':' +
                               t.getMinutes().toString().padStart(2, '0');
                    }
                },
                {
                    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: 'catatan',
                    class: 'text-center',
                    render: function (data) { return data ?? '-'; }
                },
                {
                    data: 'user.nama',
                    class: 'text-center',
                    render: function (data) { return data; }
                },
                {
                    data: 'retur',
                    class: 'text-center',
                    render: function (data, type, row) {
                        return `${data} / ${row.pembelian_barang.barang.satuan?.nama ?? 'Qty'}`;
                    }
                },
                {
                    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) {
                    subtotal += parseFloat(
                        (row.total_calculated ?? 0).toString()
                            .replace(/\./g, '')
                            .replace(/,/g, '')
                    ) || 0;
                });

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

    // ── Kirim retur ke API ───────────────────────────────────────────────────
    function postRetur(data) {
        $.ajax({
            url:   '/api/retur_pembelians',
            type:  'POST',
            cache: false,
            headers: { 'Authorization': 'Bearer ' + token },
            data:  data,
            success: function (response) {
                Swal.fire({
                    icon:             'success',
                    title:            response.message,
                    showConfirmButton: false,
                    timer:            500
                }).then(() => {
                    sessionStorage.setItem('returPembelianId', response.data.id);
                    returId = response.data.id;

                    $(`div[id^='modal-retur-']`).modal('hide');
                    showRetur(dataFaktur);
                    $('#tableBarang').DataTable().ajax.reload(null, false);
                    $('#tableRetur').DataTable().ajax.reload(null, false);
                });
            },
            error: function (xhr) {
                let errorMessage = 'Terjadi kesalahan';
                if (xhr.responseJSON?.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                } else if (xhr.responseJSON?.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                Swal.fire({ icon: 'error', title: 'Gagal', html: errorMessage });
            }
        });
    }

    // ── Events ───────────────────────────────────────────────────────────────
    $(document).on('click', '.btn-cetak', function () {
        const url = "{{ route('retur_pembelian.struk', ['id' => 'id_retur']) }}".replace('id_retur', returId);
        window.open(url, '_blank');
    });

    $(document).on('click', '.btn-show-retur', function () {
        let faktur = $('#input-faktur').val().trim();
        if (!faktur) {
            Swal.fire({ icon: 'error', title: 'Harap isi no faktur' });
            return;
        }
        sessionStorage.setItem('dataFakturPembelian', faktur);
        dataFaktur = faktur;

        showRetur(faktur);
        listBarang(faktur);
        listRetur(faktur);
    });

    // Enter di input faktur
    $('#input-faktur').on('keyup', function (e) {
        if (e.key === 'Enter') {
            let faktur = $(this).val().trim();
            if (!faktur) {
                Swal.fire({ icon: 'error', title: 'Harap isi no faktur' });
                return;
            }
            sessionStorage.setItem('dataFakturPembelian', faktur);
            dataFaktur = faktur;
            showRetur(faktur);
            listBarang(faktur);
            listRetur(faktur);
        }
    });

    // Enter di input qty retur
    $('[id^="qty_retur"]').on('keyup', function (e) {
        if (e.key === 'Enter') {
            let fullId  = $(this).attr('id');
            let id      = fullId.replace('qty_retur', '');
            let retur   = $(this).val().replace(/\D/g, '');
            let catatan = $(`#catatan_retur${id}`).val();

            postRetur({ retur, catatan, faktur: dataFaktur, barang_id: id });
        }
    });

    // Klik tombol retur di modal
    $(document).on('click', '.btn-transaksi-retur', function () {
        let id      = $(this).data('id');
        let retur   = $(`#qty_retur${id}`).val().replace(/\D/g, '');
        let catatan = $(`#catatan_retur${id}`).val();

        postRetur({ retur, catatan, faktur: dataFaktur, barang_id: id });
    });

    // Selesai → reset session
    $(document).on('click', '.btn-selesai', function () {
        sessionStorage.removeItem('dataFakturPembelian');
        sessionStorage.removeItem('returPembelianId');
        $('.section-body').load(window.location.href + ' .section-body > *');
        $('#modal-faktur').modal('show');
    });

    // Focus input qty saat modal dibuka
    $(document).on('shown.bs.modal', '[id^="modal-retur-"]', function () {
        $(this).find('.input_qty').trigger('focus');
    });

    // Reset input modal saat ditutup
    $(`div[id^='modal-retur-']`).on('hidden.bs.modal', function () {
        $(this).find('input, textarea').val('');
    });
    $('#modal-faktur').on('hidden.bs.modal', function () {
        $(this).find('input').val('');
    });
</script>
@endpush