@extends('component.app')
<style>
    body {
        font-size: 11px !important;
    }

    @media (max-width: 576px) {
        .select2-container--default .select2-selection--single {
            font-size: 12px;
            /* Adjust font size */
        }

        body {
            font-size: 12px !important;
        }

        h5 {
            font-size: 12px !important;
        }

        .data-paket {
            height: 100px !important;
        }
    }
</style>
@section('active2', 'active')
@section('title', 'Kasir')
@section('content')

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="mt-1">
                <div class="card mb-5">
                    <h4 class="card-header">Transaksi Baru</h4>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <div class="mb-4">
                                    <label for="smallInput" class="form-label">Transaksi</label>
                                    <input id="smallInput" class="form-control form-control-sm" type="text"
                                        placeholder="Kode Transaksi" />
                                </div>
                                <div class="mb-4">
                                    <label for="smallSelect" class="form-label">Kasir</label>
                                    <select id="kasir" class="form-select form-select-sm">
                                        <option>Pilih Kasir</option>
                                        <option value="1">User 1</option>
                                        <option value="2">User 2</option>
                                        <option value="3">User 3</option>
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <label for="smallSelect" class="form-label">Pelanggan</label>
                                    <select id="pelanggan" class="form-select form-control-sm">
                                        <option>Pilih Pelanggan</option>
                                        <option value="1">User 1</option>
                                        <option value="2">User 2</option>
                                        <option value="3">User 3</option>
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <label for="smallInput" class="form-label">Tgl Masuk</label>
                                    <input id="smallInput" class="form-control " type="date" placeholder="Tgl Masuk" />
                                </div>
                                <div class="mb-4">
                                    <label for="smallInput" class="form-label">Tgl Selesai</label>
                                    <input id="smallInput" class="form-control" type="date" placeholder="Tgl Masuk" />
                                </div>


                            </div>
                            <div class="col-6">

                                <div class="mb-4">
                                    <label for="smallSelect" class="form-label">Pilih Parfum</label>
                                    <select id="smallSelect" class="form-select form-select-sm">
                                        <option>Pilih Parfum</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label mb-2">Status Pembayaran</label>
                                    <br>
                                    <div class="form-check-inline">
                                        <input class="form-check-input" type="radio" name="paymentStatus" id="sudahbayar">
                                        <label class="form-check-label" for="sudahbayar">
                                            Sudah Bayar
                                        </label>
                                    </div>
                                    <div class="form-check-inline">
                                        <input class="form-check-input" type="radio" name="paymentStatus" id="belumbayar"
                                            checked>
                                        <label class="form-check-label" for="belumbayar">
                                            Belum Bayar
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-4 d-none" id="metode-pembayaran">
                                    <label class="form-label mb-2">Metode Pembayaran</label>
                                    <br>
                                    <div class="form-check-inline">
                                        <input class="form-check-input" type="radio" name="paymentMethod"
                                            id="flexRadioCash">
                                        <label class="form-check-label" for="flexRadioCash">
                                            Cash
                                        </label>
                                    </div>
                                    <div class="form-check-inline">
                                        <input class="form-check-input" type="radio" name="paymentMethod"
                                            id="flexRadioTransfer" checked>
                                        <label class="form-check-label" for="flexRadioTransfer">
                                            Transfer
                                        </label>
                                    </div>
                                </div>


                                <div>
                                    <label for="exampleFormControlTextarea1" class="form-label">Keterangan</label>
                                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                                </div>

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

                <div class="row data-paket">
                    <!-- Daftar Produk -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>Data Paket</h4>
                            </div>
                            <div class="card-body">
                                <div id="produkCarousel" class="carousel slide" data-bs-ride="carousel">
                                    <div class="carousel-inner">
                                        <!-- Slide 1 -->
                                        <div class="carousel-item active">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="card">
                                                        <img src="{{ asset('5.png') }}" class="card-img-top"
                                                            alt="Product Image"
                                                            style="width: 100%; height: 150px; object-fit: cover">
                                                        <div class="card-body text-center">
                                                            <h5 class="card-title text-dark">Selimut</h5>
                                                            <p class="card-text">10.000/pcs</p>
                                                            <button class="btn btn-sm btn-success btn-block pilih-produk"
                                                                data-nama="Selimut" data-harga="10000" data-id="5"
                                                                data-satuan="pcs"><i class="bx bx-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="card">
                                                        <img src="{{ asset('2.png') }}" class="card-img-top"
                                                            alt="Product Image"
                                                            style="width: 100%; height: 150px; object-fit: cover">
                                                        <div class="card-body text-center">
                                                            <h5 class="card-title text-dark">Cuci Standar</h5>
                                                            <p class="card-text">Rp. 4.000/kg</p>
                                                            <button class="btn btn-sm btn-success btn-block pilih-produk"
                                                                data-nama="Cuci Standar" data-harga="4000" data-id="2"
                                                                data-satuan="kg"><i class="bx bx-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Slide 2 -->
                                        <div class="carousel-item">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="card">
                                                        <img src="{{ asset('3.png') }}" class="card-img-top"
                                                            alt="Product Image"
                                                            style="width: 100%; height: 150px; object-fit: cover">
                                                        <div class="card-body text-center">
                                                            <h5 class="card-title text-dark">Sepatu</h5>
                                                            <p class="card-text">Rp. 30.000/psg</p>
                                                            <button class="btn btn-sm btn-success btn-block pilih-produk"
                                                                data-nama="Sepatu" data-harga="30000" data-id="3"
                                                                data-satuan="pasang"><i class="bx bx-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="card">
                                                        <img src="{{ asset('4.png') }}" class="card-img-top"
                                                            alt="Product Image"
                                                            style="width: 100%; height: 150px; object-fit: cover">
                                                        <div class="card-body text-center">
                                                            <h5 class="card-title text-dark">Jaket</h5>
                                                            <p class="card-text">Rp.2500/pcs</p>
                                                            <button class="btn btn-sm btn-success btn-block pilih-produk"
                                                                data-nama="Jaket" data-harga="2500" data-id="4"
                                                                data-satuan="pcs"><i class="bx bx-plus"></i></button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Controls -->
                                    <button class="carousel-control-prev" type="button" data-bs-target="#produkCarousel"
                                        data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" style="filter: invert(100%);"></span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#produkCarousel"
                                        data-bs-slide="next">
                                        <span class="carousel-control-next-icon" style="filter: invert(100%);"></span>
                                    </button>
                                </div>

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

                    <!-- Keranjang Belanja -->
                    <div class="col-md-6 mt-2">
                        <div class="card">
                            <div class="card-header">
                                <h4>Detail Transaksi</h4>
                            </div>
                            <div class="card-body">
                                <ul class="list-group mb-3" id="keranjang-belanja">
                                    <!-- Produk akan ditambahkan di sini -->
                                </ul>
                                <hr>
                                <h4>Total: Rp. <span id="total-harga">0</span></h4>
                            </div>
                            <button class="btn btn-primary btn-block">Simpan</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>
    </div>

@endsection

<script script src="https://code.jquery.com/jquery-3.7.1.js"
    integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        let totalHarga = 0;

        // Menggunakan event delegation untuk menangani klik tombol "Pilih"
        $(document).on("click", ".pilih-produk", function() {
            let namaProduk = $(this).data("nama");
            let hargaProduk = $(this).data("harga");
            let idProduk = $(this).data("id");
            let satuanProduk = $(this).data("satuan");

            // Hitung total harga untuk qty awal (1)
            let totalPerProduk = hargaProduk;

            // Tambahkan produk ke keranjang dengan input qty dan tombol hapus
            $("#keranjang-belanja").append(
                '<li class="list-group-item d-flex justify-content-between align-items-center" data-id="' +
                idProduk + '">' +
                '<div>' +
                namaProduk + ' <br> ' +
                '<span class="harga-produk">Rp. ' + hargaProduk.toLocaleString('id-ID') +
                '</span>' +
                ' x ' +
                '<input type="number" class="qty form-control form-control-sm d-inline-block" name="qty" value="1" min="0.01" step="0.01" style="width: 70px; margin-right: 10px;" />' +
                satuanProduk + ' = ' +
                '<span class="total-per-produk badge bg-secondary">Rp. ' + totalPerProduk
                .toLocaleString('id-ID') + '</span>' +
                '</div>' +
                '<div class="p-2">' +
                '<span class="badge bg-warning save-produk"><i class="bx bx-check"></i></span>' +
                '<span class="badge bg-danger hapus-produk"><i class="bx bx-trash"></i></span>' +
                '</div>' +
                '</li>'
            );

            // Tambahkan harga produk ke total harga keseluruhan
            totalHarga += totalPerProduk;
            $("#total-harga").text(totalHarga.toLocaleString('id-ID'));
        });

        // Event handler untuk perubahan jumlah (qty)
        $(document).on("change", ".qty", function() {
            let $li = $(this).closest("li");
            let hargaProduk = parseFloat($li.find(".harga-produk").text().replace("Rp. ", "").replace(
                /\./g, ""));
            let qtyBaru = parseFloat($(this).val());

            // Hitung total harga per produk berdasarkan qty baru
            let totalPerProduk = hargaProduk * qtyBaru;

            // Update tampilan total per produk
            $li.find(".total-per-produk").text('Rp. ' + totalPerProduk.toLocaleString('id-ID'));

            // Hitung ulang total harga keseluruhan
            let totalHargaBaru = 0;
            $("#keranjang-belanja .total-per-produk").each(function() {
                totalHargaBaru += parseInt($(this).text().replace("Rp. ", "").replace(/\./g,
                    ""));
            });

            // Update total harga di tampilan
            $("#total-harga").text(totalHargaBaru.toLocaleString('id-ID'));
        });

        // Event handler untuk tombol hapus
        $(document).on("click", ".hapus-produk", function() {
            let $li = $(this).closest("li");
            let qtyProduk = parseFloat($li.find(".qty").val());
            let hargaProduk = parseFloat($li.find(".harga-produk").text().replace("Rp. ", "").replace(
                /\./g, ""));
            let totalPerProduk = qtyProduk * hargaProduk;

            // Kurangi total harga dengan harga produk yang dihapus
            totalHarga -= totalPerProduk;

            // Hapus produk dari keranjang
            $li.remove();

            // Cek apakah keranjang kosong
            if ($("#keranjang-belanja li").length === 0) {
                totalHarga = 0;
            } else {
                // Hitung ulang total harga keseluruhan setelah penghapusan
                totalHarga = 0;
                $("#keranjang-belanja .total-per-produk").each(function() {
                    totalHarga += parseInt($(this).text().replace("Rp. ", "").replace(/\./g,
                        ""));
                });
            }

            // Update total harga di tampilan
            $("#total-harga").text(totalHarga.toLocaleString('id-ID'));
        });
    });
</script>


{{-- if radio button selected id="sudahbayar" maka d-block id="metode-pembayaran" --}}
<script>
    $(document).ready(function() {
        $('#sudahbayar').on('change', function() {
            if ($(this).is(':checked')) {
                $('#metode-pembayaran').removeClass('d-none');
            } else {
                $('#metode-pembayaran').addClass('d-none');
            }
        });
        $('#belumbayar').on('change', function() {
            if ($(this).is(':checked')) {
                $('#metode-pembayaran').addClass('d-none');
            } else {
                $('#metode-pembayaran').removeClass('d-none');
            }
        });
    });
</script>