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

@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</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</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <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>

                <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>
                <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>
                <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>
                                        <!-- <div class="form-row "> -->
                                        <tr>

                                            <th class="fw-semibold text-dark detail-label">
                                                Customer</th>

                                            <td class="detail-isi" id="customer">

                                            </td>
                                        </tr>
                                        <tr>

                                            <th class=" fw-semibold text-dark detail-label">
                                                Alamat</th>

                                            <td class="detail-isi" id="alamat">
                                            </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">
                                        </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 Belanja</th>

                                            <td class="detail-isi text-right" id="total-belanjaan"></td>
                                        </tr>
                                        <tr>

                                            <th class=" fw-semibold detail-label text-dark">
                                                Diskon Belanja</th>

                                            <td class="detail-isi text-right" id="diskon-belanja"></td>
                                        </tr>
                                        <tr>

                                            <th class=" fw-semibold detail-label text-dark">
                                                Total Keseluruhan</th>

                                            <td class="detail-isi text-right" id="total-keseluruhan"></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>


                <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: 15%;">Nama</th>
                                            <th style="width: 10%;">QTY</th>
                                            <th style="width: 15%;">Harga Jual</th>
                                            <th style="width: 15%;">Diskon</th>
                                            <th style="width: 20%;">Total </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- <tr>
                                            <td class="action"><button data-toggle="modal" data-target="#jumlah-retur"
                                                    class="btn text-white btn-danger ml-2"> <i class="fas fa-box"> </i>
                                                    Retur</a>
                                            </td>
                                            <td>kkk/kkkk</td>
                                            <td>bimoli</td>
                                            <td class="text-right">10</td>
                                            <td class="text-right">Rp 10.000</td>
                                            <td class="text-right">0</td>
                                            <td class="text-right">0</td>
                                            <td class="text-right">Rp 100.000</td>

                                        </tr> --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            {{-- <h4></h4> --}}
                            <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%;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- <tr>
                                            <td class="action">1</td>
                                            <td>20-10-2025/19.00</td>
                                            <td>kkk/kkkk</td>
                                            <td>bimoli</td>
                                            <td></td>
                                            <td>Udin</td>
                                            <td class="text-right">10</td>
                                            <td class="text-right">Rp.1000</td>

                                        </tr> --}}
                                    </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>
<div class="modal fade" id="retur" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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" id="exampleModalLabel">Retur</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">Faktur</h6>
                    <div class="input-group ">
                        <input type="text" class="form-control" id="input-retur" placeholder="Masukan Faktur">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-show-retur btn-primary "><i
                        class="fa-solid fa-magnifying-glass"></i>
                    Cari</button>
            </div>
        </div>
    </div>
</div>
@foreach ($barangs as $barang)
{{-- {{ dd($barang) }} --}}
<div class="modal fade" id="modal-retur-{{ $barang->id }}" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            {{-- <form class="needs-validation" id="form_data" novalidate="">
                @csrf --}}
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="exampleModalLabel">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>
                        <div>
                            <textarea class="form-control" data-height=150
                                id="catatan_retur{{ $barang->id }}"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
                    <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>
                {{--
            </form> --}}
        </div>
    </div>
</div>
@endforeach
@endsection

@push('js')

<script>
    let token = '{{ $token }}'
        let dataFaktur = sessionStorage.getItem('dataFaktur');
        let returId = sessionStorage.getItem('returId');
        $(document).ready(function () {
            $('.btn-cetak').hide();

            if (dataFaktur === null) {
                $('#retur').modal('show');
            } else {
                showRetur(dataFaktur);
                listBarang(dataFaktur);
                listRetur(dataFaktur);

            }

        });

        function showRetur(data) {

            $.ajax({
                url: '/api/returs/show',
                type: "GET",
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: {
                    faktur: data
                },
                // beforeSend: function () {
                //     $('.btn-show-retur').addClass('btn-progress disabled');
                // },
                success: function (response) {

                    let tanggal = new Date(response.penjualan.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.penjualan.faktur);
                    $('#total-retur').text(response.total + ' Barang');
                    $('#customer').text(response.penjualan.customer.nama);
                    $('#alamat').text(response.penjualan.customer.alamat);
                    $('#catatan').text(response.catatan);
                    $('#kasir').text(response.penjualan.user.nama);
                    $('#total-belanjaan').text('Rp ' + rupiah(response.subtotal));
                    $('#total-keseluruhan').text('Rp ' + rupiah(response.subtotal_keseluruhan));
                    $('#bayar').text('Rp ' + rupiah(response.penjualan.bayar));
                    $('#diskon-belanja').text('Rp ' + rupiah(response.penjualan.diskon));
                    $('.btn-show-retur').removeClass('btn-progress disabled');
                    $('#retur').modal('hide');
                    $(`#retur input`).val('');



                },
                error: function (xhr, status, error, response) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        html: xhr.responseJSON.message
                    });
                    // console.error('Error:', error);
                    // $('.btn-show-retur').removeClass('btn-progress disabled');
                    // alert('Terjadi kesalahan saat mengambil data');
                }

            })
        }
        function listBarang(data) {
            $('#tableBarang').DataTable({
                lengthChange: false,
                searching: false,
                paginate: false,
                info: false,
                autoWidth: false,
                ordering: false,
                paging: false,

                language: {
                    paginate: {
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }, emptyTable: "Barang sudah kosong"

                },
                ajax: {
                    url: '/api/returs/barang',
                    type: "GET",
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    data: {
                        faktur: data
                    },


                },
                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_calculated',
                    render: function (data) {
                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    data: 'diskon',
                    render: function (data, type, row) {

                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                        ;
                    }
                },
                {
                    data: 'total_calculated',
                    render: function (data, type, row) {

                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    }
                },



                ]
                //  drawCallback: function (settings) {

                //     let api = this.api();
                //     let data = api.rows().data();


                //     let subtotalDiskon = 0;
                //     let subtotal = 0;

                //     data.each(function (row) {

                //         let harga = parseFloat((row.harga ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;
                //         let qty = parseFloat((row.qty ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;
                //         let diskon = parseFloat((row.diskon ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;


                //         let total = (harga * qty) - diskon;
                //         subtotalDiskon += diskon;
                //         subtotal += total;

                //     });
                //     subtotalFix = subtotal


                //     $(api.table().footer()).find('.subtotal_diskon').html(`${rupiah(subtotalDiskon)}`);
                //     $(api.table().footer()).find('.subtotal').html(`${rupiah(subtotal)}`);
                // }

            })
        };
        function listRetur(data) {
            $('#tableRetur').DataTable({
                lengthChange: false,
                searching: false,
                paginate: false,
                info: false,
                autoWidth: false,
                ordering: false,
                destroy: true,
                paging: false,



                // pageLength : 10,
                language: {
                    paginate: {
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }, emptyTable: "Barang sudah kosong"

                },
                ajax: {
                    url: '/api/returs',
                    type: "GET",
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    data: {
                        faktur: data
                    }, 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('returId', row.retur_id);
                        returId = sessionStorage.getItem('returId');
                                return meta.row + meta.settings._iDisplayStart + 1;


                    }
                },

                {
                    data: 'created_at',
                    class: 'text-center',
                    render: function (data) {
                        let tanggal = new Date(data);
                        let formatTanggal =
                            tanggal.getDate().toString().padStart(2, '0') + '-' +
                            (tanggal.getMonth() + 1).toString().padStart(2, '0') + '-' +
                            tanggal.getFullYear() + '/' + tanggal.getHours() + ':' + tanggal.getMinutes();
                        return formatTanggal;
                    }
                },

                {
                    data: 'penjualan_barang.barang.kode',
                    class: 'text-center',
                    render: function (data) {
                        return data;
                    }
                },
                {
                    data: 'penjualan_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.penjualan_barang.barang.satuan?.nama ?? 'Qty'}`;
                    }
                },
                {
                    data: 'total_calculated',
                    class: 'text-right',
                    render: function (data, type, row) {


                        return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;

                    }
                },
                    //         {
                    // data: 'harga_calculated',
                    //             render: function (data) {
                    //                 return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    //             }
                    //         },
                    //                 {
                    //                     data: 'diskon',
                    //                     render: function (data, type, row) {

                    //                                              return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    // ;
                    //                     }
                    //                 },
                    //         {
                    // data: 'total_calculated',
                    //             render: function (data, type, row) {

                    //                 return `<span style="float:left">Rp</span> <span style="float:right">${rupiah(data)}</span>`;
                    //             }
                    //         },



                ],
                drawCallback: function (settings) {

                    let api = this.api();
                    let data = api.rows().data();


                    let subtotal = 0;

                    data.each(function (row) {




                        subtotal += parseFloat((row.total_calculated ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;

                    });


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

            })
        };

        function postRetur(data) {
            $.ajax({
                url: '/api/returs',
                type: "Post",
                cache: false,
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                data: data,
                success: function (response) {
                    // console.log(response);

                    Swal.fire({
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 500
                    }).then(() => {
                        // console.log(response);

                        // sessionStorage.setItem('dataFaktur', faktur);
                        sessionStorage.setItem('returId', response.data.id);
                        returId = sessionStorage.getItem('returId');
                        $(`div[id^='modal-retur-']`).modal('hide');
                        showRetur(dataFaktur)
                        $('#tableBarang').DataTable().ajax.reload(null, false);
                        $('#tableRetur').DataTable().ajax.reload(null, false);

                    });
                }, error: function (xhr, status, error) {


                    // console.error('Error:', xhr.responseJSON);

                    let errorMessage = 'Terjadi kesalahan';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).join('<br>');
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        html: errorMessage
                    });
                }
            })
        }



        $(document).ready(function () {
            $('.transaksi-retur').click(function () { $(this).addClass('btn-progress disabled'); $(this).html(' '); });
        });
        $(document).ready(function () {
            $(document).on('click', '.btn-show-retur', function () {
                let faktur = $('#input-retur').val().trim();
                if (!faktur) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Harap isi no retur'
                    })
                } else {
                    sessionStorage.setItem('dataFaktur', faktur);
                    dataFaktur = sessionStorage.getItem('dataFaktur');


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

                }

            });
        })
            $('#input-retur').on('keyup', function (e) {
            if (e.key === 'Enter') {
                let faktur = $('#input-retur').val().trim();
                if (!faktur) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Harap isi no retur'
                    })
                } else {
                    sessionStorage.setItem('dataFaktur', faktur);
                    dataFaktur = sessionStorage.getItem('dataFaktur');


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

                }

            }})
                $('[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();



            data = {
                'retur': retur,
                'catatan': catatan,
                'faktur': dataFaktur,
                'barang_id': id
            };

            postRetur(data);
            }})
        $(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();
            // let dataFaktur = sessionStorage.getItem('dataFaktur');



            data = {
                'retur': retur,
                'catatan': catatan,
                'faktur': dataFaktur,
                'barang_id': id
            };

            postRetur(data);
        });
        $(document).on('click', '.btn-selesai', function () {
            sessionStorage.removeItem('dataFaktur');
            sessionStorage.removeItem('returId');
            $('.section-body').load(window.location.href + ' .section-body > *');

            $('#retur').modal('show');

        });

        $(document).on('click', '.btn-cetak', function () {

            const url = "{{ route('retur.struk', ['id' => 'id_retur']) }}".replace('id_retur', returId);
            window.open(url, '_blank');
        });
$(document).on('shown.bs.modal', '[id^="modal-retur-"]', function () {
    $(this).find('.input_qty').trigger('focus');
});


        $("div[id^='modal-retur-']").on('hidden.bs.modal', function () {
            $(this).find('input,text-area').val('');
        });
        $("#retur").on('hidden.bs.modal', function () {
            $(this).find('input').val('');
        });

</script>
@endpush