@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
$id_encrypt = $user->id_encrypt;
@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">Surety Bond</h3>
                    <h6 class="fw-normal mb-0">
                        Surety Bond <i class="fa fa-angle-double-right"></i>
                        Tambah
                    </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 Surety Bond</h4>
                    {{-- 
                        LIST FIELD FORM
                        - Bank ?
                        - CabangId ?
                        - NomorKertas
                        - NamaPejabat
                        - Jabatan
                        - NilaiKontrak
                        - Persentase
                    --}}
                    <form class="forms-sample" method="post" action="{{ route('save.surety') }}">
                        @csrf
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="TipePenjaminan">Tipe Penjaminan<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Tipe Penjaminan" name="TipePenjaminan" id="TipePenjaminan" 
                                        class="form-select form-select-sm js-example-basic-single">
                                    <option value="" disabled selected hidden>Pilih Tipe Penjaminan</option>
                                    <option value="penawaran">Penawaran</option>
                                    <option value="pelaksanaan">Pelaksanaan</option>
                                    <option value="uang muka">Uang Muka</option>
                                    <option value="pemeliharaan">Pemeliharaan</option>
                                </select>
                                @error('TipePenjaminan')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-6">
                                <label for="NomorSertifikat">Nomor Sertifikat<span class="text-danger">*</span></label>
                                <input class="form-control form-control-sm" name="NomorSertifikat" id="NomorSertifikat" placeholder="Nomor Sertifikat">
                                @error('NomorSertifikat')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="CabangID">Nama Perusahaan<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Nama Perusahaan" name="CabangID" class="form-select form-select-sm  js-example-basic-single">
                                    <option value="" disabled selected hidden>Pilih Perusahaan</option>
                                    @foreach($perusahaans as $phs)
                                    <option value="{{ $phs['id_cabang'] }}">{{ $phs['cabang']}}</option>
                                    @endforeach
                                    
                                </select>
                            </div>
                            <div class="col-6">
                                <label for="NomorKertas">Nomor Kertas<span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="NomorKertas" id="NomorKertas" placeholder="Nomor Kertas">
                                @error('NomorKertas')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                                {{-- 
                            penawaran, pelaksanaan, uang muka, pemeliharaan --}}
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="NamaPejabat">Nama Pejabat</label>
                                <input type="text" class="form-control form-control-sm" name="NamaPejabat" id="NamaPejabat" placeholder="Nama Pejabat">
                            </div>
                            <div class="col-6">
                                <label for="Jabatan">Jabatan</label>
                                <select data-placeholder="Pilih Jabatan" name="Jabatan" class="form-select form select-sm js-example-basic-single">
                                    <option value="" disabled selected hidden>Pilih Jabatan</option>
                                    <option value="Komisaris">Komisaris</option>
                                    <option value="Direktur Utama">Direktur Utama</option>
                                    <option value="Wakil Direktur Utama">Wakil Direktur Utama</option>
                                    <option value="Direktur">Direktur</option>
                                    <option value="Direktur KSO">Direktur KSO</option>
                                    <option value="Komanditer">Komanditer</option>
                                    <option value="Direktur Pemasaran">Direktur Pemasaran</option>
                                    <option value="Direktur Operasional">Direktur Operasional</option>
                                    <option value="Direktur Umum">Direktur Umum</option>
                                    <option value="Direktur Kepatuhan">Direktur Kepatuhan</option>
                                    <option value="Direktur Keuangan">Direktur Keuangan</option>
                                    <option value="Lain-Lain">Lain-Lain</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="NilaiKontrak">Nilai Kontrak</label>
                                <input type="number" min="1" class="form-control form-control-sm @error('NilaiKontrak') is-invalid @enderror" name="NilaiKontrak" id="NilaiKontrak" placeholder="Nilai Kontrak">
                                @error('NilaiKontrak')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            {{-- ! ALERT: Ini Ambil Dari API Kah Option Nya??? --}}
                            <div class="col-6">
                                <label for="Persentase">Persentase<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Persentase" name="Persentase" id="Persentase" class="form-select form select-sm js-example-basic-single">
                                    <option value="" disabled selected hidden>Pilih Persentase</option>
                                    {{-- OPSI PERSENTASE DISINI - akan diisi oleh JavaScript berdasarkan tipe penjaminan --}}
                                    {{-- @foreach($persentases as $persentase)
                                    <option value="{{ $persentase['id'] }}">{{ $persentase['nama'] }}</option>
                                    @endforeach --}}
                                </select>
                                @error('Pesentase')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="NilaiPenjaminan">Nilai Penjaminan</label>
                                <input type="number" min="1" class="form-control form-control-sm @error('NilaiPenjaminan') is-invalid @enderror" name="NilaiPenjaminan" id="NilaiPenjaminan" placeholder="Nilai Penjaminan">
                                @error('NilaiPenjaminan')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            {{-- ! ALERT: Ini Ambil Dari API Kah Option Nya??? --}}
                            <div class="col-6">
                                <label for="Dinas">Dinas<span class="text-danger">*</span></label>
                                <select data-placeholder="Pilih Dinas" name="Dinas" class="form-select form select-sm js-example-basic-single">
                                    <option value="" disabled selected hidden>Pilih Dinas</option>
                                    @foreach($dinas as $d)
                                    <option value="{{ $d['IDDinas'] }}">{{ $d['Nama'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="form-group col-6">
                                <label for="Ditujukan">Ditujukan</label>
                                <textarea class="form-control" name="Ditujukan" id="Ditujukan" rows="4" placeholder="Ditujukan...."></textarea>
                            </div>
                            <div class="form-group col-6">
                                <label for="Pekerjaan">Pekerjaan</label>
                                <textarea class="form-control" name="Pekerjaan" id="Pekerjaan" rows="4" placeholder="Pekerjaan...."></textarea>
                            </div>
                        </div>
                        <div class="form-group col">
                            <div class="form-group col-3">
                                <label for="SumberDana">Sumber Dana</label>
                                <div class="row">
                                    <div class="col-4">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label" for="APBN">
                                                <input type="radio" class="form-check-input" name="SumberDana" id="APBN" value="APBN" checked>
                                                APBN
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label" for="APBD">
                                                <input type="radio" class="form-check-input" name="SumberDana" id="APBD" value="APBD">
                                                APBD
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label" for="SWASTA">
                                                <input type="radio" class="form-check-input" name="SumberDana" id="SWASTA" value="SWASTA">
                                                SWASTA
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="pelaksanaan-fields" class="form-group row d-none">
                            <div class="col-6">
                                <label for="NomorSpk">Nomor SPK / SPPBJ</label>
                                <input type="text" class="form-control form-control-sm" name="NomorSpk" id="NomorSpk" placeholder="Nomor SPK / SPPBJ">
                            </div>
                            <div class="col-6">
                                <label for="TglSpk">Tanggal Surat SPK / SPBJ</label>
                                <input type="date" class="form-control form-control-sm" name="TglSpk" id="TglSpk" placeholder="Tanggal SPK/SPPBJ">
                            </div>
                        </div>
                        <div id="penawaran-fields" class="form-group row d-none">
                            <div class="col-6">
                                <label for="TempatLelang">Tempat Lelang</label>
                                <input type="text" class="form-control form-control-sm" name="TempatLelang" id="TempatLelang" placeholder="Tempat Lelang">
                            </div>
                        </div>
                        <div id="pemeliharaan-fields" class="form-group row d-none">
                            <div class="col-6">
                                <label for="BeritaAcara">Berita Acara</label>
                                <input type="text" class="form-control form-control-sm" name="BeritaAcara" id="BeritaAcara" placeholder="Berita Acara">
                            </div>
                            <div class="col-6">
                                <label for="TglBast">Tanggal BAST</label>
                                <input type="date" class="form-control form-control-sm" name="TglBast" id="TglBast" placeholder="Tanggal BAST">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="form-group col-6">
                                <label for="TglMulaiPekerjaan">Tanggal Mulai Pekerjaan</label>
                                <input type="date" class="form-control form-control-sm" name="TglMulaiPekerjaan" id="TglMulaiPekerjaan" placeholder="Tanggal Mulai Pekerjaan">
                            </div>
                            <div class="form-group col-6">
                                <label for="TglCetak">Tanggal Cetak</label>
                                <input type="date" class="form-control form-control-sm" name="TglCetak" id="TglCetak" placeholder="Tanggal Cetak">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="JumlahHari">Jumlah Hari</label>
                                <input type="number" min="1" inputmode="numeric" class="form-control form-control-sm" name="JumlahHari" id="JumlahHari" placeholder="Jumlah Hari">
                            </div>
                            <div class="col-6">
                                <label for="TglKwitansi">Tanggal Kuitansi</label>
                                <input type="date" class="form-control form-control-sm" name="TglKwitansi" id="TglKwitansi" placeholder="Tanggal Mulai">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="TglSelesaiPekerjaan">Tanggal Selesai Pekerjaan</label>
                                <input type="date" readonly class="form-control form-control-sm bg-secondary-subtle" name="TglSelesaiPekerjaan" id="TglSelesaiPekerjaan" placeholder="Tanggal Selesai Pekerjaan">
                            </div>
                            <div class="col-6">
                                <label for="TotalIjp">Total IJP</label>
                                <input type="number" min="1" inputmode="numeric" class="form-control form-control-sm" name="TotalIjp" id="TotalIjp" placeholder="Total IJP">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-3">
                                <label for="BiayaMaterai" class="text-success">Biaya Materai<span class="text-danger">*</span></label>
                                <input class="form-control form-control-sm" name="BiayaMaterai" id="BiayaMaterai" placeholder="Biaya Materai" value="{{ $biayaMaterai }}">
                            </div>
                            <div class="col-3">
                                <label for="BiayaSertifikat" class="text-success">Biaya Sertifikat<span class="text-danger">*</span></label>
                                <input class="form-control form-control-sm" name="BiayaSertifikat" id="BiayaSertifikat" placeholder="Biaya Sertifikat" value="{{ $sertifikat }}">
                            </div>
                            <div class="col-3">
                                <label for="BiayaAdmin">Biaya Administrasi</label>
                                <input readonly class="form-control form-control-sm bg-secondary-subtle" name="BiayaAdmin" id="BiayaAdmin" placeholder="Biaya Administrasi">
                            </div>
                            <div class="col-3">
                                <label for="NettIjp">Nett IJP</label>
                                <input readonly class="form-control form-control-sm bg-secondary-subtle" name="NettIjp" id="NettIjp" placeholder="Nett IJP">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-4">
                                <label for="kategori">Pengurangan Hari</label>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="IsKurangHari" id="IsKurangHari" value="1" checked>
                                                1 (tanggal akhir-1)
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i></label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="IsKurangHari" id="IsKurangHari" value="0">
                                                0 (tanggal ke tanggal)
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i></label>
                                        </div>
                                    </div>
                                </div>
                                @error('IsKurangHari')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-4">
                                <label for="cetakan">Cetakan</label>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="IsCetakan" id="IsCetakan" value="default" checked>
                                                Default
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i></label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-check-primary">
                                            <label class="form-check-label">
                                                <input type="radio" class="form-check-input" name="IsCetakan" id="IsCetakan" value="custom">
                                                Custom
                                                <i class="input-helper"></i>
                                                <i class="input-helper"></i></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label>Upload Surat Permohonan <small class="text-danger">(Ext. image/pdf max. 10MB)</small></label>
                            <input type="file" name="fileSuratPermohonan" class="file-upload-default">
                            <div class="input-group col-xs-12 d-flex align-items-center">
                                <input type="text" class="form-control form-control-sm file-upload-info" disabled placeholder="Upload Image">
                                <span class="input-group-append ms-2">
                                    <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                </span>
                            </div>
                        </div>
                        <div class="form-group col">
                            <div class="mb-3">
                                <label>Lampiran Dokumen Dinas 1 <small class="text-danger">(Ext. image/pdf max. 15MB)</small></label>
                                <input type="file" name="fileDinas1" class="file-upload-default">
                                <div class="input-group col-xs-12 d-flex align-items-center">
                                    <input type="text" class="form-control form-control-sm file-upload-info" disabled placeholder="Upload Image">
                                    <span class="input-group-append ms-2">
                                        <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                    </span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label>Lampiran Dokumen Dinas 2 <small class="text-danger">(Ext. image/pdf max. 15MB)</small></label>
                                <input type="file" name="fileDinas2" class="file-upload-default">
                                <div class="input-group col-xs-12 d-flex align-items-center">
                                    <input type="text" class="form-control form-control-sm file-upload-info" disabled placeholder="Upload Image">
                                    <span class="input-group-append ms-2">
                                        <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                    </span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label>Lampiran Dokumen Dinas 3 <small class="text-danger">(Ext. image/pdf max. 15MB)</small></label>
                                <input type="file" name="fileDinas3" class="file-upload-default">
                                <div class="input-group col-xs-12 d-flex align-items-center">
                                    <input type="text" class="form-control form-control-sm file-upload-info" disabled placeholder="Upload Image">
                                    <span class="input-group-append ms-2">
                                        <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                    </span>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label>Lampiran Dokumen Dinas 4 <small class="text-danger">(Ext. image/pdf max. 15MB)</small></label>
                                <input type="file" name="fileDinas4" class="file-upload-default">
                                <div class="input-group col-xs-12 d-flex align-items-center">
                                    <input type="text" class="form-control form-control-sm file-upload-info" disabled placeholder="Upload Image">
                                    <span class="input-group-append ms-2">
                                        <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="Hps">HPS</label>
                                <input class="form-control form-control-sm" name="Hps" id="Hps" placeholder="HPS">
                            </div>
                            <div class="col-6">
                                <label for="LokasiPekerjaan">Lokasi Pekerjaan</label>
                                <input class="form-control form-control-sm" name="LokasiPekerjaan" id="LokasiPekerjaan" placeholder="Lokasi Pekerjaan">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <label for="AlamatPemilikPekerjaan">Alamat Pemilik Pekerjaan</label>
                                <input class="form-control form-control-sm" name="AlamatPemilikPekerjaan" id="AlamatPemilikPekerjaan" placeholder="Alamat Pemilik Pekerjaan">
                            </div>
                            <div class="col-6">
                                <label for="Keterangan">Keterangan</label>
                                <input class="form-control form-control-sm" name="Keterangan" id="Keterangan" placeholder="Keterangan">
                            </div>
                        </div>
                        <a href="{{ url('v3/kontrabankgaransi') }}" 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="{{ url('/') }}/skydash/src/assets/js/file-upload.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() {
        $('#TipePenjaminan').on('change', function() {
            let pelaksanaanFields = document.getElementById('pelaksanaan-fields');
            let penawaranFields = document.getElementById('penawaran-fields');
            let pemeliharaanFields = document.getElementById('pemeliharaan-fields');
            let persentaseSelect = document.getElementById('Persentase');
            let selectedValue = $(this).val();
            
            // Reset persentase dropdown
            persentaseSelect.innerHTML = '<option value="" disabled selected hidden>Pilih Persentase</option>';
            
            if (selectedValue === 'pelaksanaan' || selectedValue === 'uang muka') {
                pelaksanaanFields.classList.remove('d-none');
                penawaranFields.classList.add('d-none');
                pemeliharaanFields.classList.add('d-none');
                document.getElementById('TempatLelang').value = '';
                document.getElementById('BeritaAcara').value = '';
                document.getElementById('TglBast').value = '';
                
                if (selectedValue === 'uang muka') {
                    // Generate options from 10% to 50% berurutan
                    for (let i = 10; i <= 50; i++) {
                        persentaseSelect.innerHTML += `<option value="${i}">${i}%</option>`;
                    }
                } else {
                    persentaseSelect.innerHTML += '<option value="5">5%</option>';
                    persentaseSelect.innerHTML += '<option value="6">6%</option>';
                    persentaseSelect.innerHTML += '<option value="7">7%</option>';
                    persentaseSelect.innerHTML += '<option value="8">8%</option>';
                    persentaseSelect.innerHTML += '<option value="9">9%</option>';
                    persentaseSelect.innerHTML += '<option value="10">10%</option>';
                }
                
            } else if (selectedValue === 'penawaran') {
                penawaranFields.classList.remove('d-none');
                pelaksanaanFields.classList.add('d-none');
                pemeliharaanFields.classList.add('d-none');
                document.getElementById('NomorSpk').value = '';
                document.getElementById('TglSpk').value = '';
                document.getElementById('BeritaAcara').value = '';
                document.getElementById('TglBast').value = '';
                
                // Opsi persentase untuk penawaran: 1%, 2%, 3%
                persentaseSelect.innerHTML += '<option value="1">1%</option>';
                persentaseSelect.innerHTML += '<option value="2">2%</option>';
                persentaseSelect.innerHTML += '<option value="3">3%</option>';
                
            } else if (selectedValue === 'pemeliharaan') {
                pemeliharaanFields.classList.remove('d-none');
                pelaksanaanFields.classList.add('d-none');
                penawaranFields.classList.add('d-none');
                document.getElementById('NomorSpk').value = '';
                document.getElementById('TglSpk').value = '';
                document.getElementById('TempatLelang').value = '';
                
                // Opsi persentase untuk pemeliharaan
                persentaseSelect.innerHTML += '<option value="5">5%</option>';
                persentaseSelect.innerHTML += '<option value="6">6%</option>';
                persentaseSelect.innerHTML += '<option value="7">7%</option>';
                persentaseSelect.innerHTML += '<option value="8">8%</option>';
                persentaseSelect.innerHTML += '<option value="9">9%</option>';
                persentaseSelect.innerHTML += '<option value="10">10%</option>';
                
            } else {
                pelaksanaanFields.classList.add('d-none');
                penawaranFields.classList.remove('d-none');
                pemeliharaanFields.classList.add('d-none');
            }
            
            // Refresh Select2 after updating options
            $('#Persentase').select2('destroy').select2();
        });
    });
</script>

<script>
    function getPengurang() {
        let isKurangHari = document.getElementById("IsKurangHari").value;
        let jumlahHari = parseInt(document.getElementById("JumlahHari").value) || 0;

        let pengurang = (isKurangHari == "1")
            ? (jumlahHari - 1)
            : jumlahHari;

        return pengurang;
    }

    function hitungTanggal(tglMulai, pengurang) {
        let date = new Date(tglMulai);
        date.setDate(date.getDate() + pengurang);

        let yyyy = date.getFullYear();
        let mm = String(date.getMonth() + 1).padStart(2, '0');
        let dd = String(date.getDate()).padStart(2, '0');

        return `${yyyy}-${mm}-${dd}`;
    }
    document.getElementById("TglMulaiPekerjaan").addEventListener("change", function() {
        let tglMulai = this.value;
        let pengurang = getPengurang();
        
        if (tglMulai && pengurang > 0) {
            document.getElementById("TglSelesaiPekerjaan").value = hitungTanggal(tglMulai, pengurang);
        } else {
            document.getElementById("TglSelesaiPekerjaan").value = 0;
        }
    });

    document.getElementById("JumlahHari").addEventListener("input", function() {
        document.getElementById("TglMulaiPekerjaan").dispatchEvent(new Event("change"));
    });

    document.getElementById("IsKurangHari").addEventListener("change", function() {
        document.getElementById("TglMulaiPekerjaan").dispatchEvent(new Event("change"));
    });
</script>

<script>
$(document).ready(function () {
    let timer;
    function triggerCalculate() {
        clearTimeout(timer);
        timer = setTimeout(function () {
            let type_jaminan = $("#TipePenjaminan").val() || "pelaksanaan";
            let nilai_penjaminan = $("#NilaiPenjaminan").val() || 0;
            let jml_hari = parseInt($("#JumlahHari").val(), 10) || 0;
            let biaya_materai = parseInt($("#BiayaMaterai").val(), 10) || 10000;
            let biaya_sertifikat = parseInt($("#BiayaSertifikat").val(), 10) || 40000;
            let total_ijp = parseInt($("#TotalIjp").val(), 10) || 0;

            $.ajax({
                url: "{{ route('surety.calc-ijp') }}",
                method: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: JSON.stringify({
                    type_jaminan: type_jaminan,
                    nilai_penjaminan: Number(nilai_penjaminan),
                    jml_hari: jml_hari,
                    biaya_materai: biaya_materai,
                    biaya_sertifikat: biaya_sertifikat,
                    total_ijp: total_ijp
                }),
                success: function (response) {
                    let nett = response.data;
                    $("#NettIjp").val(nett.NettIjp || 0);
                },
                error: function (xhr) {
                    console.error("AJAX error:", xhr);
                    if (xhr.status === 0) {
                        console.error('Network error or CORS blocked. If CORS, implement a server-side proxy endpoint at /v3/suretybond/calc-ijp.');
                    } else {
                        try {
                            const body = JSON.parse(xhr.responseText || '{}');
                            console.error('Response body:', body);
                            $("#NettIjp").val(0);
                        } catch (e) {
                            console.error('Non-JSON response or empty body');
                            $("#NettIjp").val(0);
                        }
                    }
                    $("#NettIjp").val("Error");
                }
            });
        }, 200);
    }

    $("#NilaiPenjaminan, #JumlahHari, #BiayaMaterai, #BiayaSertifikat, #TotalIjp, #TipePenjaminan")
        .on("input change", triggerCalculate);

    triggerCalculate();
});
</script>

</body>

</html>
@endsection