<!doctype html>
<html lang="en" class="light-style layout-menu-fixed layout-compact" dir="ltr" data-theme="theme-default"
    data-assets-path="../assets/" data-template="vertical-menu-template-free" data-style="light">

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

    <title>Kasir</title>

    <meta name="description" content="" />

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{{ asset('template/assets/img/favicon/favicon.ico') }}" />

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
        rel="stylesheet" />

    <link rel="stylesheet" href="{{ asset('template/assets/vendor/fonts/boxicons.css') }}" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="{{ asset('template/assets/vendor/css/core.css') }}"
        class="template-customizer-core-css" />
    <link rel="stylesheet" href="{{ asset('template/assets/vendor/css/theme-default.css') }}"
        class="template-customizer-theme-css" />
    <link rel="stylesheet" href="{{ asset('template/assets/css/demo.css" ') }}" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="{{ asset('template//assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css') }}" />
    <link rel="stylesheet" href="{{ asset('template/assets/vendor/libs/apex-charts/apex-charts.css') }}" />

    <!-- Helpers -->
    <script src="{{ asset('template/assets/vendor/js/helpers.js') }}"></script>
    <script src="{{ asset('template/assets/js/config.js') }}"></script>
    <!-- css untuk select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.bootstrap5.min.css">
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

</head>
<style>
    table td {
        font-size: 12px;
    }

    /* Ensure the container is responsive */
    .select2-container {
        max-width: 100%;
    }

    /* Adjust the dropdown width on smaller screens */
    @media (max-width: 576px) {
        .select2-container--default .select2-selection--single {
            font-size: 14px;
            /* Adjust font size */
        }

        .select2-container--default .select2-selection--multiple {
            font-size: 14px;
            /* Adjust font size for multiple select */
        }
    }

    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;
        }

        .profile-namenya {
            display: none;
        }
    }

    .paket-card {
        position: relative;
        overflow: hidden;
        border: none;
        transition: transform 0.3s ease;
    }

    .paket-card:hover {
        transform: scale(1.05);
    }

    .paket-img-wrapper {
        position: relative;
    }

    .paket-img {
        transition: transform 0.3s ease;
    }

    .paket-card:hover .paket-img {
        transform: scale(1.1);
        filter: brightness(70%);
    }

    .paket-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(7, 38, 104, 0.7);
        color: #fff;
        opacity: 0;
        padding: 10px;
        transition: opacity 0.3s ease, bottom 0.3s ease;
        transform: translateY(100%);
    }

    .paket-card:hover .paket-info {
        opacity: 1;
        transform: translateY(0);
    }
</style>

<body>
    @if (session('success'))
        <script>
            swal({
                title: "Good job!",
                text: "{{ session('success') }}!",
                icon: "success",
                button: "OK",
                className: "custom-swal-background",
            });
        </script>
    @elseif (session('error'))
        <script>
            swal({
                title: "Oops!",
                text: "{{ session('error') }}!",
                icon: "error",
                button: "OK",
                className: "custom-swal-background",
            });
        </script>
    @endif
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
        <div class="container-fluid ">
            <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
                id="layout-navbar">
                {{-- <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
                    <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
                        <i class="bx bx-menu bx-md"></i>
                    </a>
                </div> --}}
                <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">

                    <div class="navbar-nav align-items-center">
                        <div class="nav-item d-flex align-items-center ">

                            <a href="{{ route('dashboard') }}" class="nav-link px-0 me-xl-6"> <i
                                    class="bx bx-arrow-back bx-sm"></i> Dashboard</a>
                        </div>
                    </div>

                    <ul class="navbar-nav flex-row align-items-center ms-auto">
                        <li class="nav-item navbar-dropdown dropdown-user dropdown">
                            <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);"
                                data-bs-toggle="dropdown">
                                <div class="avatar avatar-online d-flex align-items-center justify-content-end gap-3">
                                    <h6 class="mb-0 profile-namenya">
                                        {{ Auth::check() ? Auth::user()->username : '' }}</h6>
                                    <img src="{{ asset('template/assets/img/avatars/1.png') }}" alt
                                        class="w-px-40 h-auto rounded-circle" />
                                </div>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="avatar avatar-online">

                                                    <img src="{{ asset('template/assets/img/avatars/1.png') }}" alt
                                                        class="w-px-40 h-auto rounded-circle" />
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0">
                                                    {{ Auth::check() ? Auth::user()->username : '' }}</h6>
                                                <small
                                                    class="text-muted">{{ Auth::check() ? Auth::user()->role : '' }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <div class="dropdown-divider my-1"></div>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#"> <i
                                            class="bx bx-cog bx-md me-3"></i><span>Settings</span> </a>
                                </li>
                                <li>
                                    <div class="dropdown-divider my-1"></div>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                        <i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span> </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                        class="d-none">
                                        @csrf
                                    </form>

                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>

            <!-- / Navbar -->

            <!-- Content wrapper -->
            <div class="content-wrapper">

                <div class="content-wrapper">
                    <!-- Content -->
                    <div class="container-xxl flex-grow-1 container-p-y">
                        <div class="mt-1">
                            <div class="row ">
                                <div class="col-md-4 mb-3">
                                    <div class="row  gy-4 gy-sm-1">
                                        <div class="col-md-12">
                                            <div class="card">
                                                @if ($kasir == null)
                                                    <button class="btn btn-primary form-control"
                                                        id="btn-tambah-transaksi" data-bs-toggle="modal"
                                                        data-bs-target="#staticBackdrop">Buka
                                                        Kasir</button>
                                                @else
                                                    <button class="btn btn-danger form-control"
                                                        id="btn-tambah-transaksi" data-bs-toggle="modal"
                                                        data-bs-target="#staticBackdropTutup">Tutup
                                                        Kasir</button>
                                                @endif
                                                <div class="card-body">
                                                    <h5 class="card-title text-center">Informasi Kasir</h5>
                                                    <div class="row">

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

                                                            <div class=" d-flex flex-column align-items-center ">
                                                                @php
                                                                    if ($kasir != null) {
                                                                        # code...
                                                                        $pegawai = App\Models\Pegawai::where(
                                                                            'users_id',
                                                                            $kasir->users_id,
                                                                        )->first();

                                                                        // hitung transaksi dari laundry ini
                                                                        $total_trx = App\Models\Transaksi::where(
                                                                            'laundry_id',
                                                                            $kasir->laundry_id,
                                                                        )
                                                                            ->where('kasir_id', $kasir->id)
                                                                            ->count();

                                                                        $paid_trx = App\Models\Transaksi::where(
                                                                            'laundry_id',
                                                                            $kasir->laundry_id,
                                                                        )
                                                                            ->where('kasir_id', $kasir->id)
                                                                            ->where('is_bayar', 1)
                                                                            ->count();
                                                                        $unpaid_trx = App\Models\Transaksi::where(
                                                                            'laundry_id',
                                                                            $kasir->laundry_id,
                                                                        )
                                                                            ->where('kasir_id', $kasir->id)
                                                                            ->where('is_bayar', 0)
                                                                            ->count();
                                                                    } else {
                                                                        $pegawai = null;
                                                                        $today_trx = null;
                                                                        $paid_trx = null;
                                                                        $unpaid_trx = null;
                                                                    }

                                                                @endphp

                                                                @if ($kasir != null)
                                                                    <img src="{{ asset('storage/img' . '/' . $pegawai->foto) }}"
                                                                        alt class=" h-auto"
                                                                        style="width: 150px; object-fit: cover" />
                                                                @else
                                                                    <img src="{{ asset('template/assets/img/avatars/1.png') }}"
                                                                        alt="" class=" h-auto"
                                                                        style="width: 150px; object-fit: cover">
                                                                @endif
                                                                <p
                                                                    class="icon-name text-capitalize text-truncate mt-2">
                                                                    {{ $pegawai ? $pegawai->nama : '-' }}</p>


                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="mb-1">
                                                                <label for="smallInput"
                                                                    class="form-label">Laundry</label>
                                                                <input type="text"
                                                                    class="form-control form-control-sm"
                                                                    placeholder="Laundry"
                                                                    value="{{ $pegawai ? $pegawai->laundry->nama_laundry : '-' }}"
                                                                    readonly>
                                                            </div>
                                                            <div class="mb-1">
                                                                <label for="smallInput" class="form-label">Tgl.
                                                                    Buka
                                                                    Kasir</label>
                                                                <input type="text"
                                                                    class="form-control form-control-sm"
                                                                    placeholder="Tgl. Transaksi"
                                                                    value="{{ $kasir ? $kasir->tgl_buka : '-' }}"
                                                                    readonly>
                                                            </div>
                                                            <div class="mb-1">
                                                                <label for="smallInput" class="form-label">Jam
                                                                    Buka</label>
                                                                <input type="text"
                                                                    class="form-control form-control-sm"
                                                                    placeholder="Tgl. Transaksi"
                                                                    value="{{ $kasir ? $kasir->jam_buka : '-' }}"
                                                                    readonly>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="row gy-4 gy-sm-1 mt-3">
                                                        <div class="col-6">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center border-end pb-4 pb-sm-0 card-widget-3">
                                                                <div>
                                                                    <h5 class="mb-0">
                                                                        {{ $kasir ? number_format($kasir->opening_balance, 0, ',', '.') : '-' }}
                                                                    </h5>
                                                                    <p class="mb-0">Opening Balance</p>
                                                                </div>
                                                                <div class="avatar me-sm-6">
                                                                    <span
                                                                        class="avatar-initial rounded bg-label-secondary text-heading">
                                                                        <i class="bx bx-money bx-26px"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center">
                                                                <div>
                                                                    @php
                                                                        if ($kasir != null) {
                                                                            $balanced_trx = App\Models\Transaksi::where(
                                                                                'kasir_id',
                                                                                $kasir->id,
                                                                            )->sum('balanced_trx');
                                                                        } else {
                                                                            $balanced_trx = 0;
                                                                        }

                                                                    @endphp
                                                                    <h5 class="mb-0">
                                                                        {{ $kasir ? number_format($balanced_trx, 0, ',', '.') : '0' }}
                                                                    </h5>
                                                                    <p class="mb-0">Balanced Transaction</p>
                                                                </div>
                                                                <div class="avatar">
                                                                    <span
                                                                        class="avatar-initial rounded bg-label-secondary text-heading">
                                                                        <i class="bx bx-list-ul bx-26px"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row gy-4 gy-sm-1 mt-4">
                                                        <div class="col-6">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center border-end pb-4 pb-sm-0 card-widget-3">
                                                                <div>
                                                                    <h5 class="mb-0">
                                                                        {{ $kasir ? $paid_trx : '0' }}</h5>
                                                                    </h5>
                                                                    <p class="mb-0">Paid Trx</p>
                                                                </div>
                                                                <div class="avatar me-sm-6">
                                                                    <span
                                                                        class="avatar-initial rounded bg-label-secondary text-heading">
                                                                        <i class="bx bx-check-double bx-26px"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-6">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center">
                                                                <div>
                                                                    <h5 class="mb-0">
                                                                        {{ $kasir ? $unpaid_trx : '0' }}</h5>
                                                                    </h5>
                                                                    <p class="mb-0">Unpaid</p>
                                                                </div>
                                                                <div class="avatar">
                                                                    <span
                                                                        class="avatar-initial rounded bg-label-secondary text-heading">
                                                                        <i class="bx bx-error-circle bx-26px"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

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



                                </div>
                                <div class="col-md-8">
                                    <div class="card mb-2">
                                        <form action="{{ route('transaksi.store') }}" method="POST"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="boxnya d-flex justify-content-between align-items-center">
                                                <h4 class="card-header p-4">Transaksi Baru</h4>
                                                @if ($kasir != null)
                                                    <button type="submit" id="btn-submit"
                                                        class="btn btn-primary btn-block me-4">Simpan</button>
                                                @endif
                                            </div>

                                            <div class="card-body">

                                                <div class="row">
                                                    <div class="col-6">
                                                        <div class="mb-4">
                                                            <div
                                                                class="box-nya d-flex align-items-center justify-content-between mb-2">
                                                                <label for="smallSelect"
                                                                    class="form-label">Pelanggan</label>
                                                                <span class="btn btn-sm p-1 btn-warning"
                                                                    id="btn-tambah-transaksi" data-bs-toggle="modal"
                                                                    data-bs-target="#staticBackdropPelanggan"><i
                                                                        class="bx bx-plus bx-sm"></i>
                                                                </span>
                                                            </div>
                                                            <select id="pelanggan" name="pelanggan_id"
                                                                class="form-select form-control-sm">
                                                                <option>Pilih Pelanggan</option>
                                                                @if ($pelanggan != null)
                                                                    @foreach ($pelanggan as $pelanggan)
                                                                        <option value="{{ $pelanggan->id }}">
                                                                            {{ $pelanggan->nama }} -
                                                                            {{ $pelanggan->no_telp }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                        <div class="mb-4">
                                                            <label for="smallInput" class="form-label">Tgl
                                                                Selesai</label>
                                                            <input id="smallInput" class="form-control"
                                                                type="date" placeholder="Tgl Selesai"
                                                                name="tgl_selesai" />
                                                        </div>
                                                        <div>
                                                            <label for="exampleFormControlTextarea1"
                                                                class="form-label">Keterangan</label>
                                                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="keterangan"></textarea>
                                                        </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" name="parfum_id">
                                                                <option>Pilih Parfum</option>
                                                                @if ($parfum != null)
                                                                    @foreach ($parfum as $parfum)
                                                                        <option value="{{ $parfum->id }}">
                                                                            {{ $parfum->nama_parfum }} -
                                                                            {{ $parfum->wangi }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </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="is_bayar" id="sudahbayar" value="1">
                                                                <label class="form-check-label" for="sudahbayar">
                                                                    Sudah Bayar
                                                                </label>
                                                            </div>
                                                            <div class="form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="is_bayar" id="belumbayar" value="0">
                                                                <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="is_cash" id="cash" value="1">
                                                                <label class="form-check-label" for="flexRadioCash">
                                                                    Cash
                                                                </label>
                                                            </div>
                                                            <div class="form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    name="is_cash" value="0" id="transfer">
                                                                <label class="form-check-label"
                                                                    for="flexRadioTransfer">
                                                                    Transfer
                                                                </label>
                                                            </div>
                                                        </div>

                                                        <div class="mb-4 d-none" id="pilih-pembayaran-transfer">
                                                            <label for="smallSelect" class="form-label">Jenis
                                                                Pembayaran</label>
                                                            <select id="jpx" class="form-select form-select-sm"
                                                                name="metode_id">
                                                                <option value="">--Pilih Metode Pembayaran--
                                                                </option>
                                                                @if ($metode != null)
                                                                    @foreach ($metode as $metode)
                                                                        <option value="{{ $metode->id }}">
                                                                            {{ $metode->jenis_pembayaran }} -
                                                                            {{ $metode->no_rek }}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>

                                                        <!-- Input hidden untuk total harga -->
                                                        <input type="hidden" name="total_harga"
                                                            id="input-total-harga" value="0">
                                                        <!-- Hidden inputs untuk produk akan ditambahkan di sini -->
                                                        <div id="produk-hidden-inputs"></div>
                                                        <input type="hidden" name="pegawai_id"
                                                            value="{{ Auth::check() ? Auth::user()->id : '' }}">
                                                        <input type="hidden" name="kasir_id"
                                                            value="{{ $kasir ? $kasir->id : '' }}">
                                                        <input type="hidden" name="laundry_id"
                                                            value="{{ $kasir ? $kasir->laundry_id : '' }}">
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- Pelanggan Baru -->
            <div class="modal fade" id="staticBackdropPelanggan" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content ">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Tambah Data Pelanggan</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form action="{{ route('kasir.pelanggan_baru') }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <!-- Kolom Kiri -->
                                    <div class="col-md-6">
                                        <!-- Laundry -->
                                        <input type="text" name="laundry_id"
                                            value="{{ $kasir ? $kasir->laundry_id : '' }}" hidden>
                                        <!-- Username -->
                                        <div class="mb-3">
                                            <label for="username" class="form-label">Username</label>
                                            <input type="text" class="form-control" id="username"
                                                name="username" placeholder="Masukkan Username"
                                                value="{{ $username_pelanggan }}" required>
                                        </div>

                                        <!-- Email -->
                                        <div class="mb-3">
                                            <label for="email" class="form-label">Email</label>
                                            <input type="email" class="form-control" id="email" name="email"
                                                placeholder="Masukkan Email" value="{{ $email_pelanggan }}" required>
                                        </div>

                                        <!-- Password -->
                                        <div class="mb-3">
                                            <label for="password" class="form-label">Password</label>
                                            <input type="password" class="form-control" id="password"
                                                name="password" value="{{ $password_pelanggan }}" readonly required>
                                        </div>

                                        <!-- Phone -->
                                        <div class="mb-3">
                                            <label for="phone" class="form-label">No. Telp</label>
                                            <input type="text" class="form-control" id="phone" name="no_telp"
                                                placeholder="Masukkan No. Telp" required>
                                        </div>
                                    </div>

                                    <!-- Kolom Kanan -->
                                    <div class="col-md-6">
                                        <!-- Nama -->
                                        <div class="mb-3">
                                            <label for="nama" class="form-label">Nama</label>
                                            <input type="text" class="form-control" id="nama" name="nama"
                                                placeholder="Masukkan Nama" required>
                                        </div>

                                        <!-- Alamat -->
                                        <div class="mb-3">
                                            <label for="alamat" class="form-label">Alamat</label>
                                            <textarea class="form-control" id="alamat" name="alamat" placeholder="Masukkan Alamat" rows="3" required></textarea>
                                        </div>

                                        <!-- Foto -->
                                        <div class="mb-3">
                                            <label for="foto" class="form-label">Foto</label>
                                            <input type="file" class="form-control" id="foto"
                                                name="foto">
                                            <span class="text-danger">*Bisa dikosongi</span></span>
                                        </div>
                                    </div>
                                </div>

                        </div>

                        <div class="modal-footer">
                            {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row data-paket">
                <!-- Daftar Produk -->
                <div class="col-md-7">

                    <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">
                                    @if ($paket != null)


                                        @foreach ($paket->chunk(2) as $paketChunk)
                                            <div class="carousel-item @if ($loop->first) active @endif">
                                                <div class="row">
                                                    @foreach ($paketChunk as $paket)
                                                        <div class="col-6">
                                                            <div class="card paket-card">
                                                                <div class="paket-img-wrapper">
                                                                    <img src="{{ asset('storage/img/' . $paket->foto) }}"
                                                                        class="card-img-top paket-img"
                                                                        alt="{{ $paket->nama_paket }}"
                                                                        style="width: 100%; height: 200px; object-fit: cover">
                                                                </div>
                                                                <div class="card-body text-center paket-info">
                                                                    <h5 class="card-title text-primary">
                                                                        {{ $paket->nama_paket }}</h5>
                                                                    <p class="card-text">
                                                                        {{ number_format($paket->harga, 0, ',', '.') }}/{{ $paket->satuan }}
                                                                    </p>
                                                                    <span
                                                                        class="btn btn-sm btn-success btn-block pilih-produk"
                                                                        data-nama="{{ $paket->nama_paket }}"
                                                                        data-harga="{{ $paket->harga }}"
                                                                        data-id="{{ $paket->id }}"
                                                                        data-satuan="{{ $paket->satuan }}">
                                                                        <i class="bx bx-plus"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>

                                @if ($kasir != null)
                                    <!-- Controls -->
                                    <span class="carousel-control-prev" data-bs-target="#produkCarousel"
                                        data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" style="filter: invert(100%);"></span>
                                    </span>
                                    <span class="carousel-control-next" data-bs-target="#produkCarousel"
                                        data-bs-slide="next">
                                        <span class="carousel-control-next-icon" style="filter: invert(100%);"></span>
                                    </span>
                                @endif
                            </div>

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

                <div class="col-md-5">
                    <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>
                    </div>
                </div>

            </div>


        </div>
    </div>

    {{-- modal bootstrap buka kasir --}}

    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content ">
                <div class="modal-header">
                    <h5 class="modal-title text-center" id="staticBackdropLabel">Buka Kasir</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('kasir.store') }}" method="POST">
                        @csrf
                        <div class="row">
                            {{-- cari laundry dari user yang sedang login --}}
                            @php
                                $id = Auth::user()->id;
                                $pegawai = App\Models\Pegawai::where('users_id', $id)->first();
                            @endphp
                            <!-- Kolom Kiri -->
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="users_id" class="form-label">Nama OutletLaundry</label>
                                    <input type="button" value="{{ $pegawai->laundry->nama_laundry }}"
                                        class="form-control" disabled>
                                    <input type="text" name="laundry_id" value="{{ $pegawai->laundry->id }}"
                                        hidden>

                                </div>
                                <div class="mb-1">
                                    <label for="users_id" class="form-label">Opening Balance</label>
                                    <input type="number" name="opening_balance" class="form-control">

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

                </div>

                <div class="modal-footer">
                    {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                    <button type="submit" class="btn btn-primary form-control">Buka Sekarang</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    {{-- modal bootstrap tutup kasir --}}

    <div class="modal fade" id="staticBackdropTutup" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content ">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="staticBackdropLabel">Tutup Kasir</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form
                        action="{{ route('kasir.tutup', ['id' => $kasir ? $kasir->id : 'null', 'total_transaksi' => $kasir ? $total_trx : '0']) }}"
                        method="POST">
                        @csrf
                        <div class="row">
                            {{-- cari laundry dari user yang sedang login --}}
                            @php
                                $id = Auth::user()->id;
                                $pegawai = App\Models\Pegawai::where('users_id', $id)->first();
                            @endphp
                            <!-- Kolom Kiri -->
                            <div class="col-md-6">
                                <div class="row mt-3">
                                    <div class="boxnya d-flex align-items-center justify-content-between">
                                        <h5 for="users_id">*Setor </h5>
                                        <div class="boxnya d-flex align-items-center justify-content-between gap-3">
                                            <input type="text" name="cari_trx" id="cari_trx"
                                                class="form-control" placeholder="masukkan kode transaksi">
                                            <span class="btn btn-sm btn-secondary" id="btn_cari"><i
                                                    class="bx bx-search"></i></span>
                                        </div>
                                    </div>

                                    <div class="col-md-12" id="result_transaksi">
                                        <!-- Hasil transaksi akan ditampilkan di sini -->
                                    </div>
                                </div>

                                @php
                                    if ($kasir != null) {
                                        $metode = App\Models\Metode_Pembayaran::where(
                                            'laundry_id',
                                            $kasir->laundry_id,
                                        )->get();
                                    } else {
                                        $metode = null;
                                    }

                                @endphp

                                <div class="row mt-5">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="users_id" class="form-label">Total Setoran</label>
                                            <input type="number" name="closing_balance" class="form-control">

                                        </div>


                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="users_id" class="form-label">Setor Melalui</label>

                                            <select name="metode_pembayaran" id="metonya" class="form-select">
                                                <option value="">--Pilih Jenis Pembayaran--</option>
                                                @foreach ($metode as $metode_pb)
                                                    <option value="{{ $metode_pb->id }}">
                                                        {{ $metode_pb->jenis_pembayaran }}</option>
                                                @endforeach
                                            </select>

                                        </div>

                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="users_id" class="form-label">Upload Bukti Pembayaran</label>
                                    <input type="file" name="closing_balance" class="form-control">
                                </div>

                                <div class="mb-3">
                                    <label for="users_id" class="form-label">Closing Balance</label>
                                    <input type="number" name="closing_balance" class="form-control">
                                </div>





                            </div>

                            @php
                                if ($kasir != null) {
                                    $cek_transaksi = App\Models\Transaksi::where('kasir_id', $kasir->id)->get();
                                }
                            @endphp
                            <div class="col-md-6">

                                <div class="mb-3">
                                    <label for="users_id" class="form-label">Nama OutletLaundry</label>
                                    <input type="button" value="{{ $pegawai->laundry->nama_laundry }}"
                                        class="form-control" disabled>
                                    <input type="text" name="laundry_id" value="{{ $pegawai->laundry->id }}"
                                        hidden>

                                </div>

                                @if ($kasir != null)
                                    @php
                                        $cek_trxnya = App\Models\Transaksi::where('kasir_id', $kasir->id)->get();
                                        $cek_tunai = 0;
                                        $cek_nontunai = 0;
                                        $cek_belumbayar = 0;
                                        foreach ($cek_trxnya as $cek_trxnya) {
                                            if ($cek_trxnya->is_bayar == 1) {
                                                if ($cek_trxnya->is_cash == 1) {
                                                    $cek_tunai += $cek_trxnya->total_harga;
                                                } else {
                                                    $cek_nontunai += $cek_trxnya->total_harga;
                                                }
                                            } else {
                                                $cek_belumbayar += $cek_trxnya->total_harga;
                                            }
                                        }
                                        $total_trxnya = $cek_tunai + $cek_nontunai + $cek_belumbayar;
                                    @endphp
                                @endif

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="users_id" class="form-label">Total Tunai</label>
                                            <input type="number" name="total_tunai" class="form-control"
                                                value="{{ $cek_tunai }}" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="users_id" class="form-label">Total Nontunai</label>
                                            <input type="number" name="total_nontunai" class="form-control"
                                                value="{{ $cek_nontunai }}" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="users_id" class="form-label">Belum Bayar</label>
                                            <input type="number" name="total_belumbayar" class="form-control"
                                                value="{{ $cek_belumbayar }}" disabled>
                                        </div>
                                    </div>

                                </div>
                                <div class="mb-3">

                                    <label for="users_id" class="form-label">Total Transaksi
                                    </label>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="table-primary">
                                                <tr>
                                                    <th>Kode Transaksi</th>
                                                    <th>Pelanggan</th>
                                                    <th>Total Harga</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @if ($kasir != null)
                                                    @foreach ($cek_transaksi as $trx)
                                                        <tr>
                                                            <td>{{ $trx->kode_transaksi }}</td>
                                                            <td>{{ $trx->pelanggan->nama }}</td>
                                                            <td>{{ 'Rp.' . number_format($trx->total_harga) }}</td>
                                                            <td>
                                                                @if ($trx->is_bayar == '1')
                                                                    <span class="badge rounded-pill bg-success">Paid
                                                                        {{ $trx->is_cash == '1' ? '(Cash)' : '(Transfer -' }}
                                                                        @if ($trx->is_cash == '0')
                                                                            {{ $trx->metode->jenis_pembayaran . ')' }}
                                                                        @endif

                                                                    </span>
                                                                @else
                                                                    <span
                                                                        class="badge rounded-pill bg-warning">Unpaid</span>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    {{-- <tr>
                                                        <td>
                                                            <Span>
                                                                <b>Total Pendapatan</b>
                                                            </Span>
                                                        </td>
                                                        <td colspan="3" class="text-center">

                                                            <h5> {{ 'Rp.' . number_format($total_trxnya) }} </>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <Span>
                                                                <b> Total pendapatan + Opening Balanced</b>
                                                            </Span>
                                                        </td>
                                                        <td>
                                                            <Span>
                                                                <b> {{ 'Rp.' . number_format($total_trxnya) . '+' . 'Rp' . number_format($kasir->opening_balance) }}
                                                                </b>
                                                            </Span>
                                                        </td>
                                                        <td colspan="2" class="text-center">

                                                            <b>
                                                                <h4> {{ 'Rp.' . number_format($total_trxnya + $kasir->opening_balance) }}
                                                            </b></h4>
                                                        </td>
                                                    </tr> --}}
                                                @endif

                                            </tbody>

                                        </table>
                                    </div>

                                </div>

                            </div>
                        </div>

                </div>

                <div class="modal-footer">
                    {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                    <button type="submit" class="btn btn-danger form-control">Tutup Sekarang</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script script src="https://code.jquery.com/jquery-3.7.1.js"
        integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Your cart handling code
            $(document).ready(function() {
                let totalHarga = 0;

                // Event handler untuk menambah produk ke keranjang
                $(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");

                    let totalPerProduk = hargaProduk;

                    // Tambahkan produk ke keranjang
                    $("#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 hidden input untuk produk
                    $("#produk-hidden-inputs").append(
                        '<input type="hidden" name="produk[' + idProduk + '][nama]" value="' +
                        namaProduk +
                        '" id="input-nama-' + idProduk + '">' +
                        '<input type="hidden" name="produk[' + idProduk + '][harga]" value="' +
                        hargaProduk + '" id="input-harga-' + idProduk + '">' +
                        '<input type="hidden" name="produk[' + idProduk +
                        '][qty]" value="1" id="input-qty-' + idProduk + '">' +
                        '<input type="hidden" name="produk[' + idProduk + '][satuan]" value="' +
                        satuanProduk + '" id="input-satuan-' + idProduk + '">'
                    );

                    totalHarga += totalPerProduk;
                    $("#total-harga").text(totalHarga.toLocaleString('id-ID'));
                    $("#input-total-harga").val(totalHarga);
                });

                // 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());
                    let idProduk = $li.data("id");

                    let totalPerProduk = hargaProduk * qtyBaru;

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

                    // Update hidden input qty
                    $("#input-qty-" + idProduk).val(qtyBaru);

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

                    $("#total-harga").text(totalHargaBaru.toLocaleString('id-ID'));
                    $("#input-total-harga").val(totalHargaBaru);
                });

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

                    totalHarga -= totalPerProduk;

                    // Hapus produk dari keranjang dan hidden input
                    $li.remove();
                    $("#input-nama-" + idProduk).remove();
                    $("#input-harga-" + idProduk).remove();
                    $("#input-qty-" + idProduk).remove();
                    $("#input-satuan-" + idProduk).remove();

                    if ($("#keranjang-belanja li").length === 0) {
                        totalHarga = 0;
                    } else {
                        totalHarga = 0;
                        $("#keranjang-belanja .total-per-produk").each(function() {
                            totalHarga += parseInt($(this).text().replace("Rp. ", "")
                                .replace(/\./g,
                                    ""));
                        });
                    }

                    $("#total-harga").text(totalHarga.toLocaleString('id-ID'));
                    $("#input-total-harga").val(totalHarga);
                });
            });
        });
    </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');
                    $('#pilih-pembayaran-transfer').addClass('d-none');
                } else {
                    $('#metode-pembayaran').removeClass('d-none');
                }
            });
            // jika yang dipilih sudahbayar tarnsfer
            $('#transfer').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#pilih-pembayaran-transfer').removeClass('d-none');
                } else {
                    $('#pilih-pembayaran-transfer').addClass('d-none');
                }
            })
            // jika yang dipilih sudahbayar tunai
            $('#cash').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#pilih-pembayaran-transfer').addClass('d-none');
                } else {

                    $('#pilih-pembayaran-transfer').removeClass('d-none');
                }
            })

        });
    </script>

    <script src="{{ asset('template/assets/vendor/libs/jquery/jquery.js') }}"></script>
    <script src="{{ asset('template/assets/vendor/libs/popper/popper.js') }}"></script>
    <script src="{{ asset('template/assets/vendor/js/bootstrap.js') }}"></script>
    <script src="{{ asset('template/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
    <script src="{{ asset('template/assets/vendor/js/menu.js') }}"></script>

    <!-- endbuild -->

    <!-- Vendors JS -->
    <script src="{{ asset('template/assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>

    <!-- Main JS -->
    <script src="{{ asset('template/assets/js/main.js') }}"></script>

    <!-- Page JS -->
    <script src="{{ asset('template/assets/js/dashboards-analytics.js') }}"></script>

    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script src="https://cdn.datatables.net/2.1.2/js/dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.2/js/dataTables.bootstrap5.min.js"></script>
    <!-- js untuk select2  -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#Mytable').DataTable({
                "ordering": false
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#pelanggan").select2({
                width: '100%',

            });

            $("#kasir").select2({
                width: '100%',
            });
            $("#admin").select2({
                width: '100%',
            });
        });

        // jika modal dibuka maka lakukan ini
        $('#staticBackdrop').on('shown.bs.modal', function() {
            $('#admin').select2({
                dropdownParent: $('#staticBackdrop')
            });
            $('#pelanggan').select2({
                dropdownParent: $('#staticBackdrop')
            });



        });
    </script>

    <script>
        $("#btn_cari").on('click', function() {
            let kode_transaksi = $('#cari_trx').val(); // Mengambil nilai dari input
            $.get('/transaksi/' + kode_transaksi, function(data) {
                // console.log(data);

                if (data) {
                    // Membuat elemen transaksi baru untuk ditampilkan dalam daftar
                    let transaksiItem = `
       <div class="card transaksi-detail shadow-sm mb-3" id="transaksi_${data.id}" style="border-radius: 10px;">
                    <div class="card-body d-flex justify-content-between align-items-center" style="padding: 20px;">
                        <div class="flex-grow-1 me-3">
                            <h5 class="card-title mb-2" style="font-weight: bold; color: #333;">
                                <i class="bx bx-receipt text-primary"></i> <strong>Kode Transaksi:</strong> ${data.kode_transaksi}
                            </h5>
                            <p class="card-text mb-1">
                                <i class="bx bx-user text-muted"></i> <strong>Pelanggan:</strong> ${data.pelanggan.nama}
                            </p>
                            <p class="card-text mb-0 text-success" style="font-weight: bold;">
                                <i class="bx bx-money"></i> <strong>Total Harga:</strong> Rp ${data.total_harga}
                            </p>
                        </div>
                        <span class="btn btn-danger btn-hapus d-flex align-items-center" data-id="${data.id}" style="border-radius: 50%; padding: 10px; width: 40px; height: 40px; border: none;">
                            <i class="bx bx-trash" style="font-size: 20px;"></i>
                        </span>
                    </div>
                </div>
            `;

                    // Menambahkan transaksi baru ke dalam elemen #result_transaksi
                    $('#result_transaksi').append(transaksiItem);

                    // Event listener untuk tombol hapus yang hanya menghapus dari DOM
                    $('.btn-hapus').off('click').on('click', function() {
                        let transaksi_id = $(this).data('id');
                        $('#transaksi_' + transaksi_id).remove(); // Hapus elemen dari DOM
                    });
                } else {
                    alert('Transaksi tidak ditemukan.');
                }
            }).fail(function(jqXHR) {
                // Tampilkan pesan kesalahan sebagai alert
                alert('Error: ' + (jqXHR.responseJSON.error || 'Terjadi kesalahan. Silakan coba lagi.'));
            });
        });
    </script>

</body>

</html>
