@extends('master')

@section('header-konten')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Halaman - <span class="fw-normal">Penyerahan PSU</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="/dashboard" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ url('perumahan') }}" class="breadcrumb-item">Perumahan</a>
                    <a href="{{ url('perumahan/detail/' . $perumahan->id_perumahan) }}" class="breadcrumb-item">Detail
                        Perumahan</a>
                    <span class="breadcrumb-item active">Penyerahan PSU</span>
                    {{-- <a href="#" class="breadcrumb-item">Data Perumahan</a> --}}
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>
@endsection

@section('konten')
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Penyerahan PSU</h5>
        </div>

        <div class="card-body">
            <div class="mb-3">
                <a href="{{ url('perumahan/detail/' . $perumahan->id_perumahan) }}" class="btn btn-primary"><i
                        class="ph-arrow-left"></i>Kembali</a>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body row">
                        <div class="col-md-6 mb-2">
                            <button href="#" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#modal_form_tambah"><i class="ph-scroll"></i>&nbsp;Serah PSU</button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table datatable-basic table-bordered table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nomor Surat</th>
                                    <th>Tempat & Tanggal Lahir</th>
                                    <th>Nama Pemohon</th>
                                    <th>Dokumen PSU</th>
                                    <th>Upload Dokumen</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $i = 1;
                                @endphp
                                @foreach ($data as $dt)
                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>{{ $dt->no_surat }}</td>
                                        <td>{{ $dt->ttl }}</td>
                                        <td>{{ $dt->nama_pemohon }}</td>
                                        <td>{{ $dt->psu_serah }}</td>
                                        <td>{{ $dt->status_surat }}</td>
                                        <td class="text-center">
                                            <div class="d-inline-flex">
                                                <div class="dropdown">
                                                    <a href="#" class="text-body" data-bs-toggle="dropdown">
                                                        <i class="ph-list"></i>
                                                    </a>

                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <button data-bs-toggle="modal" onclick="edit({{ $dt->id_serah_psu }})"
                                                            class="dropdown-item">
                                                            <i class="ph-note-pencil me-2"></i>
                                                            Edit
                                                        </button>
                                                        <a href="/perumahan/psu/hapus/{{ $dt->id_serah_psu }}"
                                                            class="dropdown-item">
                                                            <i class="ph-trash me-2"></i>
                                                            Hapus
                                                        </a>
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ph-file-pdf me-2"></i>
                                                            Export to .pdf
                                                        </a>
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ph-file-xls me-2"></i>
                                                            Export to .csv
                                                        </a>
                                                        <a href="#" class="dropdown-item">
                                                            <i class="ph-file-doc me-2"></i>
                                                            Export to .doc
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @php
                                        $i++;
                                    @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div id="modal_form_tambah" class="modal fade" tabindex="-2">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Surat Permohonan Penyerahan PSU:</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <form action="{{ url('/perumahan/serahPSU') }}" method="POST" class="form-horizontal"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id_perumahan" value="{{ $perumahan->id_perumahan }}">
                    <div class="modal-body">

                        <div class="row mb-3">
                            <label class="col-form-label col-sm-3">Pilih Input Surat atau Upload Surat</label>
                            <div class="col-sm-9">
                                <div class="form-check form-check-inline form-switch">
                                    Input Surat
                                    <input type="radio" class="form-check-input" id="input_surat" name="status_surat"
                                        value="input" checked>
                                </div>

                                <div class="form-check form-check-inline form-switch">
                                    Upload Surat
                                    <input type="radio" class="form-check-input" id="upload_surat" name="status_surat"
                                        value="upload">
                                </div>
                            </div>
                        </div>

                        <div id="input_fields_add">
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nomor Surat</label>
                                <div class="col-sm-9">
                                    <input type="text" id="no_surat" name="no_surat" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Tempat & Tanggal Surat</label>
                                <div class="col-sm-9">
                                    <input type="text" id="ttl" name="ttl" class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nama Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="nama_pemohon" name="nama_pemohon" class="form-control"
                                        required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Jabatan Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="jabatan_pemohon" name="jabatan_pemohon"
                                        class="form-control" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Alamat Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="alamat_pemohon" name="alamat_pemohon" class="form-control"
                                        required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">No. Telp Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="tel" id="notelp_pemohon" name="notelp_pemohon" class="form-control"
                                        required minlength="10" maxlength="13" min="0">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">PSU yang akan diserahkan</label>
                                <div class="col-sm-9">
                                    <textarea type="text" id="psu_serah" name="psu_serah" class="form-control">
                                </textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy KTP</label>
                                    <input type="file" id="fc_ktp" name="fc_ktp" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy Akta Pendirian Badan Usaha / Badan Hukum</label>
                                    <input type="file" id="fc_akta" name="fc_akta" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy SPT PBB Terakhir</label>
                                    <input type="file" id="fc_spt_pbb" name="fc_spt_pbb" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Siteplan Terakhir</label>
                                    <input type="file" id="siteplan_terakhir" name="siteplan_terakhir" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Tabulasi hasil pengukuran PSU</label>
                                    <input type="file" id="tabulasi_psu" name="tabulasi_psu" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy Sertifikat PSU</label>
                                    <input type="file" id="fc_sertifpsu" name="fc_sertifpsu" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Dokumentasi Kondisi Eksisting<< /label>
                                            <input type="file" id="dokumentasi_eksisting" name="dokumentasi_eksisting"
                                                placeholder="" class="form-control" accept=".pdf">
                                            <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Sertifikat Makam</label>
                                    <input type="file" id="sertif_makam" name="sertif_makam" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-12">
                                    <label class="form-label">Surat Pertanggung jawaban Mutlak Bermaterai</label>
                                    <input type="file" id="surat_tanggungjawab" name="surat_tanggungjawab"
                                        placeholder="" class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>
                        </div>

                        <div id="upload_fields_add">
                            <div class="row mb-3">
                                <div class="col-sm-12">
                                    <label class="form-label">Upload Surat</label>
                                    <input type="file" id="file_upload_surat" name="file_upload_surat" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-12">
                                <label class="form-label">Catatan: <span style="color: red">Berkas yang tidak wajib
                                        diunggah harus dilengkapi ketika verifikasi</span></label>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                            <button type="submit" class="btn btn-primary"><i class="ph-plus"></i>&nbsp;Serah</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modal_form_update" class="modal fade" tabindex="-2">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Surat Permohonan Penyerahan PSU:</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                {{-- <form id="edit-form" method="get" class="form-horizontal" enctype="multipart/form-data"> --}}
                <form action="{{ url('perumahan/serahPSU/update') }}" method="POST" class="form-horizontal" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="id_perumahan" name="id_perumahan">
                    <input type="hidden" id="id_serah_psu" name="id_serah_psu">
                    <div class="modal-body">

                        <div class="row mb-3">
                            <span class="col-sm-3">Pilih Input Surat atau Upload Surat</span>
                            <div class="col-sm-9">
                                <div class="form-check form-check-inline form-switch">
                                    Input Surat
                                    <input type="radio" class="form-check-input" id="input_surat_upd"
                                        name="status_surat" value="input" checked>
                                </div>

                                <div class="form-check form-check-inline form-switch">
                                    Upload Surat
                                    <input type="radio" class="form-check-input" id="upload_surat_upd"
                                        name="status_surat" value="upload">
                                </div>
                            </div>
                        </div>

                        <div id="input_fields_upd">
                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nomor Surat</label>
                                <div class="col-sm-9">
                                    <input type="text" id="no_surat" name="no_surat" class="form-control">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Tempat & Tanggal Surat</label>
                                <div class="col-sm-9">
                                    <input type="text" id="ttl" name="ttl" class="form-control">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Nama Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="nama_pemohon" name="nama_pemohon" class="form-control">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Jabatan Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="jabatan_pemohon" name="jabatan_pemohon"
                                        class="form-control">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">Alamat Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="alamat_pemohon" name="alamat_pemohon"
                                        class="form-control">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">No. Telp Pemohon</label>
                                <div class="col-sm-9">
                                    <input type="text" id="notelp_pemohon" name="notelp_pemohon" class="form-control"
                                        minlength="10" maxlength="13" min="0" max="9">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-form-label col-sm-3">PSU yang akan diserahkan</label>
                                <div class="col-sm-9">
                                    <textarea type="text" id="psu_serah" name="psu_serah" class="form-control">
                                    </textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy KTP</label>
                                    <input type="file" id="fc_ktp" name="fc_ktp" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy Akta Pendirian Badan Usaha / Badan Hukum</label>
                                    <input type="file" id="fc_akta" name="fc_akta" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy SPT PBB Terakhir</label>
                                    <input type="file" id="fc_spt_pbb" name="fc_spt_pbb" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Siteplan Terakhir</label>
                                    <input type="file" id="siteplan_terakhir" name="siteplan_terakhir" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Tabulasi hasil pengukuran PSU</label>
                                    <input type="file" id="tabulasi_psu" name="tabulasi_psu" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Fotocopy Sertifikat PSU</label>
                                    <input type="file" id="fc_sertifpsu" name="fc_sertifpsu" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-6">
                                    <label class="form-label">Dokumentasi Kondisi Eksisting</label>
                                            <input type="file" id="dokumentasi_eksisting" name="dokumentasi_eksisting"
                                                placeholder="" class="form-control" accept=".pdf">
                                            <div class="form-text text-muted">(.pdf)</div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="form-label">Sertifikat Makam</label>
                                    <input type="file" id="sertif_makam" name="sertif_makam" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-sm-12">
                                    <label class="form-label">Surat Pertanggung jawaban Mutlak Bermaterai</label>
                                    <input type="file" id="surat_tanggungjawab" name="surat_tanggungjawab"
                                        placeholder="" class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>
                        </div>

                        <div id="upload_fields_upd">
                            <div class="row mb-3">
                                <div class="col-sm-12">
                                    <label class="form-label">Upload Surat</label>
                                    <input type="file" id="file_upload_surat" name="file_upload_surat" placeholder=""
                                        class="form-control" accept=".pdf">
                                    <div class="form-text text-muted">(.pdf)</div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-sm-12">
                                <label class="form-label">Catatan: <span style="color: red">Berkas yang tidak wajib
                                        diunggah harus dilengkapi ketika verifikasi</span></label>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-bs-dismiss="modal">Tutup</button>
                            <button type="submit" class="btn btn-primary"><i class="ph-plus"></i>&nbsp;Perbarui
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function edit(id) {
            $.get({!! json_encode(url('/')) !!} + "/perumahan/psu/showdata/" + id, function(data) {
                $('#id_serah_psu').val(data.id_serah_psu);
                $('#no_surat').val(data.no_surat);
                $('#ttl').val(data.ttl);
                $('#nama_pemohon').val(data.nama_pemohon);
                $('#jabatan_pemohon').val(data.jabatan_pemohon);
                $('#alamat_pemohon').val(data.alamat_pemohon);
                $('#notelp_pemohon').val(data.notelp_pemohon);
                $('#psu_serah').val(data.psu_serah);
            });
            $('#modal_form_update').modal('show');
        }

        $(document).ready(function() {
            if ($('#input_surat').is(':checked')) {
                $('#input_fields_add').show();
                $('#upload_fields_add').hide();
            } else {
                $('#input_fields_add').hide();
                $('#upload_fields_add').show();
            }

            $('input[name="status_surat"]').change(function() {
                if ($(this).val() === 'input') {
                    $('#input_fields_add').show();
                    $('#upload_fields_add').hide();
                } else {
                    $('#input_fields_add').hide();
                    $('#upload_fields_add').show();
                }
            });

            if ($('#input_surat_upd').is(':checked')) {
                $('#input_fields_upd').show();
                $('#upload_fields_upd').hide();
            } else {
                $('#input_fields_upd').hide();
                $('#upload_fields_upd').show();
            }

            $('input[name="status_surat"]').change(function() {
                if ($(this).val() === 'input') {
                    $('#input_fields_upd').show();
                    $('#upload_fields_upd').hide();
                } else {
                    $('#input_fields_upd').hide();
                    $('#upload_fields_upd').show();
                }
            });
        });

        const goBackLinks = document.querySelectorAll(".go-back-link");

        goBackLinks.forEach(link => {
            link.addEventListener("click", function(event) {
                event.preventDefault();
                window.history.back();
            });
        });
    </script>
@endsection