@extends('layout.header_admin', ['title' => 'Ticket'])

@section('content')
    @if (session('error') || session('success') || $errors->any())
        <div class="z-999 relative mt-10 mb-5">
            @if (session('error'))
                <div class="bg-red-500 text-white p-4 rounded-md mb-5">
                    {{ session('error') }}
                </div>
            @endif
            @if (session('success'))
                <div class="bg-green-500 text-white p-4 rounded-md mb-5">
                    {{ session('success') }}
                </div>
            @endif
            @foreach ($errors->all() as $error)
                <div class="bg-red-500 text-white p-4 rounded-md mb-5">
                    {{ $error }}
                </div>
            @endforeach
        </div>
    @endif
    <div x-data="syncHandler()"
        class="rounded-sm border border-stroke bg-white px-5 py-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
        <form action="{{ route('admin.sinkronisasi.push', $ticket_product->id) }}" method="post"
            onkeydown="return event.key != 'Enter';">
            {{-- <form action="{{ route('admin.sinkronisasi.export', $data->id) }}" method="get" onkeydown="return event.key != 'Enter';"> --}}
            @csrf
            <div class="flex flex-row justify-between my-2 relative">
                <div class="flex flex-col gap-2">
                    <small><a class="hover:text-primary hover:underline" href="{{ route('admin.tiket.index') }}">Ticket
                            All</a> / <a class="hover:text-primary hover:underline"
                            href="{{ route('admin.tiket.data', $ticket->kode_tiket) }}">{{ $ticket->kode_tiket }}</a> /
                        <a>Sync</a></small>
                    <h1 class="text-2xl font-bold">Sinkronisasi Data</h1>
                </div>
                <button
                    class="z-[999] bg-primary hover:bg-red-400 transition-colors px-5 py-2 font-bold text-white rounded-md fixed right-12 shadow-md shadow-red-400"><i
                        class="fa-solid fa-rotate"></i> Sinkronisasi</button>
            </div>

            <div class="flex gap-5 p-3 bg-yellow-50">
                <div class="w-full">
                    <label for="nama_satuan_kerja" class="block text-sm font-medium leading-6 text-gray-900">
                        Nama Satuan Kerja
                    </label>
                    <div class="">
                        <input readonly value="{{ $satuan_kerja->nama }}" type="text" id="nama_satuan_kerja"
                            class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary"
                            value="{{ $ticket->nama_pelanggan }}">
                    </div>
                </div>
                <div class="w-full">
                    <label for="saldo_satuan_kerja" class="block text-sm font-medium leading-6 text-gray-900">
                        Saldo Satuan Kerja
                    </label>
                    <div class="">
                        <input readonly value="{{ number_format($satuan_kerja->saldo) }}" type="text"
                            id="saldo_satuan_kerja"
                            class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary"
                            value="{{ $ticket->nama_pelanggan }}">
                    </div>
                </div>
            </div>

            <div class="max-w-full">
                <div class="mt-5 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-3">
                        <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">Nama Outlet <sub
                                class="text-red-600 text-lg">*</sub></label>
                        <div class="">
                            <select readonly required name="outlet" id="outlet"
                                class="w-full rounded-lg border-[1.5px] border-stroke
                                bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary
                                active:border-primary">
                                <option selected value="1" @if (old('outlet') == '1') selected @endif>PT. Naba
                                    Technology Solutions</option>
                            </select>
                        </div>
                        @error('outlet')
                            <span class="text-red-500 text-sm">*{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="sm:col-span-3">
                        <label for="nama_pelanggan" class="block text-sm font-medium leading-6 text-gray-900">
                            Nama Pelanggan
                            <sub class="text-red-600 text-lg">*</sub>
                        </label>
                        <div class="">
                            <input required type="text" name="nama_pelanggan" id="nama_pelanggan"
                                value="Ni Luh Putu Wiagustini"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary"
                                value="{{ $ticket->nama_pelanggan }}">
                            @error('nama_pelanggan')
                                <span class="text-red-500 text-sm">*{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="mt-5 grid grid-cols-1 pb-3 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-2">
                        <label for="tanggal_terima" class="block text-sm font-medium leading-6 text-gray-900">
                            Tanggal Terima
                            <sub class="text-red-600 text-lg">*</sub>
                        </label>
                        <input type="date" name="tanggal_terima" id="tanggal_terima"
                            class=" w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary"
                            value="{{ date('Y-m-d', strtotime($ticket_product->ticket->assigment->tanggal_perbaikan)) }}">
                        @error('tanggak_terima')
                            <span class="text-red-500 text-sm">*{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="sm:col-span-2">
                        <label for="termin" class="block text-sm font-medium leading-6 text-gray-900">Termin</label>
                        <select name="termin" id="termin"
                            class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                            <option disabled selected value>Pilih Termin ...</option>
                            <option value="1" @if (old('outlet') == '1') selected @endif>Tunai</option>
                            <option value="2" @if (old('outlet') == '2') selected @endif>Net 7 Hari</option>
                            <option value="3" @if (old('outlet') == '3') selected @endif>Net 30 </option>
                        </select>
                        @error('termin')
                            <span class="text-red-500 text-sm">*{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="sm:col-span-2">
                        <label for="nama_pelanggan" class="block text-sm font-medium leading-6 text-gray-900">
                            Pajak <sub class="text-red-600 text-lg">*</sub>
                        </label>
                        <div class="flex flex-wrap gap-3 md:gap-4">
                            <div>
                                <input type="checkbox" name="is_ppn" id="ppn"
                                x-on:click="ppn = !ppn; calculate()"
                                    {{ old('is_ppn') == 'on' ? 'checked' : '' }}>
                                <label for="ppn">PPn</label>
                            </div>
                            <div>
                                <input type="checkbox" name="is_harga_termasuk_ppn" id="harga_include_ppn"
                                    {{ old('is_harga_termasuk_ppn') == 'on' ? 'checked' : '' }}>
                                <label for="harga_include_ppn">Harga Termasuk PPn</label>
                            </div>
                        </div>
                        <input type="text" name="ppn" id="ppn_val" value="0.11"
                            class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                    </div>
                </div>
            </div>
    </div>

    {{-- product container --}}
    {{-- @foreach ($data->reportDetailProduct as $item) --}}
    <div class="card mt-3">
        <div class="card-body p-5 bg-white flex flex-col gap-4 rounded-sm shadow-default">
            <div class="rounded-sm border border-stroke bg-white p-5 dark:border-strokedark dark:bg-boxdark sm:px-7.5">
                {{-- card header title --}}
                <div class="flex flex-row justify-between my-2">
                    <h3 class="text-lg font-bold">Data Servis</h3>
                </div>

                <div class="max-w-full p-2">
                    <label for="nama_teknisi" class="block text-sm font-medium leading-6 text-gray-900">Nama Teknisi <sub
                            class="text-red-600 text-lg">*</sub></label>
                    <input value="{{ $report->nama_teknisi }}" readonly type="text" name="nama_teknisi"
                        id="nama_teknisi"
                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                </div>

                <div class="max-w-full">
                    <div class="mt-5 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <div class="sm:col-span-2">
                            <label for="serial_number" class="block text-sm font-medium leading-6 text-gray-900">
                                Serial Number
                                <sub class="text-red-600 text-lg">*</sub>
                            </label>
                            <input type="text" name="serial_number" id="serial_number"
                                value="{{ $report->serial_number }}"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                            @error("produk.{{ $report->id }}.serial_number")
                                <span class="text-red-500 text-sm">*{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="sm:col-span-2">
                            <label for="nama_barang" class="block text-sm font-medium leading-6 text-gray-900">
                                Nama Barang
                                <sub class="text-red-600 text-lg">*</sub>
                            </label>
                            <div class="">
                                <input value="{{ $report->nama_produk }}" type="text" name="nama_barang"
                                    id="nama_barang"
                                    class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                            </div>
                        </div>

                        <div class="sm:col-span-2">
                            <div class="">
                                <input type="checkbox" name="is_garansi" id="is_garansi">
                                <label for="is_garansi">Dalam Garansi?</label>
                            </div>
                            <input type="date" name="tanggal_garansi_selesai" id="tanggal_garansi_selesai"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                        </div>
                    </div>
                </div>

                <div class="max-w-full">
                    <div class="mt-3">
                        <label for="lampiran_garansi" class="block text-sm font-medium leading-6 text-gray-900">Lampiran
                            Garansi</label>
                        <div class="">
                            <input type="file" name="lampiran_garansi" id="lampiran_garansi"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">
                        </div>
                    </div>
                </div>

                <div class="max-w-full">
                    <div class="mt-3 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <div class="sm:col-span-2">
                            <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">Deskripsi
                                Kerusakan <sub class="text-red-600 text-lg">*</sub></label>
                            <textarea required type="text" name="deskripsi_kerusakan" id="deskripsi_kerusakan"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary">{{ $report->permasalahan }}</textarea>
                        </div>

                        <div class="sm:col-span-2">
                            <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">Kelengkapan
                                <sub class="text-red-600 text-lg">*</sub></label>
                            <textarea required type="text" name="kelengkapan_barang" id="kelengkapan_barang"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary"></textarea>
                            @error('produk.{{ $report->id }}.kelengkapan_barang')
                                <span class="text-red-500 text-sm">*{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="sm:col-span-2">
                            <label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">Kondisi
                                Barang <sub class="text-red-600 text-lg">*</sub></label>
                            <textarea required type="text" name="kondisi_barang" id="kondisi_barang"
                                class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary"></textarea>
                        </div>
                    </div>
                </div>

                @if ($data->reportDetailJasa->isNotEmpty())
                    <div
                        class="rounded-sm border border-stroke bg-[#f9f9f9] px-5 py-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 mt-4">
                        {{-- card header title --}}
                        <div class="flex flex-row justify-between my-2">
                            <h3 class="text-lg font-bold">Daftar Jasa/Pekerjaan</h3>
                        </div>
                        <div class="max-w-full">
                            <div class="relative overflow-x-auto">
                                <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                    <thead
                                        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                        <tr>
                                            <th scope="col" class="py-3">
                                                Nama Pekerjaan
                                            </th>
                                            <th scope="col" class="py-3">
                                                Bobot Pekerjaan
                                            </th>
                                            <th scope="col" class="py-3">
                                                @harga <sub class="text-red-600 text-lg">*</sub>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data->reportDetailJasa as $items)
                                            <tr class="dark:bg-gray-800 dark:border-gray-700">
                                                <td style="width: 40%;">
                                                    <input type="text" name="jasa[{{ $loop->iteration }}][nama_jasa]"
                                                        id="nama_jasa{{ $items->id }}"
                                                        value="{{ $items->nama_jasa }}"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 20%;">
                                                    <select name="jasa[{{ $loop->iteration }}][bobot]"
                                                        id="bobot{{ $items->id }}"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3 my-2">
                                                        <option disabled selected value>Pilih Bobot ...</option>
                                                        <option @if ($items->bobot == 'ringan') selected @endif
                                                            value="1">Ringan</option>
                                                        <option @if ($items->bobot == 'sedang') selected @endif
                                                            value="2">Sedang</option>
                                                        <option @if ($items->bobot == 'berat') selected @endif
                                                            value="3">Berat</option>
                                                    </select>
                                                </td>
                                                <td style="width: 20%;">
                                                    <input type="text" name="jasa[{{ $loop->iteration }}][harga]"
                                                        id="harga_jasa{{ $items->id }}"
                                                        onkeyup="this.value = formatRupiah(this.value, '')"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="dark:bg-gray-800 dark:border-gray-700">
                                            <td colspan="2" class="py-3 text-center">
                                                <label for="total_jasa" class="font-bold text-md">Total Jasa</label>
                                            </td>
                                            <td colspan="2" class="py-3">
                                                <input readonly type="text" name="total_jasa" id="total_jasa"
                                                    value=""
                                                    class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif

                @if ($data->reportDetailSparepart->isNotEmpty())
                    <div
                        class="rounded-sm border border-stroke bg-[#f9f9f9] px-5 py-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 mt-4">
                        {{-- card header title --}}
                        <div class="flex flex-row justify-between my-2">
                            <h3 class="text-lg font-bold">Daftar Sparepart</h3>
                        </div>
                        <div class="max-w-full">
                            <div class="relative overflow-x-auto">
                                <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                                    <thead
                                        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                                        <tr>
                                            <th scope="col" class="py-3">
                                                Barcode - Nama Sparepart
                                            </th>
                                            <th scope="col" class="py-3">
                                                Jumlah
                                            </th>
                                            <th scope="col" class="py-3">
                                                Satuan
                                            </th>
                                            <th scope="col" class="py-3">
                                                SN
                                            </th>
                                            <th scope="col" class="py-3">
                                                @harga
                                            </th>
                                            <th scope="col" class="py-3">
                                                @diskon
                                            </th>
                                            <th scope="col" class="py-3">
                                                Total
                                            </th>
                                            <th scope="col" class="py-3">
                                                Pajak
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data->reportDetailSparepart as $items)
                                            <tr class="dark:bg-gray-800 dark:border-gray-700">
                                                <td style="width: 20%;">
                                                    <input type="text"
                                                        name="produk_sparepart[{{ $loop->iteration }}][barcode]"
                                                        id="barcode{{ $items->id }}" value="{{ $items->barcode }}"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 10%;">
                                                    <input type="number" min="0"
                                                        name="produk_sparepart[{{ $loop->iteration }}][jumlah]"
                                                        id="jumlah{{ $items->id }}" value="{{ $items->jumlah }}"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 10%;">
                                                    <input readonly type="string"
                                                        name="produk_sparepart[{{ $loop->iteration }}][satuan]"
                                                        id="satuan{{ $items->id }}" value="{{ $items->satuan }}"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 20%;">
                                                    <input type="text"
                                                        name="produk_sparepart[{{ $loop->iteration }}][no_sn]"
                                                        id="no_sn{{ $items->id }}"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 15%;">
                                                    <input type="text"
                                                        name="produk_sparepart[{{ $loop->iteration }}][harga]"
                                                        id="harga_sparepart{{ $items->id }}"
                                                        onkeyup="this.value = formatRupiah(this.value, '')"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 10%;">
                                                    <input type="text"
                                                        name="produk_sparepart[{{ $loop->iteration }}][diskon]"
                                                        id="diskon{{ $items->id }}"
                                                        onkeyup="this.value = formatRupiah(this.value, '')"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 15%;">
                                                    <input readonly type="text"
                                                        id="total_sparepart{{ $items->id }}"
                                                        name="produk_sparepart[{{ $loop->iteration }}][total]"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                                <td style="width: 5%;">
                                                    <input type="text" id="pajak{{ $items->id }}"
                                                        name="produk_sparepart[{{ $loop->iteration }}][pajak]"
                                                        class="w-full rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary px-3">
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="flex items-end justify-end">
                    <div
                        class="rounded-sm border border-stroke bg-gray px-2 py-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 mt-4 w-auto">
                        <table>
                            <tbody>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center w-full">
                                        <label for="total_jasa" class="font-semibold text-sm">Total Jasa</label>
                                        <input readonly type="text" name="total_jasa_final" id="total_jasa_final"
                                            class="w-auto rounded-lg bg-transparent py-3 font-normal border-stroke border text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="total_sparepart" class="font-semibold text-sm">Total Sparepart</label>
                                        <input readonly type="text" name="total_sparepart_final"
                                            id="total_sparepart_final"
                                            class="w-auto rounded-lg bg-transparent py-3 font-normal border-stroke border text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="ongkos_kirim" class="font-light text-sm">Ongkos Kirim</label>
                                        <input onkeyup="hitungTotalFaktur()" type="text" name="ongkos_kirim"
                                            id="ongkos_kirim"
                                            class="w-auto rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="potongan" class="font-light text-sm">Potongan</label>
                                        <input onkeyup="hitungTotalFaktur()" type="text" name="potongan"
                                            id="potongan"
                                            class="w-auto rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="total_ppn" class="font-light text-sm">Total PPN</label>
                                        <input type="text" name="total_ppn" id="total_ppn"
                                            class="w-auto rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="total_harga_faktur" class="font-bold text-lg">Total Faktur</label>
                                        <input type="text" name="total_harga_faktur" id="total_harga_faktur"
                                            class="w-auto rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="total_terbayar" class="font-light text-sm">Total Terbayar</label>
                                        <input value="0" type="text" name="total_terbayar" id="total_terbayar"
                                            class="w-auto rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                                <tr class="dark:bg-gray-800 dark:border-gray-700 gap-x-6">
                                    <td class="flex justify-between items-center">
                                        <label for="saldo_terhutang" class="font-light text-sm">Saldo Terhutang</label>
                                        <input type="text" name="saldo_terhutang" id="saldo_terhutang"
                                            class="w-auto rounded-lg border-[1.5px] border-stroke bg-transparent py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary ml-4 pl-3">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {{-- @endforeach --}}
    </form>
    {{-- end product container --}}
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Fungsi untuk memformat angka menjadi format Rupiah
            function formatRupiah(angka, prefix) {
                var number_string = angka.replace(/[^,\d]/g, '').toString(),
                    split = number_string.split(','),
                    sisa = split[0].length % 3,
                    rupiah = split[0].substr(0, sisa),
                    ribuan = split[0].substr(sisa).match(/\d{3}/gi);

                if (ribuan) {
                    var separator = sisa ? '.' : '';
                    rupiah += separator + ribuan.join('.');
                }

                return prefix == undefined ? rupiah : (rupiah ? prefix + rupiah : '');
            }
            const updateTotalJasa = () => {
                let totalJasa = 0;
                document.querySelectorAll("input[name^='jasa'][name$='[harga]']").forEach((input) => {
                    const harga = parseFloat(input.value.replace(/\./g, "").replace(",", ".")) || 0;
                    totalJasa += harga;
                });
                document.getElementById("total_jasa").value = formatRupiah(totalJasa.toString(), "");
                document.getElementById("total_jasa_final").value = formatRupiah(totalJasa.toString(), "");
                updateTotalFaktur();
            };

            const updateTotalSparepart = () => {
                let totalSparepart = 0;
                document.querySelectorAll("tr input[name^='produk'][name$='[harga]']").forEach((input) => {
                    const row = input.closest("tr");
                    const harga = parseFloat(input.value.replace(/\./g, "").replace(",", ".")) || 0;
                    const jumlah = parseFloat(row.querySelector("input[name$='[jumlah]']").value) || 0;
                    const diskon = parseFloat(row.querySelector("input[name$='[diskon]']").value
                        .replace(/\./g, "").replace(",", ".")) || 0;

                    const total = (harga * jumlah) - diskon * jumlah;
                    row.querySelector("input[name$='[total]']").value = formatRupiah(total.toString(),
                        "");
                    totalSparepart += total;
                });
                document.getElementById("total_sparepart_final").value = formatRupiah(totalSparepart.toString(),
                    "");
                updateTotalFaktur();
            };

            const updatePPN = () => {
                const isPPNChecked = document.getElementById("ppn").checked;
                const ppnVal = parseFloat(document.getElementById("ppn_val").value) || 0;
                const totalFaktur = parseFloat(document.getElementById("total_harga_faktur").value.replace(
                    /\./g, "").replace(",", ".")) || 0;
                const totalPPN = isPPNChecked ? totalFaktur * ppnVal : 0;

                document.getElementById("total_ppn").value = formatRupiah(totalPPN.toString(), "");
                updateTotalFaktur();
            };

            const updateTotalFaktur = () => {
                const totalJasa = parseFloat(document.getElementById("total_jasa_final").value.replace(/\./g,
                    "").replace(",", ".")) || 0;
                const totalSparepart = parseFloat(document.getElementById("total_sparepart_final").value
                    .replace(/\./g, "").replace(",", ".")) || 0;
                const ongkosKirim = parseFloat(document.getElementById("ongkos_kirim").value.replace(/\./g, "")
                    .replace(",", ".")) || 0;
                const potongan = parseFloat(document.getElementById("potongan").value.replace(/\./g, "")
                    .replace(",", ".")) || 0;
                const totalPPN = parseFloat(document.getElementById("total_ppn").value.replace(/\./g, "")
                    .replace(",", ".")) || 0;

                const totalFaktur = totalJasa + totalSparepart + ongkosKirim - potongan + totalPPN;
                document.getElementById("total_harga_faktur").value = formatRupiah(totalFaktur.toString(), "");
                document.getElementById("saldo_terhutang").value = formatRupiah(totalFaktur.toString(), "");
            };

            // Event Listeners
            document.querySelectorAll("input[name^='jasa'][name$='[harga]']").forEach((input) => {
                input.addEventListener("input", updateTotalJasa);
            });

            document.querySelectorAll(
                "tr input[name^='produk'][name$='[harga]'], tr input[name^='produk'][name$='[jumlah]'], tr input[name^='produk'][name$='[diskon]']"
                ).forEach((input) => {
                input.addEventListener("input", updateTotalSparepart);
            });

            document.getElementById("ongkos_kirim").addEventListener("input", updateTotalFaktur);
            document.getElementById("potongan").addEventListener("input", updateTotalFaktur);
            document.getElementById("ppn").addEventListener("change", updatePPN);
            document.getElementById("ppn_val").addEventListener("input", updatePPN);
        });
    </script>
@endsection