@inject('numberFormatHelper', 'App\Helpers\NumberFormatHelper')

@extends('layout/admin/main')

@section('content')
    <div class="container-fluid">
        <div class="page-header min-height-300 border-radius-xl mt-4"
            style="background-image: url({{ url('assets/img/curved-images/curved0.jpg') }}); background-position-y: 50%;">
            <span class="mask bg-gradient-primary opacity-6"></span>
        </div>
        <div class="card card-body blur shadow-blur mx-4 mt-n6 overflow-hidden">
            <div class="row gx-4">
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        @if ($params->gambar && file_exists(public_path("/images/products/$params->gambar")))
                            <img src="{{ url('images/products', $params->gambar) }}"
                                alt="{{ url('images/products', $params->gambar) }}" class="w-100 border-radius-lg shadow-sm">
                        @else
                            <img src="{{ url('images/not_image.png') }}" alt="{{ url('images/not_image.png') }}"
                                class="w-100 border-radius-lg shadow-sm">
                        @endif
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 class="mb-1">{{ $params->nama }}</h5>
                        <p class="mb-0 font-weight-bold text-sm">{{ $params->nomor_transaksi }}</p>
                        <p class="mb-0 font-weight-bold text-sm">
                            {{ $params::getStatusText($params->status) }}
                        </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
                    <div class="nav-wrapper position-relative end-0">
                        <ul class="nav nav-pills nav-fill p-1 bg-transparent" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link mb-0 px-0 py-1" href="{{ route('printStruk', ['id' => $params->id]) }}">
                                    <i class="fa fa-print"></i>
                                    <span class="ms-1">Print</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row py-5">
            <div class="col-lg-6 col-md-12">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="row">
                            <div class="col-md-8 d-flex align-items-center">
                                <h6 class="mb-0">Informasi</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <ul class="list-group">
                            <li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong class="text-dark">Kode Transaksi
                                    :</strong> &nbsp; {{ $params->nomor_transaksi ?? '-' }}</li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Nama Produk
                                    :</strong> &nbsp; {{ $params->nama ?? '-' }}</li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Tanggal Sewa
                                    :</strong> &nbsp; {{ date('d F Y, H:i', strtotime($params->take_date)) ?? '-' }}</li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Tanggal Kembali
                                    :</strong> &nbsp; {{ date('d F Y, H:i', strtotime($params->return_date)) ?? '-' }}
                            </li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Jenis Transaksi
                                    :</strong> &nbsp; {{ strtoupper($params->jenis) }}</li>
                            <li class="list-group-item border-0 ps-0 text-sm">
                                <strong class="text-dark">Status Transaksi :</strong>
                                &nbsp; {{ \App\Models\Transaksi::getStatusText($params->status) }}
                            </li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Qty :</strong>
                                &nbsp; {{ $params->stok ?? '-' }}</li>
                            <li class="list-group-item border-0 ps-0 pt-5 text-sm">
                                <strong class="text-dark">Harga</strong>
                            </li>
                            @foreach (json_decode($params->biaya) as $key => $value)
                                <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Biaya
                                        {{ $params->produk[$key] }} :</strong>
                                    &nbsp;
                                    {{ $numberFormatHelper->formatCurrency($value) }}
                                </li>
                            @endforeach
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Diskon :</strong>
                                &nbsp; {{ $numberFormatHelper->formatCurrency($params->diskon) }}
                            </li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Uang Muka :</strong>
                                &nbsp; {{ $numberFormatHelper->formatCurrency($params->uang_muka) }}
                            </li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Kurang :</strong>
                                &nbsp; {{ $numberFormatHelper->formatCurrency($params->kekurangan) }}
                            </li>
                            <li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Total :</strong>
                                @if ($params->diskon > 0)
                                    &nbsp; {{ $numberFormatHelper->formatCurrency($params->total_sum - $params->diskon) }}
                                @else
                                    &nbsp; {{ $numberFormatHelper->formatCurrency($params->total_sum) }}
                                @endif
                            </li>
                            <li class="list-group-item border-0 ps-0 pt-5 text-sm">
                                <strong class="text-dark">Kelengkapan</strong>
                            </li>
                            @foreach (json_decode($params->kelengkapan) as $key => $value)
                                <li class="list-group-item border-0 ps-0">
                                    <strong class="text-dark text-sm">{{ $key }} :</strong> &nbsp;
                                    {{ $value ?? '-' }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="row">
                            <div class="col-md-8 d-flex align-items-center">
                                <h6 class="mb-0">Aksi</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body row p-3 justify-content-between" style="align-content: baseline;">
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded transaction"
                            href="javascript:void(0)">
                            <i class="fa fa-exchange"></i>
                            <span class="ms-1">Proses Transaksi</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded notaButton" data-type="1"
                            href="javascript:void(0)">
                            <i class="fa fa-pen"></i>
                            <span class="ms-1">TTD Admin</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded notaButton" data-type="2"
                            href="javascript:void(0)">
                            <i class="fa fa-pen"></i>
                            <span class="ms-1">TTD Penyewa</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded uploadImage"
                            href="javascript:void(0)" id-data="{{ $params::IDENTITAS }}">
                            <i class="fa fa-id-card"></i>
                            <span class="ms-1">Foto Identitas</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded uploadImage"
                            href="javascript:void(0)" id-data="{{ $params::PENYERAHAN }}">
                            <i class="fa fa-picture-o"></i>
                            <span class="ms-1">Foto Penyerahan</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded edit-penyewa"
                            href="javascript:void(0)">
                            <i class="fa fa-exchange"></i>
                            <span class="ms-1">Ubah Data Penyewa</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded edit-transaksi"
                            href="javascript:void(0)">
                            <i class="fa fa-exchange"></i>
                            <span class="ms-1">Ubah Data Transaksi</span>
                        </a>
                        <a class="col-md-12 col-lg-6 border border-secondary p-5 rounded edit-kelengkapan"
                            href="javascript:void(0)">
                            <i class="fa fa-exchange"></i>
                            <span class="ms-1">Ubah Data Kelengkapan</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6 py-3" {{ !$params->gambar_identitas ? 'hidden' : '' }}>
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="row">
                            <div class="col-md-8 d-flex align-items-center">
                                <h6 class="mb-0">Foto Identitas</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <a href="{{ url('images/penyewa', $params->gambar_identitas) }}" data-lightbox="gallery"
                            data-title="{{ $params->gambar_identitas }}" target="_blank">
                            <img src="{{ url('images/penyewa', $params->gambar_identitas) }}" class="w-100"
                                alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-6 py-3" {{ !$params->gambar_penyerahan ? 'hidden' : '' }}>
                <div class="card h-100">
                    <div class="card-header pb-0 p-3">
                        <div class="row">
                            <div class="col-md-8 d-flex align-items-center">
                                <h6 class="mb-0">Foto Penyerahan Barang</h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-3">
                        <a href="{{ url('images/penyewa', $params->gambar_penyerahan) }}" data-lightbox="gallery"
                            data-title="{{ $params->gambar_penyerahan }}" target="_blank">
                            <img src="{{ url('images/penyewa', $params->gambar_penyerahan) }}" class="w-100"
                                alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form action="{{ route('uploadImagesTransaksi') }}" method="POST" enctype="multipart/form-data" id="formImages"
        hidden>
        @csrf
        <input type="text" name="slug" value="{{ $params->id }}">
        <input type="number" name="type" id="typeImage">
        <input type="file" name="image" id="inputUploadImage">
        <button type="submit">Upload</button>
    </form>
    <div class="modal fade" id="nota" tabindex="-1" aria-labelledby="notaLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="notaLabel">Nota</h5>
                    <button type="button" class="btn px-3 py-2 h6" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-12 text-center">
                        <a href="javascript:void(0)" id="qrCode"></a>
                        <h6><u id="nama"></u></h6>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="transaction" tabindex="-1" aria-labelledby="processTransaction" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="processTransaction">Proses Transaksi</h5>
                    <button type="button" class="btn px-3 py-2 h6" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form action="{{ route('processTransaksi', ['id' => $params->id]) }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="nama_sosial_media">Pilih Status Transaksi</label>
                            <select name="status" class="form-control">
                                @foreach ($params::getDataStatus() as $key => $value)
                                    <option value="{{ $key }}" {{ $params->status === $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <a href="javscript:void(0);" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-penyewa" tabindex="-1" aria-labelledby="processEditPenyewa" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="processEditPenyewa">Ubah Penyewa</h5>
                    <button type="button" class="btn px-3 py-2 h6" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form action="{{ route('penyewaUpdate', ['id' => $params->id]) }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3" style="display: none;">
                            <input name="transaksi" type="text" class="form-control" value="{{ $params->id ?? '' }}"
                                required>
                        </div>
                        <div class="mb-3" style="display: none;">
                            <input name="id" type="text" class="form-control"
                                value="{{ $params->penyewa->id ?? '' }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="nama">Nama Penyewa</label>
                            <input name="nama" type="text" class="form-control" placeholder="Masukan Nama Penyewa"
                                value="{{ old('nama', $params->penyewa->nama ?? '') }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="sosial_media">Media Sosial</label>
                            <input name="sosial_media" type="text" class="form-control"
                                placeholder="Masukan Media Sosial"
                                value="{{ old('sosial_media', $params->penyewa->sosial_media ?? '') }}">
                            <label class="text-secondary">Contoh : Instagram</label>
                        </div>
                        <div class="mb-3">
                            <label for="nama_sosial_media">Nama Media Sosial</label>
                            <input name="nama_sosial_media" type="text" class="form-control"
                                placeholder="Masukan Nama Media Sosial"
                                value="{{ old('nama_sosial_media', $params->penyewa->nama_sosial_media ?? '') }}">
                        </div>
                        <div class="mb-3">
                            <label for="no_telp">Nomor HP</label>
                            <input name="no_telp" id="no_telp" type="text" class="form-control"
                                placeholder="Masukan Nomor HP"
                                value="{{ old('no_telp', $params->penyewa->no_telp ?? '') }}" required>
                            <span class="text-danger no_telp" style="font-size: 13px; display: none;">Nomor HP masuk
                                blacklist</span>
                        </div>
                        <div class="mb-3">
                            <label for="no_telp_two">Nomor HP Kedua</label>
                            <input name="no_telp_two" id="no_telp_two" type="text" class="form-control"
                                placeholder="Masukan Nomor HP Kedua"
                                value="{{ old('no_telp_two', $params->penyewa->no_telp_two ?? '') }}" required>
                            <span class="text-danger no_telp_two" style="font-size: 13px; display: none;">Nomor HP masuk
                                blacklist</span>
                        </div>
                        <div class="mb-3">
                            <label for="jaminan">Jaminan Pertama</label>
                            <input name="jaminan_1" type="text" class="form-control"
                                placeholder="Masukan Jaminan Pertama"
                                value="{{ old('jaminan_1', $params->penyewa->jaminan_1 ?? '') }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="nomor">Nomor Identitas Pertama</label>
                            <input name="nomor_1" type="text" class="form-control"
                                placeholder="Masukan Nomor Identitas Pertama"
                                value="{{ old('nomor_1', $params->penyewa->nomor_1 ?? '') }}" required>
                            <span class="text-danger nomor" style="font-size: 13px; display: none;">Nomor Identitas masuk
                                blacklist</span>
                        </div>
                        <div class="mb-3">
                            <label for="jaminan">Jaminan Kedua</label>
                            <input name="jaminan_2" type="text" class="form-control"
                                placeholder="Masukan Jaminan Kedua"
                                value="{{ old('jaminan_2', $params->penyewa->jaminan_2 ?? '') }}">
                        </div>
                        <div class="mb-3">
                            <label for="nomor">Nomor Identitas Kedua</label>
                            <input name="nomor_2" type="text" class="form-control"
                                placeholder="Masukan Nomor Identitas Kedua"
                                value="{{ old('nomor_2', $params->penyewa->nomor_2 ?? '') }}">
                            <span class="text-danger nomor_2" style="font-size: 13px; display: none;">Nomor Identitas
                                masuk
                                blacklist</span>
                        </div>
                        <div class="mb-3">
                            <label for="alamat">Alamat</label>
                            <textarea name="alamat" type="text" class="form-control" placeholder="Masukan Alamat" cols="30"
                                rows="10" required>{{ old('alamat', $params->penyewa->alamat ?? '') }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label for="instansi">Instansi</label>
                            <input name="instansi" type="text" class="form-control" placeholder="Masukan Instansi"
                                value="{{ old('instansi', $params->penyewa->instansi ?? '') }}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <a href="javscript:void(0);" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-transaksi" tabindex="-1" aria-labelledby="processEditTransaksi"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="processEditTransaksi">Ubah Transaksi</h5>
                    <button type="button" class="btn px-3 py-2 h6" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form action="{{ route('updateTransaksi', ['id' => $params->id]) }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3" style="display: none;">
                            <input name="id" type="text" class="form-control" value="{{ $params->id ?? '' }}"
                                required>
                        </div>
                        @if (isset($product))
                            <div class="row col-12 mb-3">
                                <div class="col-12">
                                    <label for="id_produk">Produk</label>
                                    <select class="form-select" name="id_produk[]" size="10" multiple required>
                                        @foreach ($product as $item)
                                            <option value="{{ $item->id }}"
                                                {{ in_array($item->id, json_decode($params->id_produk, true)) ? 'selected' : '' }}>
                                                {{ $item->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif
                        <div id="container-qty">
                            @foreach (json_decode($params->qty) as $key => $value)
                                <div class="mb-3">
                                    <label for="qty">Stok : {{ $params->produk[$key] }}</label>
                                    <input name="qty[]" type="number" class="form-control" placeholder="Masukan Stok"
                                        value="{{ old('qty', $value) }}" required>
                                </div>
                            @endforeach
                        </div>
                        <div id="container-biaya">
                            @foreach (json_decode($params->biaya) as $key => $value)
                                <div class="mb-3">
                                    <label for="biaya">Biaya : {{ $params->produk[$key] }}</label>
                                    <input name="biaya[]" type="number" class="form-control"
                                        placeholder="Masukan Biaya" value="{{ old('biaya', $value) }}" required>
                                </div>
                            @endforeach
                        </div>
                        <div class="mb-3">
                            <label for="uang_muka">Uang Muka</label>
                            <input name="uang_muka" type="number" class="form-control" placeholder="Masukan Biaya"
                                value="{{ old('uang_muka', $params->uang_muka) }}">
                        </div>
                        <div class="mb-3">
                            <label for="kekurangan">Kekurangan</label>
                            <input name="kekurangan" type="number" class="form-control"
                                placeholder="Masukan Kekurangan" value="{{ old('kekurangan', $params->kekurangan) }}">
                        </div>
                        <div class="mb-3">
                            <label for="diskon">Diskon</label>
                            <input name="diskon" type="number" class="form-control" placeholder="Masukan Diskon"
                                value="{{ old('diskon', $params->diskon) }}">
                        </div>
                        {{-- <div class="mb-3">
                            <label for="total">Total</label>
                            <input name="total" type="number" class="form-control" placeholder="Masukan Total"
                                value="{{ old('total', $params->total) }}" required>
                        </div> --}}
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <a href="javscript:void(0);" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-kelengkapan" tabindex="-1" aria-labelledby="processEditKelengkapan"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="processEditKelengkapan">Ubah Kelengkapan</h5>
                    <button type="button" class="btn px-3 py-2 h6" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form action="{{ route('updateTransaksi', ['id' => $params->id]) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="btn btn-sm btn-success" id="add-kelengkapan">
                            <span>Tambah</span>
                            <i class="fa-solid fa-plus"></i>
                        </div>
                        <div class="mb-3" style="display: none;">
                            <input name="id" type="text" class="form-control" value="{{ $params->id ?? '' }}"
                                required>
                        </div>
                        <div class="mb-3">
                            <div class="list-kelengkapan">
                                <div class="kelengkapan-group" id="kelengkapan-group-1">
                                    <p class="text-sm p-0 m-0 mx-1">
                                        <span class="label_kelengkapan">Kelengkapan</span>
                                        <i class="fa-solid fa-trash text-danger delete-kelengkapan"></i>
                                    </p>
                                    @foreach (json_decode($params->kelengkapan) as $key => $item)
                                        <div class="input-group flex-nowrap">
                                            <input class="kelengkapan-input form-control mb-2" name="label_kelengkapan[]"
                                                type="text" placeholder="Masukan Label Kelengkapan"
                                                value="{{ $key }}">
                                        </div>
                                        <input class="kelengkapan-input form-control mb-2" name="kelengkapan[]"
                                            type="number" placeholder="Masukan Kelengkapan"
                                            value="{{ $item }}">
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Simpan</button>
                        <a href="javscript:void(0);" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @push('body-scripts')
        @once
            <script></script>
        @endonce
    @endpush
    <script>
        $(document).ready(function() {
            $('.transaction').click(function(e) {
                $('#transaction').modal('show');
            });

            $('.edit-penyewa').click(function(e) {
                $('#edit-penyewa').modal('show');
            });

            $('.edit-transaksi').click(function(e) {
                $('#edit-transaksi').modal('show');
            });

            $('.edit-kelengkapan').click(function(e) {
                $('#edit-kelengkapan').modal('show');
            });

            $('.uploadImage').click(function(e) {
                e.preventDefault();
                $('#typeImage').val($(this).attr('id-data'));
                $('[name="image"]').trigger('click');
            });
            var baseUrl = window.location.origin;
            var stokBase = {};
            $('[name="id_produk[]"]').on('change', function(e) {

                $('.loading-modal').modal('show');
                $.ajax({
                    url: baseUrl + '/admin-sistem/produk/get-data/' + $(this).val(),
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        stokBase = res.stok;
                        $('#container-qty').html(res.stokHtml);
                        $('#container-biaya').html(res.biayaHtml);
                        return true;
                    }
                });
                $('.loading-modal').modal('hide');
                return false;
            });

            $(document).on('input', '.stok-input', function() {
                var stok = parseInt($(this).val());
                var idProduk = $(this).data('id');
                stokCal(stok, idProduk);
            });

            function stokCal(stok, idProduk) {
                stok = stok.toString().replace(/^0+(?!$)/, '');
                stok = isNaN(stok) ? stok : parseInt(stok, 10);
                if (isNaN(stok)) {
                    $('#stok_' + idProduk).text(stokBase[idProduk]);
                } else if ((stokBase[idProduk] - stok) < 0) {
                    $('#stok_' + idProduk).text(0);
                    $('[name="qty[' + idProduk + ']"').val(stokBase[idProduk]);
                } else if (stok < 0) {
                    $('#stok_' + idProduk).text(stokBase[idProduk]);
                    $('[name="qty[' + idProduk + ']"').val(0);
                } else {
                    $('[name="qty[' + idProduk + ']"').val(stok);
                    $('#stok_' + idProduk).text(stokBase[idProduk] - stok);
                }
            }

            $('#add-kelengkapan').click(function() {
                var kelengkapanGroup = $('.kelengkapan-group').first().clone();
                kelengkapanGroup.find('.label_kelengkapan').text('Label Kelengkapan');
                kelengkapanGroup.find('.kelengkapan-input').val('');
                $('.list-kelengkapan').append(kelengkapanGroup);

                $('html, body').animate({
                    scrollTop: kelengkapanGroup.offset().top
                }, 500);
            });

            $(document).on('click', '.delete-kelengkapan', function() {
                var kelengkapanGroup = $(this).closest('.kelengkapan-group');
                if (kelengkapanGroup.index() !== 0) {
                    kelengkapanGroup.remove();
                }
            });

            $('[name="image"]').change(function() {
                const selectedImage = $('[name="image"]');
                const file = this.files[0];
                if (file) {
                    new Compressor(file, {
                        quality: 0.6,
                        maxWidth: 800,
                        maxHeight: 800,
                        success(result) {
                            $('.loading-modal').modal('show');
                            const compressedImage = result;
                            const formData = new FormData();
                            formData.append('slug', $('[name="slug"]').val());
                            formData.append('type', $('[name="type"]').val());
                            formData.append('image', compressedImage);

                            $.ajax({
                                url: '{{ route('uploadImagesTransaksi') }}',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                                        'content')
                                },
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                dataType: 'json',
                                success: function(response) {
                                    window.location.href = response.data.url;
                                    $('.loading-modal').modal('hide');
                                },
                                error(err) {
                                    $('.loading-modal').modal('hide');
                                    console.log(err.message);
                                },
                            });
                        },
                        error(err) {
                            $('.loading-modal').modal('hide');
                            console.log(err.message);
                        },
                    });
                }
                $('.loading-modal').modal('hide');
            });

            $('.notaButton').on('click', function(e) {
                var loading = '<i class="spinner-border spinner-border-sm text-warning"></i>';
                var baseUrl = window.location.origin;
                $('#title, #qrCode, #nama').html(loading);
                $('#nota').modal('show');
                $.ajax({
                    url: "{{ route('getDataQr', ['id' => $params->id, 'type' => ':type']) }}"
                        .replace(':type', $(this).attr('data-type')),
                    type: 'GET',
                    dataType: 'json',
                    success: function(res) {
                        $('#qrCode').empty();
                        $('#qrCode').qrcode({
                            text: res?.qrCode,
                            height: 250
                        });

                        if (res?.ttd != null && res?.ttd != '') {
                            $('#qrCode').empty();
                            $('#qrCode').html('<img class="w-100" height="250" src="' +
                                baseUrl + '/images/tanda-tangan/' + res.ttd + '">');
                        }
                        $('#nama').text(res?.nama);
                        $('#qrCode').attr({
                            'href': res?.qrCode,
                            'target': '_blank',
                        });
                    }
                });
            });
        });
    </script>
@endsection