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

@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-retur {
        min-width: 37% !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 Penjualan</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="#">Penjualan</a></div>
                <div class="breadcrumb-item">Detail</div>
            </div>
        </div>

        <div class="section-body">
            <div class="mb-2">
                {{-- <a href="#" class="btn active">Week</a>
                <a href="#" class="btn">Month</a> --}}
                <a href="{{ route('laporan_penjualan') }}" class="btn btn-primary"><i class="fa-solid fa-backward"></i>
                    Kembali</a>
            </div>
            <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-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-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>
                                    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>
                                        <!-- <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></h4> --}}
                            <h4 class="text-dark">List Belanjaan</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 Jual</th>
                                            <th>Diskon</th>
                                            {{-- <th>Total Diskon</th> --}}
                                            <th>Subtotal </th>
                                            <th>Profit </th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                        {{-- <tr>
                                            <td>kkk/kkkk</td>
                                            <td>bimoli</td>
                                            <td>10</td>
                                            <td class="text-right">Rp 10.000</td>
                                            <td class="text-right">Rp 0</td>
                                            <td class="text-right">Rp 100.000</td>

                                        </tr> --}}
                                    </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_diskon" style="float:right">0</span></td>
                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="subtotal" style="float:right"></span></td>
                                            <td class="text-right"><span style="float:left">Rp</span> <span
                                                    class="subtotal_profit" style="float:right"></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(){
        showRetur(id);
    })
    function showRetur(data) {
            $.ajax({
                url: '/api/laporans/penjualan/' + data,
                type: "GET",
                headers: {
                    'Authorization': 'Bearer ' + token
                },
   
                // 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));
                                        $('#diskon-belanja').text('Rp ' + rupiah(response.penjualan.diskon));
                    $('#bayar').text('Rp ' + rupiah(response.penjualan.bayar));
                    $('.btn-show-retur').removeClass('btn-progress disabled');
                    $('#retur').modal('hide');
                    listData(data);

                },
                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 listData(data) {
            $('#tableData').DataTable({
                lengthChange: false,
                searching: false,
                paginate: false,
                info: false,
                autoWidth: false,
                ordering: false,

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

                },
                ajax: {
                    url: '/api/laporans/penjualan/list/' + data,
                    type: "GET",
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
            


                },
                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_jual',
                    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>`;
                    }
                },
                {
                    data: 'total_profit',
                    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;
                        let subtotal_profit = 0;
                        let diskon_penjualan = 0;

                        data.each(function (row) {
                            console.log(row);
                            
                            let harga = parseFloat((row.harga_jual ?? 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 profit = parseFloat((row.total_profit ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;
                             diskon_penjualan = parseFloat((row.diskon_penjualan ?? 0).toString().replace(/\./g, '').replace(/,/g, '')) || 0;


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

                        });
                        subtotalFix = subtotal - diskon_penjualan;


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

            })
        };
       

    $(document).ready(function(){
        $('.transaksi-bayar').click(function(){$(this).addClass('btn-progress disabled');$(this).html(' ');});
    });
      $(document).on('click', '.btn-cetak', function () {

   const url = "{{ route('penjualan.struk', ['id' => 'id_penjualan']) }}".replace('id_penjualan', id);
    window.open(url, '_blank');        });

 
</script>
@endpush