@extends('layouts.external.app')
@section('content')

<style>
    .select2-selection--single {
        border-radius: 5px !important;
        border: 1px solid #8c909a !important;
    }

    .select2-selection__rendered {
        font-size: 13px !important;
        position: absolute;
        top: 0px;
        left: 6px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 26px !important;
        position: absolute !important;
        top: -4px !important;
        right: 6px !important;
        width: 23px !important;
    }

    .select2-selection__arrow {
        height: 26px !important;
    }

    .select2-results__option[aria-selected] {
        cursor: pointer;
        background: #fff;
        color: #000;
    }

    .select2-search--dropdown {
        padding: 2px !important;
    }
</style>

@php

$data = $response['data'] ?? [];
$encrypt       = $tokenencrypted ?? '';
$hasData = !empty($data) && !isset($api_error);
$sertifikat = $data['NoSertifikat'] ?? '';
$created_user = $data['UserInput'] ?? '';
$created_at = $data['CreatedAt'] ?? '';
$status = $data['Status'] ?? '';
$nomorPolis = $data['NomorPolis'] ?? '';
$typeJaminan = $data['TypeJaminan'] ?? '';
$penjamin = $data['Suretyship'] ?? '';
$penanggungJawab = $data['PenanggungJawab'] ?? '';
$jabatan = $data['Jabatan'] ?? '';
$principal = $data['Principal'] ?? '';
$dokumenSumber = $data['DokumenSumber'] ?? '';
$nomorDokumen = $data['NomorDokumen'] ?? '';
$tglDokumen = $data['TglDokumen'] ?? '';
$nomorDokumenSKEP = $data['NomorDokumenSkep'] ?? '';
$tglDokumenSKEP = $data['TglDokumenSkep'] ?? '';
$nomorRegistrasi = $data['NomorRegistrasi'] ?? '';
$jmlHari = $data['JmlHari'];
$tglMulai = $data['TglMulai'] ?? '';
$tglBerakhir = $data['TglBerakhir'] ?? '';
$tglTerbit = $data['TglTerbit'] ?? '';
$tglKuitansi = $data['TglKuitansi'] ?? '';
$nilaiKuitansi = $data['NilaiKuitansi'] ?? null;
$nilaiPenjaminan = $data['NilaiJaminan'] ?? null;
$beaMasuk = $data['BeaMasuk'] ?? null;
$ijpNett = $data['IjpNett'] ?? null;
$ijpTotal = $data['IjpTotal'] ?? null;

$nomorKertas = $data['NoKertas'] ?? '';
$ditujukanKepada = $data['DitujukanKepada'] ?? '';
$dinasId = $data['IDDinas'];
$biayaAdmin = $data['BiayaAdmin'];

@endphp

<div class="content-wrapper p-5">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="fw-bold">Custom Bond</h3>
                    <h6 class="fw-normal mb-0">
                        Custom Bond <i class="fa fa-angle-double-right"></i>
                        Edit
                    </h6>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="justify-content-end d-flex">
                        <div class="dropdown flex-md-grow-1 flex-xl-grow-0">
                            <!-- <button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button" id="dropdownMenuDate2"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
                                <a class="dropdown-item" href="#">January - March</a>
                                <a class="dropdown-item" href="#">March - June</a>
                                <a class="dropdown-item" href="#">June - August</a>
                                <a class="dropdown-item" href="#">August - November</a>
                            </div> -->
                            <!-- <a href="{{ url('dataperusahaan/tambah') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"> Perusahaan</i></a> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    @if(session('success'))
                    <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif
                    <h4 class="card-title">Form Custom Bond</h4>
                    <form class="forms-sample" method="post" action="{{ route('update.custom', $encrypt) }}">
                        @csrf
                        @method('PUT')
                        <div class="form-group row">
                            <div class="col-4">
                                <label for="TypeJaminan">Type Jaminan<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Type Jaminan" name="TypeJaminan" id="TypeJaminan" 
                                        class="form-select form-select-sm js-example-basic-single" required>
                                    <option value="" disabled {{ !old('TypeJaminan', $typeJaminan) || old('TypeJaminan', $typeJaminan) === '-' ? 'selected' : '' }} hidden>Pilih Type Jaminan</option>
                                    <option value="KITE" {{ strtoupper(old('TypeJaminan', $typeJaminan)) === 'KITE' ? 'selected' : '' }}>KITE</option>
                                    <option value="KABER" {{ strtoupper(old('TypeJaminan', $typeJaminan)) === 'KABER' ? 'selected' : '' }}>KABER</option>
                                    <option value="BC12" {{ strtoupper(old('TypeJaminan', $typeJaminan)) === 'BC12' ? 'selected' : '' }}>BC12</option>
                                    <option value="PPJK" {{ strtoupper(old('TypeJaminan', $typeJaminan)) === 'PPJK' ? 'selected' : '' }}>PPJK</option>
                                    <option value="TPS" {{ strtoupper(old('TypeJaminan', $typeJaminan)) === 'TPS' ? 'selected' : '' }}>TPS</option>
                                    <option value="PJT" {{ strtoupper(old('TypeJaminan', $typeJaminan)) === 'PJT' ? 'selected' : '' }}>PJT</option>
                                </select>
                                @error('TypeJaminan')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <label for="Penjamin">Penjamin</label>
                                <input type="text" class="form-control form-control-sm" name="Penjamin" id="Penjamin" value="PT. JAMKRIDA JATENG" readonly>
                            </div>
                            <div class="col-4">
                                <label for="NoKertas">Nomor Kertas<span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="NoKertas" id="NoKertas" placeholder="Nomor Kertas" value="{{ old('NoKertas', $nomorKertas) }}" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-4">
                                <label for="PenanggungJawab">Penanggung Jawab<span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="PenanggungJawab" id="PenanggungJawab" placeholder="Penanggung Jawab" value="{{ old('PenanggungJawab', $penanggungJawab) }}" required>
                            </div>
                            <div class="col-4">
                                <label for="Jabatan">Jabatan<span class="text-danger">*</span></label>
                                <select name="Jabatan" id="Jabatan" class="form-select form-select-sm js-example-basic-single" required>
                                    <option value="" disabled {{ !old('Jabatan', $jabatan) || old('Jabatan', $jabatan) === '-' ? 'selected' : '' }} hidden>Pilih Jabatan</option>
                                    <option value="Direktur Utama" {{ old('Jabatan', $jabatan) === 'Direktur Utama' ? 'selected' : '' }}>Direktur Utama</option>
                                    <option value="Wakil Direktur Utama" {{ old('Jabatan', $jabatan) === 'Wakil Direktur Utama' ? 'selected' : '' }}>Wakil Direktur Utama</option>
                                    <option value="Direktur" {{ old('Jabatan', $jabatan) === 'Direktur' ? 'selected' : '' }}>Direktur</option>
                                    <option value="Direktur Pemasaran" {{ old('Jabatan', $jabatan) === 'Direktur Pemasaran' ? 'selected' : '' }}>Direktur Pemasaran</option>
                                    <option value="Direktur Operasional" {{ old('Jabatan', $jabatan) === 'Direktur Operasional' ? 'selected' : '' }}>Direktur Operasional</option>
                                    <option value="Direktur Umum" {{ old('Jabatan', $jabatan) === 'Direktur Umum' ? 'selected' : '' }}>Direktur Umum</option>
                                    <option value="Direktur Kepatuhan" {{ old('Jabatan', $jabatan) === 'Direktur Kepatuhan' ? 'selected' : '' }}>Direktur Kepatuhan</option>
                                    <option value="Assistant Vice President" {{ old('Jabatan', $jabatan) === 'Assistant Vice President' ? 'selected' : '' }}>Assistant Vice President</option>
                                    <option value="Lain-Lain" {{ old('Jabatan', $jabatan) === 'Lain-Lain' ? 'selected' : '' }}>Lain-Lain</option>
                                </select>
                                @error('Jabatan')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <label for="Sertifikat">Nomor Sertifikat<span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="Sertifikat" id="Sertifikat" placeholder="Nomor Sertifikat" value="{{ old('Sertifikat', $sertifikat) }}" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-4">
                                <label for="NomorPolis">Nomor Polis</label>
                                <input type="text" class="form-control form-control-sm" name="NomorPolis" id="NomorPolis" placeholder="Nomor Polis" value="{{ old('NomorPolis', $nomorPolis) }}">
                            </div>
                            <div class="col-4">
                                <label for="Principle">Principal<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Nama Principal" name="Principle" id="Principle"
                                        required class="form-select form-select-sm js-example-basic-single @error('Principle') is-invalid @enderror">
                                    <option value="" disabled {{ !old('Principle', $principal) || old('Principle', $principal) === '-' ? 'selected' : '' }} hidden>Pilih Nama Principal</option>
                                    @foreach($principles as $pls)
                                        <option value="{{ $pls['id_cabang'] }}" {{ old('Principle', $principal) == $pls['id_cabang'] ? 'selected' : '' }}>
                                            {{ $pls['cabang'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('Principle')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <label for="DinasID">Dinas<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Nama Dinas" 
                                        name="DinasID" 
                                        required 
                                        class="form-select form-select-sm @error('DinasID') is-invalid @enderror js-example-basic-single">
                                    <option value="" disabled {{ empty($dinasId) ? 'selected' : '' }} hidden>
                                        Pilih Dinas
                                    </option>
                                    @foreach($dinas as $dns)
                                        <option value="{{ $dns['IDDinas'] }}" 
                                                {{ (isset($dinasId) && (int)$dinasId === (int)$dns['IDDinas']) ? 'selected' : '' }}>
                                            {{ $dns['Nama'] }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('DinasID')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="DitujukanKepada">Ditujukan Kepada</label>
                            <textarea class="form-control" name="DitujukanKepada" id="DitujukanKepada" rows="4" placeholder="Ditujukan kepada....">{{ old('DitujukanKepada', $ditujukanKepada) }}</textarea>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="DokumenSumber">Dokumen Sumber</label>
                                <select name="DokumenSumber" id="DokumenSumber" class="form-select form-select-sm js-example-basic-single">
                                    <option value="" disabled {{ !old('DokumenSumber', $dokumenSumber) || old('DokumenSumber', $dokumenSumber) === '-' ? 'selected' : '' }} hidden>Pilih Dokumen Sumber</option>
                                    <option value="PIB" {{ old('DokumenSumber', $dokumenSumber) === 'PIB' ? 'selected' : '' }}>PIB</option>
                                    <option value="PIBT" {{ old('DokumenSumber', $dokumenSumber) === 'PIBT' ? 'selected' : '' }}>PIBT</option>
                                    <option value="SPKBM" {{ old('DokumenSumber', $dokumenSumber) === 'SPKBM' ? 'selected' : '' }}>SPKBM</option>
                                    <option value="SK" {{ old('DokumenSumber', $dokumenSumber) === 'SK' ? 'selected' : '' }}>SK</option>
                                    <option value="NPWP" {{ old('DokumenSumber', $dokumenSumber) === 'NPWP' ? 'selected' : '' }}>NPWP</option>
                                </select>
                                @error('DokumenSumber')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-6">
                                <label for="NomorDokumen">Nomor Dokumen</label>
                                <input type="text" class="form-control form-control-sm" name="NomorDokumen" id="NomorDokumen" placeholder="Nomor Dokumen" value="{{ old('NomorDokumen', $nomorDokumen) }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="TglDokumen">Tgl Dokumen</label>
                                <input type="date" class="form-control form-control-sm" name="TglDokumen" id="TglDokumen" placeholder="Tanggal Dokumen" value="{{ old('Tanggal Dokumen', $tglDokumen) }}">
                            </div>
                            <div class="col-6">
                                <label for="NomorDokumenSKEP">Nomor Dokumen SKEP<span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="NomorDokumenSKEP" id="NomorDokumenSKEP" placeholder="Nomor Dokumen SKEP" value="{{ old('NomorDokumenSKEP', $nomorDokumenSKEP) }}" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="TglDokumenSkep">Tgl Dokumen SKEP<span class="text-danger">*</span></label>
                                <input type="date" class="form-control form-control-sm" name="TglDokumenSkep" id="TglDokumenSkep" placeholder="Tanggal Dokumen SKEP" value="{{ old('TglDokumenSkep', $tglDokumenSKEP) }}" required>
                            </div>
                            <div class="col-6">
                                <label for="NilaiJaminan">Nilai Jaminan<span class="text-danger">*</span></label>
                                <input type="number" class="form-control form-control-sm" name="NilaiJaminan" id="NilaiJaminan" placeholder="Nilai Jaminan" value="{{ old('NilaiJaminan', $nilaiPenjaminan) }}" min="0" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="NilaiKuitansi">Nilai Kuitansi</label>
                                <input type="number" class="form-control form-control-sm" name="NilaiKuitansi" id="NilaiKuitansi" placeholder="Nilai Kuitansi" value="{{ old('NilaiKuitansi', $nilaiKuitansi) }}" min="0">
                            </div>
                            <div class="col-6">
                                <label for="BeaMasuk">Bea Masuk</label>
                                <input type="number" class="form-control form-control-sm" name="BeaMasuk" id="BeaMasuk" placeholder="Bea Masuk" value="{{ old('BeaMasuk', $beaMasuk) }}" min="0">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="BiayaAdmin">Biaya Administrasi</label>
                                <input type="number" class="form-control form-control-sm" name="BiayaAdmin" id="BiayaAdmin" placeholder="Biaya Administrasi" value="{{ old('BiayaAdmin', $biayaAdmin) }}" min="0">
                            </div>
                            <div class="col-6">
                                <label for="IjpTotal">IJP Total<span class="text-danger">*</span></label>
                                <input type="number" class="form-control form-control-sm" name="IjpTotal" id="IjpTotal" placeholder="IJP Total" value="{{ $ijpTotal }}" min="0" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="IjpNett">IJP Nett</label>
                                <input type="number" class="form-control form-control-sm" name="IjpNett" id="IjpNett" placeholder="IJP Nett" value="{{ $ijpNett }}" min="0" readonly>
                            </div>
                            <div class="col-6">
                                <label for="JumlahHari">Jumlah Hari<span class="text-danger">*</span></label>
                                <input type="number" class="form-control form-control-sm" name="JumlahHari" id="JumlahHari" placeholder="Jumlah Hari" value="{{ $jmlHari }}" min="0" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="TglMulai">Tgl Mulai</label>
                                <input type="date" class="form-control form-control-sm" name="TglMulai" id="TglMulai" placeholder="Tanggal Mulai" value="{{ old('TglMulai', $tglMulai) }}">
                            </div>
                            <div class="col-6">
                                <label for="TglBerakhir">Tgl Berakhir</label>
                                <input type="date" class="form-control form-control-sm" name="TglBerakhir" id="TglBerakhir" placeholder="Tanggal Berakhir" value="{{ old('TglBerakhir', $tglBerakhir) }}" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="TglTerbit">Tgl Terbit</label>
                                <input type="date" class="form-control form-control-sm" name="TglTerbit" id="TglTerbit" placeholder="Tanggal Terbit" value="{{ old('TglTerbit', $tglTerbit) }}">
                            </div>
                            <div class="col-6">
                                <label for="TglKuitansi">Tgl Kuitansi</label>
                                <input type="date" class="form-control form-control-sm" name="TglKuitansi" id="TglKuitansi" placeholder="Tanggal Kuitansi" value="{{ old('TglKuitansi', $tglKuitansi) }}">
                            </div>
                        </div>
                        <input type="hidden" name="KomisiAgen" id="KomisiAgen">
                        <a href="{{ url('v3/custombond') }}" class="btn btn-light"><i class="fa fa-angle-left"></i> Kembali</a>
                        <button type="submit" class="btn btn-primary me-2">Simpan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- partial:partials/_footer.html -->
@include('partials.external.footer')
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/chart.js/chart.umd.js"></script>

<!-- Datatables -->
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.bootstrap5.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.select.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/vendors/select2/select2.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ url('/') }}/skydash/src/assets/js/off-canvas.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/template.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/settings.js"></script>
<script src="assets/js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{{ url('/') }}/skydash/src/assets/js/jquery.cookie.js" type="text/javascript"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dashboard.js"></script>
<!-- <script src="assets/js/Chart.roundedBarCharts.js"></script> -->
<!-- End custom js for this page-->
<script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
</script>
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>
<script>
$(document).ready(function () {
    // Script untuk kalkulasi IJP yang sudah ada
    let timer;
    
    console.log('CSRF Token:', $('meta[name="csrf-token"]').attr('content'));
    
    function triggerCalculate() {
        clearTimeout(timer);
        timer = setTimeout(function () {
            let type_jaminan = $("select[name='TypeJaminan']").val();
            let nilai_penjaminan = $("#NilaiJaminan").val();
            let jml_hari = parseInt($("#JumlahHari").val(), 10);
            let total_ijp = parseInt($("#IjpTotal").val(), 10);

            // Debug: Log semua nilai input
            console.log('=== DEBUGGING VALIDATION ===');
            console.log('Type Jaminan:', type_jaminan);
            console.log('Nilai Penjaminan:', nilai_penjaminan);
            console.log('Jumlah Hari:', jml_hari);
            console.log('Total IJP:', total_ijp);
            
            // Validasi: semua field harus terisi dan valid
            if (!type_jaminan || !nilai_penjaminan || !jml_hari || !total_ijp || 
                Number(nilai_penjaminan) <= 0 || jml_hari <= 0 || total_ijp <= 0) {
                console.log('❌ Validation failed - tidak semua field terisi dengan benar');
                $("#IjpNett").val(''); // Kosongkan result jika validasi gagal
                return;
            }
            
            console.log('✅ Validation passed - semua field terisi, mengirim request...');
            console.log('URL:', "{{ route('calc-ijp.custom') }}");
            
            let requestData = {
                type_jaminan: type_jaminan,
                nilai_penjaminan: Number(nilai_penjaminan),
                jml_hari: jml_hari,
                total_ijp: total_ijp
            };
            
            console.log('Request Data:', requestData);

            $.ajax({
                url: "{{ route('calc-ijp.custom') }}",
                method: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: JSON.stringify(requestData),
                beforeSend: function(xhr) {
                    console.log('Sending request...');
                    $("#IjpNett").val('Calculating...'); // Loading indicator
                },
                success: function (response) {
                    console.log('SUCCESS Response:', response);
                    let res = response.data;
                    $("#IjpNett").val(res.NettIjp || 0);
                    $("#KomisiAgen").val(res.KomisiAgen || 0.00);
                },
                error: function (xhr, status, error) {
                    console.log('=== ERROR DETAILS ===');
                    console.log('Status:', xhr.status);
                    console.log('Status Text:', xhr.statusText);
                    console.log('Ready State:', xhr.readyState);
                    console.log('Response Text:', xhr.responseText);
                    console.log('Error:', error);
                    console.log('Status Parameter:', status);
                    
                    if (xhr.status === 0) {
                        console.error('Network error - kemungkinan CORS atau server tidak bisa dijangkau');
                    } else if (xhr.status === 302) {
                        console.error('Redirect detected - kemungkinan masalah authentication');
                    } else if (xhr.status === 404) {
                        console.error('Route tidak ditemukan');
                    } else if (xhr.status === 419) {
                        console.error('CSRF token expired atau invalid');
                    } else if (xhr.status === 500) {
                        console.error('Server error - cek log Laravel');
                    }
                    
                    try {
                        const body = JSON.parse(xhr.responseText || '{}');
                        console.log('Parsed Response Body:', body);
                    } catch (e) {
                        console.log('Cannot parse response as JSON');
                    }
                    
                    $("#IjpNett").val("Error " + xhr.status);
                },
                complete: function(xhr, status) {
                    console.log('Request completed with status:', status);
                }
            });
        }, 500); // Tingkatkan delay menjadi 500ms untuk mengurangi frekuensi
    }

    $("#NilaiJaminan, #JumlahHari, #IjpTotal, select[name='TypeJaminan']")
        .on("input change", function() {
            console.log('Field changed:', this.name || this.id, 'Value:', $(this).val());
            triggerCalculate();
        });

    // Script baru untuk kalkulasi Tanggal Berakhir
    function calculateTglBerakhir() {
        let tglMulai = $("#TglMulai").val();
        let jumlahHari = parseInt($("#JumlahHari").val(), 10);

        console.log('=== CALCULATING TGL BERAKHIR ===');
        console.log('Tgl Mulai:', tglMulai);
        console.log('Jumlah Hari:', jumlahHari);

        // Validasi input
        if (!tglMulai || !jumlahHari || jumlahHari <= 0) {
            console.log('❌ Tidak bisa calculate - Tgl Mulai atau Jumlah Hari tidak valid');
            $("#TglBerakhir").val('');
            return;
        }

        try {
            // Parse tanggal mulai
            let startDate = new Date(tglMulai);
            
            // Validasi apakah tanggal valid
            if (isNaN(startDate.getTime())) {
                console.log('❌ Tanggal mulai tidak valid');
                $("#TglBerakhir").val('');
                return;
            }

            // Tambahkan jumlah hari (dikurangi 1 karena hari pertama dihitung)
            let endDate = new Date(startDate);
            endDate.setDate(startDate.getDate() + jumlahHari);

            // Format ke YYYY-MM-DD untuk input date
            let formattedEndDate = endDate.toISOString().split('T')[0];
            
            console.log('✅ Calculated Tgl Berakhir:', formattedEndDate);
            $("#TglBerakhir").val(formattedEndDate);

        } catch (error) {
            console.error('Error calculating end date:', error);
            $("#TglBerakhir").val('');
        }
    }

    // Event listeners untuk kalkulasi tanggal
    $("#TglMulai, #JumlahHari").on("input change", function() {
        console.log('Date field changed:', this.id, 'Value:', $(this).val());
        calculateTglBerakhir();
    });

    // Debug: Log saat event listener terpasang
    console.log('Date calculation event listeners attached to: #TglMulai, #JumlahHari');
});
</script>
</body>

</html>
@endsection