@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 ?? '';

$kodeAgent          = $data['KodeAgent'];
$sertifikat         = $data['Sertifikat'];
$noKertas           = $data['NoKertas'];
$cabangID           = $data['CabangID'];
$typeJaminan        = $data['TypeJaminan'];
$namaPejabat        = trim($data['NamaPejabat'] ?? '');
$jabatan            = trim($data['Jabatan'] ?? '-');
$pnpNilaiKontrak    = $data['PnpNilaiKontrak'];
$persentase         = $data['Persentase'] ?? '';
$nilaiPenjaminan    = $data['NilaiPenjaminan'];
$ditujukan          = $data['Ditujukan'] ?? '';
$jenisProyek        = $data['JenisProyek'] ?? '';
$pekerjaan          = $data['Pekerjaan'] ?? '';
$dinasID            = $data['DinasID'] ?? '';
$tempatLelang       = $data['TempatLelang'] ?? '';
$beritaAcara        = $data['BeritaAcara'] ?? '';
$tglBeritaAcara        = $data['TglBeritaAcara'] ?? '';
$noKontrak          = $data['NoKontrak'] ?? '';
$tglKontrak         = $data['TglKontrak'] ?? '';
$tglMulai           = $data['TglMulai'] ?? '';
$tglBerakhir        = $data['TglBerakhir'] ?? '';
$jmlHari            = $data['JmlHari'] ?? '';
$isKurangHari       = $data['IsKurangHari'] ?? '';
$tglCetak           = $data['TglCetak'] ?? '';
$tglKwitansi        = $data['TglKwitansi'] ?? '';
$ijpNett            = $data['IjpNett'] ?? '';
$biayaAdmin         = $data['BiayaAdmin'] ?? '';
$ijpTotal           = $data['IjpTotal'] ?? '';
$filePermohonan     = $data['FilePermohonan'] ?? '';
$noBarcode          = $data['NoBarcode'] ?? '';
$noBarcodeHash      = $data['NoBarcodeHash'] ?? '';
$noBarcodeHashLink  = $data['NoBarcodeHashLink'] ?? '';
$status             = $data['Status'] ?? '';
$createdAt          = $data['CreatedAt'] ?? '';
$createdUser        = $data['CreatedUser'] ?? '';
$biayaMaterai       = $data['BiayaMaterai'] ?? '';
$biayaSertifikat    = $data['BiayaSertifikat'] ?? '';
$namaPerusahaan     = $data['NamaPerusahaan'] ?? '';
$alamatPerusahaan   = $data['AlamatPerusahaan'] ?? '';
$noSPK              = $data['NoSpk'] ?? '';
$tglSPK              = $data['TglSpk'] ?? '';
$hps = $data['Hps'] ?? '';
$lokasi_pekerjaan = $data['LokasiPekerjaan'] ?? '';
$alamat_pemilik_pekerjaan = $data['AlamatPemilikPekerjaan'] ?? '';
$keterangan = $data['Keterangan'] ?? '';
$file_permohonan = $data['FilePermohonan'] ?? '';
$file_dinas = $data['FileDinas'] ?? '';
@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>
                        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 Surety Bond</h4>
                    {{-- 
                        LIST FIELD FORM
                        - Bank ?
                        - CabangId ?
                        - NomorKertas
                        - NamaPejabat
                        - Jabatan
                        - NilaiKontrak
                        - Persentase
                    --}}
                    <form class="forms-sample" method="post" action="{{ route('update.surety', $encrypt) }}">
                        @csrf
                        @method('PUT')
                        <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 {{ !old('TipePenjaminan', $typeJaminan) || old('TipePenjaminan', $typeJaminan) === '-' ? 'selected' : '' }} hidden>Pilih Tipe Penjaminan</option>
                                    <option value="penawaran" {{ strtoupper(old('TipePenjaminan', $typeJaminan)) === 'PENAWARAN' ? 'selected' : '' }}>Penawaran</option>
                                    <option value="pelaksanaan" {{ strtoupper(old('TipePenjaminan', $typeJaminan)) === 'PELAKSANAAN' ? 'selected' : '' }}>Pelaksanaan</option>
                                    <option value="uang muka" {{ strtoupper(old('TipePenjaminan', $typeJaminan)) === 'UANG MUKA' ? 'selected' : '' }}>Uang Muka</option>
                                    <option value="pemeliharaan" {{ strtoupper(old('TipePenjaminan', $typeJaminan)) === 'PEMELIHARAAN' ? 'selected' : '' }}>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" value="{{ old('NomorSertifikat', $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 {{ !old('CabangID', $cabangID) ? 'selected' : '' }} hidden>Pilih Perusahaan</option>
                                    @if (old('CabangID', $cabangID) && $namaPerusahaan)
                                    <option value="{{ old('CabangID', $cabangID) }}" selected>{{ $namaPerusahaan }}</option>
                                    @endif
                                    @foreach($perusahaans as $phs)
                                    <option value="{{ $phs['id_cabang'] }}" {{ old('CabangID', $cabangID) == $phs['id_cabang'] ? 'selected' : '' }}>{{ $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" value="{{ old('NomorKertas', $noKertas) }}">
                                @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" value="{{ old('NamaPejabat', $namaPejabat) }}">
                            </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 hidden {{ old('Jabatan', $jabatan) === '-' ? 'selected' : '' }}>Pilih Jabatan</option>
                                    <option value="Komisaris" {{ old('Jabatan', $jabatan) === 'Komisaris' ? 'selected' : '' }}>Komisaris</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 KSO" {{ old('Jabatan', $jabatan) === 'Direktur KSO' ? 'selected' : '' }}>Direktur KSO</option>
                                    <option value="Komanditer" {{ old('Jabatan', $jabatan) === 'Komanditer' ? 'selected' : '' }}>Komanditer</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="Direktur Keuangan" {{ old('Jabatan', $jabatan) === 'Direktur Keuangan' ? 'selected' : '' }}>Direktur Keuangan</option>
                                    <option value="Lain-Lain" {{ old('Jabatan', $jabatan) === 'Lain-Lain' ? 'selected' : '' }}>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" value="{{ old('NilaiKontrak', $pnpNilaiKontrak) }}">
                                @error('NilaiKontrak')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <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" value="{{ old('NilaiPenjaminan', $nilaiPenjaminan) }}">
                                @error('NilaiPenjaminan')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="col-6">
                                <label for="Dinas">Dinas<span class="text-danger">*</span></label>
                                {{-- TODO : INI BELUM NUNGGU MAS YOGI DATENG --}}
                                <select data-placeholder="Pilih Dinas" name="Dinas" class="form-select form select-sm js-example-basic-single">
                                    <option value="" disabled {{ !old('Dinas', $dinasID) ? 'selected' : '' }} hidden>Pilih Dinas</option>
                                    @if(old('Dinas', $dinasID))
                                    <option value="{{ old('Dinas', $dinasID) }}" selected>{{ old('Dinas', $dinasID) }}</option>
                                    @endif
                                    @foreach($dinas as $d)
                                    <option value="{{ $d['IDDinas'] }}" {{ old('Dinas', $dinasID) == $d['IDDinas'] ? 'selected' : '' }}>{{ $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....">{{ old('Ditujukan', $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....">{{ old('Pekerjaan', $pekerjaan) }}</textarea>
                            </div>
                        </div>
                        <div class="form-group col">
                            <div class="form-group col-3">
                                @php
                                    // fallback
                                    $sumberDana = old('SumberDana', $jenisProyek ?: 'APBN');
                                @endphp

                                <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"
                                                    {{ $sumberDana == 'APBN' ? 'checked' : '' }}>
                                                APBN
                                                <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"
                                                    {{ $sumberDana == 'APBD' ? 'checked' : '' }}>
                                                APBD
                                                <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"
                                                    {{ $sumberDana == 'SWASTA' ? 'checked' : '' }}>
                                                SWASTA
                                                <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" value="{{ old('NomorSpk', $noSPK) }}">
                            </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" value="{{ old('TglSpk', $tglSPK) }}">
                            </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" value="{{ old('TempatLelang', $tempatLelang) }}">
                            </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" value="{{ old('BeritaAcara', $beritaAcara) }}">
                            </div>
                            <div class="col-6">
                                <label for="TglBast">Tanggal BAST</label>
                                <input type="date" class="form-control form-control-sm" name="TglBast" id="TglBast" value="{{ old('TglBast', $tglBeritaAcara) }}">
                            </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" value="{{ old('TglMulaiPekerjaan', $tglMulai) }}">
                            </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" value="{{ old('TglCetak', $tglCetak) }}">
                            </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" value="{{ old('JumlahHari', $jmlHari) }}">
                            </div>
                            <div class="col-6">
                                <label for="TglKwitansi">Tanggal Kuitansi</label>
                                <input type="date" class="form-control form-control-sm" name="TglKwitansi" id="TglKwitansi" value="{{ old('TglKwitansi', $tglKwitansi) }}">
                            </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" name="TglSelesaiPekerjaan" id="TglSelesaiPekerjaan" value="{{ old('TglSelesaiPekerjaan', $tglBerakhir) }}">
                            </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" value="{{ old('TotalIjp', $ijpTotal) }}">
                            </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="{{ old('BiayaMaterai', $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="{{ old('BiayaSertifikat', $biayaSertifikat) }}">
                            </div>
                            <div class="col-3">
                                <label for="BiayaAdmin">Biaya Administrasi</label>
                                <input disabled class="form-control form-control-sm" name="BiayaAdmin" id="BiayaAdmin" value="{{ old('BiayaAdmin', $biayaAdmin) }}">
                            </div>
                            <div class="col-3">
                                <label for="NettIjp">Nett IJP</label>
                                <input disabled class="form-control form-control-sm" name="NettIjp" id="NettIjp" value="{{ old('NettIjp', $ijpNett) }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-4">
                                @php
                                    // fallback ke 0
                                    $kurangHari = old('IsKurangHari', isset($isKurangHari) ? $isKurangHari : 0);
                                @endphp

                                <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="IsKurangHari1" value="1"
                                                    {{ $kurangHari == 1 ? 'checked' : '' }}>
                                                1 (tanggal akhir-1)
                                                <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="IsKurangHari0" value="0"
                                                    {{ $kurangHari == 0 ? 'checked' : '' }}>
                                                0 (tanggal ke tanggal)
                                                <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" {{ old('IsCetakan', 'default') == '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" {{ old('IsCetakan') == 'custom' ? 'checked' : '' }}>
                                                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" value="{{ old('fileSuratPermohonan', $file_permohonan) }}">
                            <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" {{ old('fileSuratPermohonan', $file_permohonan) ? 'value='.old('fileSuratPermohonan', $file_permohonan) : '' }}>
                                <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" value="{{ old('Hps', $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" value="{{ old('LokasiPekerjaan', $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" value="{{ old('AlamatPemilikPekerjaan', $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" value="{{ old('Keterangan', $keterangan) }}">
                            </div>
                        </div>
                        <a href="{{ url('v3/surety') }}" 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() {
        function handleTipePenjaminanChange() {
            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 = $('#TipePenjaminan').val();
            
            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') {
                    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 = '';
                
                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.add('d-none');
                pemeliharaanFields.classList.add('d-none');
            }
            
            let currentPersentase = '{{ old("Persentase", $persentase) }}';
            if (currentPersentase) {
                $('#Persentase').val(currentPersentase);
            }
            
            $('#Persentase').select2('destroy').select2();
        }
        
        handleTipePenjaminanChange();
        
        $('#TipePenjaminan').on('change', handleTipePenjaminanChange);
    });
</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>

</body>

</html>
@endsection