@extends('admin.layouts.admin')
@section('content')
@include('admin.rabi.style')
<div class="page-content">
    {!! globalSearchFilter($filters, '
    <div class="col-sm-3 d-grid">
        <label for="filter_daerah">Dearah Kontrak</label>
        <select id="filter_daerah" class="form-select form-select-sm" data-placeholder="Pilih Daerah Kontrak"></select>
    </div>
    <!--<div class="col-sm-3 d-grid">
        <label for="filter_v_id">Vendor Pengadaan</label>
        <select id="filter_v_id" class="form-select form-select-sm" data-placeholder="Pilih Vendor Pengadaan"></select>
    </div>-->
    ') !!}
    <div id="listContainer">
        @include('admin.rabi.list')
    </div>
</div>

<div class="modal fade" id="modalRabi" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-uppercase">Proses RABI/RAP/RABNAS | <span id="instansi_name"></span> <span id="instansi_pname"></span> <span id="instansi_rname"></span> <span id="instansi_dname"></span> <span id="instansi_vname"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <form id="formRabi" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="target_kontrak_id" id="target_kontrak_id">
                    <input type="hidden" name="vendor" id="vendor">

                    <div class="row mb-0">

                    <!-- DETAIL INFORMASI -->
                    <div class="col-md-6">
                        <div class="card h-100 card-he mb-2">
                            <div class="card-header bg-primary text-white fw-bold text-uppercase p-2 w-75">
                                Detail Informasi Kontrak
                            </div>

                            <div class="card-body border p-2 bg-light pb-0">

                            <div class="fw-bold fs-5 mb-2 text-uppercase">
                                <span id="nama_kegiatan"></span> 
                                <span id="tahun"></span>
                            </div>

                            <div class="d-flex flex-column gap-2 w-100">

                                <div class="input-group">
                                    <span class="input-group-text fixed-label text-uppercase">Kode Rekening</span>
                                    <input type="text" name="kode_rekening" id="kode_rekening" class="form-control fw-medium">
                                </div>

                                <div class="d-flex align-items-start mb-1">
                                    <div class="text-uppercase fw-bold" style="width: 12rem; flex-shrink:0;">Nilai Pagu</div>
                                    <div class="d-flex flex-column align-items-start w-100">
                                        <input type="text" class="form-control fw-bold text-success mb-1" id="pagu_rupiah" readonly style="background:0; border:0; border-bottom:1px solid; padding-left:0; outline:none; box-shadow:none;">
                                        <div class="small text-muted fst-italic" id="nilai_pagu_terbilang"></div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <span class="input-group-text fixed-label text-uppercase">Sumber Dana</span>
                                    <input type="text" class="form-control text-uppercase fw-bold" id="sumber_dana" readonly>
                                </div>

                                <div class="input-group">
                                    <span class="input-group-text fixed-label text-uppercase">Sistem Pengadaan</span>
                                    <input type="text" class="form-control text-uppercase fw-bold" id="sistem_pengadaan" readonly>
                                </div>

                                <div class="input-group">
                                    <span class="input-group-text fixed-label text-uppercase">Rencana Perusahaan</span>
                                    <input type="text" name="rencana_perusahaan" id="rencana_perusahaan" class="form-control fw-medium" readonly disabled>
                                </div>

                                <div class="input-group">
                                    <span class="input-group-text fixed-label text-uppercase">Brosur</span>
                                    <input type="file" name="brosur" id="brosur" class="form-control fw-medium">
                                    <span class="btn btn-success d-none" id="lihat_brosur">Lihat</button>
                                </div>

                            </div>

                            </div>
                        </div>
                    </div>


                    <!-- RAP AREA -->
                    <div class="col-md-6 mt-3 mt-md-0">
                        <div class="card h-100 card-he mb-2">
                            <div class="card-header p-0">
                                <ul class="nav nav-pills nav-fill w-100 ">
                                    <li class="nav-item">
                                        <a class="nav-link active text-center fw-semibold text-uppercase rounded-0 py-2 border"
                                        data-bs-toggle="pill"
                                        href="#rap-pane">
                                            RAP
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link text-center fw-semibold text-uppercase rounded-0 py-2 border"
                                        data-bs-toggle="pill"
                                        href="#rapp-pane">
                                            RAPP
                                        </a>
                                    </li>
                                </ul>
                            </div>

                            <div class="card-body p-2 bg-light border pb-0 tab-content">
                                <div class="tab-pane fade show active" id="rap-pane">
                                    <div class="table-responsive">
                                        <table id="table_rap" class="table table-sm table-hover mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>ITEM</th>
                                                    <th class="text-end">%</th>
                                                    <th class="text-end">Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="d-none">
                                                    <td>NILAI PAGU</td>
                                                    <td></td>
                                                    <td class="text-end" id="rap_pagu">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td>PPN & PPH</td>
                                                    <td class="text-end" id="ppn_pph_persen">12.5%</td>
                                                    <td class="text-end" id="rap_ppn">Rp 0</td>
                                                </tr>
                                                <tr class="fw-bold border-top">
                                                    <td>NILAI BERSIH</td>
                                                    <td></td>
                                                    <td class="text-end" id="rap_bersih">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td>HPP</td>
                                                    <td class="text-end" id="hpp_persen">0%</td>
                                                    <td class="text-end" id="rap_hpp">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td>KOORDINASI</td>
                                                    <td class="text-end" id="koordinasi_persen">4%</td>
                                                    <td class="text-end" id="rap_koordinasi">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td>PELAKSANA</td>
                                                    <td class="text-end" id="pelaksana_persen">4%</td>
                                                    <td class="text-end" id="rap_pelaksana">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td>PRAKIRA ONGKIR & INSTALASI</td>
                                                    <td class="text-end" id="ongkir_persen">4%</td>
                                                    <td class="text-end" id="rap_ongkir">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td>MARKETING/FEE</td>
                                                    <td class="text-end" id="marketing_persen">0%</td>
                                                    <td class="text-end" id="rap_marketing">Rp 0</td>
                                                </tr>
                                                <tr class="fw-bold border-top">
                                                    <td>PROFIT</td>
                                                    <td class="text-end" id="profit_persen">0%</td>
                                                    <td class="text-end" id="rap_profit">Rp 0</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr class="fw-bold border-top">
                                                    <td class="text-uppercase">Total Persen</td>
                                                    <td class="text-end" id="total_persen">0%</td>
                                                    <td><input type="hidden" name="inp_rap_profit" class="rupiah" id="inp_rap_profit"></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="rapp-pane">
                                    <div class="table-responsive" style="max-height: 18rem; overflow-y: auto;">
                                        <table id="table_rapp" class="table table-sm table-bordered table-hover mb-0">
                                            <thead class="table-light align-middle">
                                                <tr>
                                                    <th>NILAI KONTRAK</th>
                                                    <th style="width: 10%;" class="text-end">x</th>
                                                    <th style="width: 25%;" class="text-end" id="rapp_nilai_kontrak"></th>
                                                </tr>
                                                <tr>
                                                    <th>POTONGAN TAX</th>
                                                    <th style="width: 10%;" class="text-end" id="ppn_pph_rapp_persen">12,5%</th>
                                                    <th style="width: 25%;" class="text-end" id="rapp_ppn">Rp 0</th>
                                                </tr>
                                                <tr>
                                                    <th>NETT KONTRAK</th>
                                                    <th style="width: 10%;" class="text-end"></th>
                                                    <th style="width: 25%;" class="text-end" id="rapp_bersih">Rp. 0</th>
                                                </tr>
                                                <tr class="table-secondary">
                                                    <th rowspan="2">REALCOST KONTRAK (100% Sudah dipotong Pajak)</th>
                                                    <th style="width: 10%;" class="text-end">POST PERCENT</th>
                                                    <th rowspan="2" style="width: 25%;" class="text-end">NOMINAL</th>
                                                </tr>
                                                <tr class="table-secondary">
                                                    <th class="text-end" id="post-percent" data-percent="100">100%</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="fw-bold bg-light">
                                                    <td colspan="3">BIAYA PERENCANAAN</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">Bridging & Dealing</td>
                                                    <td class="text-end" id="rapp_persen_bridging">1%</td>
                                                    <td class="text-end" id="rapp_nom_bridging">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">Fee Direktur Pelaksana</td>
                                                    <td class="text-end" id="rapp_persen_direktur">1%</td>
                                                    <td class="text-end" id="rapp_nom_direktur">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">Biaya Beban Gaji</td>
                                                    <td class="text-end" id="rapp_persen_gaji">1%</td>
                                                    <td class="text-end" id="rapp_nom_gaji">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">Operasional Kantor</td>
                                                    <td class="text-end" id="rapp_persen_ops">1%</td>
                                                    <td class="text-end" id="rapp_nom_ops">Rp 0</td>
                                                </tr>

                                                <tr class="fw-bold bg-light">
                                                    <td colspan="3">BIAYA KONTRAK</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4 text-danger">HPP (Garansi, Sudah Termasuk Bunga/Denda Bank & Dana Talang)</td>
                                                    <td class="text-end text-danger" id="rapp_persen_hpp">0 %</td>
                                                    <td class="text-end" id="rapp_nom_hpp">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4 text-danger">Expedisi & Instalasi</td>
                                                    <td class="text-end text-danger"><input type="text" id="rapp_persen_expedisi" class="input-bottom text-end" value="3">%</td>
                                                    <td class="text-end" id="rapp_nom_expedisi">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4 text-danger">JAMLAK, JAMUKA, Pengurusan Pencairan & Adminitrasi Dinas</td>
                                                    <td class="text-end text-danger"><input type="text" id="rapp_persen_jamlak" class="input-bottom text-end" value="1">%</td>
                                                    <td class="text-end" id="rapp_nom_jamlak">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">PPK</td>
                                                    <td class="text-end" id="rapp_persen_ppk">1%</td>
                                                    <td class="text-end" id="rapp_nom_ppk">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">KADIS</td>
                                                    <td class="text-end" id="rapp_persen_kadis">2%</td>
                                                    <td class="text-end" id="rapp_nom_kadis">Rp 0</td>
                                                </tr>

                                                <tr class="fw-bold bg-light">
                                                    <td colspan="3">BIAYA KORDINASI</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">BPK</td>
                                                    <td class="text-end" id="rapp_persen_bpk">1%</td>
                                                    <td class="text-end" id="rapp_nom_bpk">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">KEJARI</td>
                                                    <td class="text-end" id="rapp_persen_kejari">1%</td>
                                                    <td class="text-end" id="rapp_nom_kejari">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">KEJATI</td>
                                                    <td class="text-end" id="rapp_persen_kejati">1%</td>
                                                    <td class="text-end" id="rapp_nom_kejati">Rp 0</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4">KEPOLISIAN</td>
                                                    <td class="text-end" id="rapp_persen_polisi">1%</td>
                                                    <td class="text-end" id="rapp_nom_polisi">Rp 0</td>
                                                </tr>

                                                <tr class="fw-bold bg-light">
                                                    <td colspan="3">BIAYA MARKETING</td>
                                                </tr>
                                                <tr>
                                                    <td class="ps-4 text-danger">Komitmen Marketing</td>
                                                    <td class="text-end text-danger"><input type="text" id="rapp_persen_marketing" class="input-bottom text-end" value="13">%</td>
                                                    <td class="text-end" id="rapp_nom_marketing">Rp 0</td>
                                                </tr>

                                                <tr class="fw-bold table-secondary">
                                                    <td class="">TOTAL POST BIAYA</td>
                                                    <td class="text-end text-danger" id="rapp_persen_total_biaya">0%</td>
                                                    <td class="fw-bold text-end" id="rapp_nom_total_biaya">Rp 0</td>
                                                </tr>

                                                <tr class="fw-bold table-warning">
                                                    <td>PROFIT PERUSAHAAN</td>
                                                    <td class="text-end" id="rapp_persen_profit">0%</td>
                                                    <td class="text-end">
                                                        <span id="rapp_nom_profit">Rp 0</span>
                                                        <input type="hidden" name="inp_rapp_nom_profit" class="rupiah" id="inp_rapp_nom_profit">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    </div>

                    <div class="card mb-2">
                        <div class="card-header bg-primary text-white fw-bold text-uppercase p-2 w-25">
                            RAB & RABNAS
                        </div>
                        <div class="card-body p-0 border">
                            <div class="table-responsive">
                                <table class="table table-bordered align-middle mb-0 table-sm" id="tableItem">
                                    <thead class="table-light text-center">
                                        <tr>
                                            <th class="text-uppercase" rowspan="2" style="width:28%">Detail Item</th>
                                            <th class="text-uppercase" rowspan="2" style="width:6%">Qty</th>
                                            <th class="text-uppercase" rowspan="2" style="width:8%">Satuan</th>
                                            <th class="text-uppercase" rowspan="2" style="width:10%">Pagu</th>
                                            <th class="text-uppercase" rowspan="2" style="width:10%">Jumlah Pagu</th>
                                            <th class="text-uppercase" colspan="3" style="width:32%">HPP</th>
                                            <th class="text-uppercase" colspan="2" style="width:100px">Gambar</th>
                                            <th class="text-uppercase" colspan="2" style="width:200px">EKATALOG</th>
                                            <th class="text-uppercase" rowspan="2" style="width:2%">Aksi</th>
                                        </tr>
                                        <tr>
                                            <th class="text-uppercase">Harga Satuan</th>
                                            <th class="text-uppercase">Jumlah</th>
                                            <th class="text-uppercase">Referensi link</th>
                                            <th class="text-uppercase">File</th>
                                            <th class="text-uppercase">Preview</th>
                                            <th class="text-uppercase" style="width: 100px;">Harga Tayang</th>
                                            <th class="text-uppercase" style="width: 100px;">Link</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot class="table-light">
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th class="text-end text-uppercase">Total Pagu</th>
                                            <th>
                                                <input type="text" id="grand_total" class="form-control fw-bold rupiah text-end" readonly>
                                            </th>
                                            <th class="text-end text-uppercase">Total HPP</th>
                                            <th>
                                                <input type="text" id="grand_total_hpp" class="form-control fw-bold rupiah text-end" readonly>
                                            </th>
                                            <th colspan="6"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between mt-3">
                        <button type="button" class="btn btn-sm btn-success" id="addRow">Tambah Baris</button>
                        <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
@include('admin.rabi.js')
@endpush