@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
<style>
    table#table-kasir> :not(caption)>*>* {
        padding: 0.5rem 0.5rem;
        vertical-align: middle;
    }

    table#kalkulasi> :not(caption)>*>* {
        padding: 0.5rem 0.5rem;
    }

    table#kalkulasi td.amount {
        width: 25%;
    }

    table#kalkulasi td.label-amount {
        vertical-align: middle;
        font-size: large;
        text-align: right;
        font-weight: 400;
    }

    table#kalkulasi td.label-amount-sm {
        vertical-align: middle;
        text-align: right;
    }

    th.nama-barang,
    td.nama-barang {
        max-width: 400px;
        white-space: normal !important;
    }

    td.mn100 {
        min-width: 100px;
    }

    .select2-selection__rendered {
        text-align: left !important;
    }

    .form-control-xl {
        padding: 0.5rem 0.8rem;
        font-size: 1.25rem !important;
        height: calc(2.875rem + 2px);
        border-radius: 0.25rem;
    }

    button.btn.btn-primary.fontgede, a.btn.btn-primary.fontgede {
        font-size: 1.25rem;
    }
</style>
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Penjualan</a></li>
        <li class="breadcrumb-item"><a href="/penjualan/kasir">Kasir</a></li>
        <li class="breadcrumb-item active" aria-current="page">Transaksi</li>
    </ol>
</nav>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-header">
                <h5>Detail Pelanggan</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <input type="hidden" id="id_pelanggan" value="{{ $dataHeader->id_pelanggan }}" />
                        <p><b>Kode :</b> {{ $dataHeader->pelanggan->kode }}</p>
                        <p><b>Nama :</b> <span id="namaCustomer">{{ $dataHeader->pelanggan->nama }}</span></p>
                        <p><b>Detail Kontak :</b>
                        <ul>
                                                        @foreach ($dataDetailKontak as $vDetailKontak)
                                                        <li>Telepon: {{ $vDetailKontak->value }}</li>
                            @endforeach
                            @if ($jmlData <= 0)
                                Belum terdapat data
                                @endif
                                </ul>

                                </p>
                                <p><b>Alamat :</b><br />{{ $dataHeader->pelanggan->alamat }}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 pt-4">
                        <button class="btn btn-primary btn-custom3 mt-1">Detail Diri</button>
                        <button class="btn btn-primary btn-custom3 mt-1">History Transaksi</button>
                        <button class="btn btn-primary btn-custom3 mt-1">Pembatalan Transaksi</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" id="detail-penjualan">
    <div class="col-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-header">
                <h5>Detail Penjualan</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="table-kasir" class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="text-center">No.</th>
                                        <th class="text-center nama-barang">Nama Barang</th>
                                        <th class="text-center">Jumlah</th>
                                        <th class="text-center">QTY</th>
                                        <th class="text-center">Harga</th>
                                        <th class="text-center">Add Cost</th>
                                        <th class="text-center">Potongan</th>
                                        <th class="text-center">Total Potongan</th>
                                        <th class="text-center">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                                        @foreach($dataDetail as $vDetail)
                                                                        <tr class="dataBarang">
                                        <td class="text-center">1</td>
                                        <td class="nama-barang">
                                            <span class="dataBarangProduk1">{{ cetakNamaProduk($vDetail['kode'] ?? null, $vDetail['nama'] ?? null, $vDetail['parent_id'] ?? null, $vDetail['kode_parent'] ?? null, $vDetail['nama_parent'] ?? null) }}</span>
                                            <input type="hidden" id="info" data-jumlah="" data-harga="" data-biayatambahan="">
                                            <a class="text-primary" data-bs-toggle="collapse" href="#detail-info-{{$vDetail['id']}}" role="button" aria-expanded="false" aria-controls="detail-info-{{$vDetail['id']}}">
                                                <span class="mdi mdi-information"></span>
                                            </a>
                                        </td>
                                        <td class="text-end">{{ formatNumber($vDetail['jumlah']) ?? 0 }} {{ $vDetail['satuan'] ?? "-" }}</td>
                                        <td class="text-end"><span class="dataBarangJumlah1">{{ formatNumber($vDetail['qty_sub']) ?? 0 }} {{ $vDetail['satuan_stock'] }}</span></td>
                                        <td class="text-end mn100"><span class="dataBarangHarga1">{{ formatNumber($vDetail['harga']) ?? 0 }}</span></td>
                                        <td class="text-end mn100">{{ formatNumber($vDetail['biaya_tambahan']) ?? 0 }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <select class="form-control form-control-sm me-2  potonganHarga" id="potonganHarga"
                                                    style="max-width: 20%">
                                                    <option value="" data-parameter="">-</option>
                                                    <option value="persen" data-parameter="">%</option>
                                                    <option value="nominal" data-parameter="">Rp.</option>
                                                </select>
                                                <input type="text" class="form-control form-control-sm nominalDiskon text-end removeMinusSign formatInputUang" disabled id="nominal_diskon" placeholder="0" value="0" data-parameter="" data-total_harga_asli="{{ $vDetail['sub_total']+$vDetail['biaya_tambahan'] ?? 0 }}" onkeyup="dottocomma(this)" onchange="formatInputUang(this)" style="max-width: auto">
                                            </div>
                                        </td>
                                        <td class="text-end totalPotonganDetail mn100" id="totalPotonganSatuan">{{ formatNumberComma(0) }}</td>
                                        <td class="mn100 text-end totalHargaDetail dataBarangTotal1" id="totalHarga" data-total_harga="{{ $vDetail['sub_total']+$vDetail['biaya_tambahan'] ?? 0 }}">{{ formatNumberComma($vDetail['sub_total']+$vDetail['biaya_tambahan'] ?? 0) }}</td>
                                    </tr>
                                    <tr class="collapse" data-bs-parent="#table-kasir" id="detail-info-{{$vDetail['id']}}">
                                        <td colspan="9">
                                            <ul>
                                                @foreach ($vDetail['data_sub'] as $vSub)
                                                @php
                                                $stokBrang = $vSub->stokBarang
                                                @endphp
                                                <li>{{ "Nomor Urut: ".$stokBrang['sort']."; Kode Lot: ".$stokBrang['kode_lot']."; QRCode: ".$stokBrang['qrcode']."; QTY: ".formatNumber($vSub['qty_timbang'])." ".$vDetail['satuan_stock']; }}</li>
                                                @endforeach
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach

                                    @if ($jmlData <= 0)
                                        <tr>
                                        <td colspan="9">Belum terdapat data</td>
                                        </tr>
                                        @endif
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="2" style="font-size: 15px; font-weight: bold; text-align: right; color: red">
                                            TOTAL BERAT TIMBANG BARU
                                        </td>
                                        <td colspan="2">
                                            <input type="text" name="total_timbang_berat_baru" id="total_timbang_berat_baru" class="form-control text-end" onkeyup="dottocomma(this)" onchange="formatInputUang(this);">
                                        </td>
                                        <td colspan="5"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 25px;">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="kalkulasi" class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <td></td>
                                        <td class="label-amount-sm">Potongan</th>
                                        <td class="amount">
                                            <div class="d-flex align-items-center">
                                                <select name="potongan" id="potongan" class="form-control form-control-lg me-2" style="width: auto;">
                                                    <option value="">-</option>
                                                    <option value="persen">%</option>
                                                    <option value="nominal">Rp.</option>
                                                </select>

                                                <input type="text" disabled name="input_potongan" id="input_potongan"
                                                    class="form-control form-control-lg  sanitizeMinusSign text-end formatInputUang"
                                                    placeholder="0"
                                                    value="{{ formatNumber(0) }}"
                                                    onkeyup="dottocomma(this)"
                                                    onchange="formatInputUang(this)">
                                            </div>
                                            <div class="form-text text-end" id="nominal-potongan" style="display: none"></div>
                                            <div class="form-text text-end" id="persen-potongan" style="display: none"></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td class="label-amount">Subtotal</th>
                                        <td class="amount">
                                            <input type="text" class="form-control form-control-lg text-end" value="{{ formatNumberComma($jmlTotal) }}" id="sub-total" readonly>
                                        </td>
                                    </tr>
                                    <tr class="box-pajak" id="box-pajak"></tr>
                                    <tr class="box-biaya-lain" id="box-biaya-lain"></tr>
                                    <tr>
                                        <td></td>
                                        <td class="label-amount">Total</th>
                                        <td class="amount">
                                            <input type="text" class="form-control form-control-lg text-end" value="{{ formatNumberComma($jmlTotal) }}" id="total" readonly>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td class="label-amount-sm">Pembulatan</th>
                                        <td class="amount">
                                            <input type="text" class="form-control form-control-lg text-end formatInputUang" value="0" id="pembulatan">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td class="label-amount" style="font-size: 20px;">Grand Total</th>
                                        <td class="amount">
                                            <input type="text" class="form-control form-control-lg text-end" value="{{ formatNumberComma($jmlTotal) }}" id="grand-total" readonly>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <div>
                    <button type="button" class="btn btn-primary btn-custom4 text-white" onclick="addPajak()">Tambah Pajak</button>
                    <button type="button" class="btn btn-info btn-custom4 text-white" onclick="addBiaya()">Tambah Biaya lain</button>
                </div>
                <div>
                    <a class="btn btn-primary btn-custom3" href="#pembayaran">Form Bayar</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12 mb-3">
        <div class="card">
            <div class="card-header bg-white">
                <h5>Riwayat Pembayaran</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive" style="overflow-x: auto;">
                    <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nomor</th>
                                <th>Metode Bayar</th>
                                <th>Rekening Perusahaan</th>
                                <th>Tanggal</th>
                                <th>Nominal</th>
                                <th>No Ref</th>
                                <th>File</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" id="pembayaran">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5>Form Bayar</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6 mt-1 mb-3">
                        <label class="form-label fw-bold">Metode Bayar</label>
                        <select name="metode_bayar_id" id="metode_bayar_id" class="form-select form-select-lg">
                            <option value="" data-tunai="0">Silahkan Pilih</option>
                            @foreach ($listMetodeBayar as $vMB)
                            <option value="{{ $vMB->id }}" data-tunai="{{ $vMB->tunai == true ? '1' : '0' }}">
                                {{ $vMB->nama }} @if ($vMB->nama == "DEPOSIT") (Rp. {{ formatNumber($totalDeposit) }}) @endif
                            </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="total_deposit" id="total_deposit" value="{{ $totalDeposit }}">
                    </div>
                    <div class="col-6 mt-1 mb-3">
                        <label class="form-label fw-bold">Rekening Tujuan</label>
                        <input type="text" id="rekening_perusahaan" class="form-control form-control-lg" placeholder="Rekening Perusahaan" disabled="disabled">
                    </div>
                    <div class="col-6 mt-1 mb-3">
                        <label class="form-label fw-bold">Tanggal Pembayaran</label>
                        <input type="datetime-local" name="tanggal_transfer_pembayaran" id="tanggal_transfer_pembayaran" class="form-control form-control-lg" placeholder="Tanggal Pembayaran" value="{{ date('Y-m-d\TH:i:s') }}">
                    </div>
                    <div class="col-6 mt-1 mb-3">
                        <label class="form-label fw-bold">Bukti Pembayaran</label>
                        <input type="file" name="file_transfer" id="file_transfer" class="form-control form-control-lg" placeholder="Bukti Pembayaran">
                    </div>
                    <div class="col-12 mt-1 mb-3">
                        <label class="form-label fw-bold">Nomor Referensi</label>
                        <input type="text" name="nomor_transaksi" id="nomor_transaksi" class="form-control form-control-lg" placeholder="Nomor Referensi">
                    </div>
                    <div class="col-12 mt-1 mb-3">
                        <label class="form-label fw-bold">Sudah dibayar</label>
                        <input type="text" id="sudah-dibayar" class="form-control form-control-lg" placeholder="0" readonly="readonly" value="{{ formatNumberComma($dp) ?? 0 }}">
                    </div>
                    <div class="col-12 mt-1 mb-3">
                        <label class="form-label fw-bold">Potongan</label>
                        <input type="text" name="potongan_akhir" id="potongan_akhir" class="formatInputUang form-control form-control-lg sanitizeMinusSign" placeholder="Potongan">
                    </div>
                    <div class="col-12 mt-1 mb-3">
                        <label class="form-label fw-bold">Jumlah Bayar</label>
                        <input type="text" name="uang_dibayarkan" id="uang_dibayarkan" class="formatInputUang form-control-lg form-control removeMinusSign" placeholder="Jumlah Bayar">
                    </div>
                    <input type="hidden" name="dpp" id="dpp" class="form-control form-control-lg" placeholder="DPP" readonly="readonly" value="{{ $jmlTotal-$dp }}">
                </div>
                <div class="row mt-4">
                    <div class="col-8">
                        <div class="text-center">
                            <label class="form-label fw-bold" id="label-bayar">Kurang Bayar</label>
                            <hr />
                            <h1 id="bayar" data-total_penjualan="0" data-grand_total_penjualan="0">Rp. {{ formatNumber($jmlTotal-$dp) }}</h1>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="p-1">
                            <button class="btn btn-primary btn-custom2 w-100 fontgede" id="btnBayar">Bayar</button>
                        </div>
                        <div class="p-1">
                            <a href="#detail-penjualan" class="btn btn-primary btn-custom6 w-100 fontgede">Detail Penjualan</a>
                        </div>
                        <div class="p-1">
                            <button class="btn btn-primary btn-custom6 w-100 fontgede" id="btnPrint">Cetak Nota</button>
                        </div>
                        <div class="p-1">
                            <button class="btn btn-primary btn-custom5 w-100 fontgede" id="btnBatal">Batal Transaksi</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalBatal" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Batal Transaksi</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <textarea name="keterangan_batal_transaksi" id="keterangan_batal_transaksi" cols="30" rows="10" class="form-control" placeholder="Keterangan Batal Transaksi"></textarea>
                        </div>
                        <div class="col-12 mt-3" style="text-align: right;">
                            <button type="button" id="btnBatalData" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>
@include('pages.penjualan.kasir.input-kasir-js')
{{-- @include('pages.penjualan.kasir.input-kasir-js-old') --}}
@endpush