@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        #peta {
            height: 400px;
            margin-bottom: 20px;
        }

        #polygon-button {
            z-index: 1000;
            left: 10px;
            bottom: 10px;
        }
    </style>
@endpush

@section('content')
    <div class="container">
        <h1>Tambah Data</h1>
        <form action="{{ route('peil-banjir.update', $data->id) }}" method="POST" enctype="multipart/form-data" id="mainForm">
            @csrf
            @method('PUT')
            <input type="hidden" name="peilbanjir_isian" id="peilbanjir_isian">
            <input type="hidden" name="koordinat" id="koordinat">
            <h3>Data Pemohon</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="nama_pemohon">Nama Pemohon</label>
                        <input type="text" name="nama_pemohon" class="form-control" value="{{ $data->nama_pemohon }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="pekerjaan">Pekerjaan</label>
                        <input type="text" name="pekerjaan" class="form-control" value="{{ $data->pekerjaan }}">
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="jabatan">Jabatan</label>
                        <input type="text" name="jabatan" class="form-control" value="{{ $data->jabatan }}">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="alamat">Alamat</label>
                        <input type="text" name="alamat" class="form-control" value="{{ $data->alamat }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="rencana_pembangunan">Rencana Pembangunan</label>
                        <input type="text" name="rencana_pembangunan" class="form-control"
                            value="{{ $data->rencana_pembangunan }}">
                    </div>
                </div>
            </div>
            <h3>Rencana Kegiatan</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="jalan">Jalan</label>
                        <input type="text" name="jalan" class="form-control" value="{{ $data->jalan }}">
                    </div>
                    <div class="form-group mb-3">
                        <label for="luas">Luas</label>
                        <input type="text" name="luas" class="form-control" value="{{ $data->luas }}">
                    </div>
                </div>
            </div>
            <h3>File Dokumen</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <label for="file_ktp">File KTP</label>
                        <input type="file" name="file_ktp" class="form-control">
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_krk">File KRK</label>
                        <input type="file" name="file_krk" class="form-control">
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_foto">File Foto Lokasi Berkoordinat</label>
                        <input type="file" name="file_foto" class="form-control">
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_siteplan">File Siteplan</label>
                        <input type="file" name="file_siteplan" class="form-control">
                    </div>
                    <div class="form-group mb-3">
                        <label for="file_kepemilikan">File Kepemilikan Tanah</label>
                        <input type="file" name="file_kepemilikan" class="form-control">
                    </div>
                </div>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Isian Pola Ruang
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="isian_pola_ruang" id="isian_pola_ruang" class="form-control" rows="3">{{ $data->isian_pola_ruang ?? '1.	Sesuai dengan yang tertuang pada Dokuemen KRK yang telah di terbitkan Nomor: 600.3.2.1/1416-TR/DPUPRP, tanggal 31 Oktober 2024 yang mengacu pada Perbup Nomor 09 Tahun 2023 Tentang RDTR Wilayah Perencanaan Perkotaan  Gambut-Kertak hanyar Tahun 2023-2043 lokasi yang dimohonka berada pada Zona Perumahan (R) 7.550,21 M² dan Perlindungan Setempat (PS) 67,22 M².' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kontur Tanah
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kontur_tanah" id="kontur_tanah" class="form-control" rows="3">{{ $data->kontur_tanah ?? 'Hasil analisis kontur tanah cenderung datar dengan sedikit penurun mengarah pada bagian belakang persil tanah yang dimohonkan dan kembali naik atau  ada cekungan pada bagian belakang persil tanah yang dimohonkan.(Sumber: BIG (DEMNAS) dan Google Earth)' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Kawasan daerah irigasi
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="kawasan_daerah_irigasi" id="kawasan_daerah_irigasi" class="form-control" rows="3">{{ $data->kawasan_daerah_irigasi ?? 'Kawasan Daerah Irigasi (DI) /Daerah Irigasi Rawa (DIR):	Termasuk dalam delineasi DIR Banua Anyar di Kecamatan Gambut.(sumber : Bidang Sumber Daya Air, Dinas Pekerjaan Umum, Penataan Ruang dan Pertanahan Kabupaten Banjar yang mengacu pada  Permen PUPR Nomor 14 tahun 2015 tentang Kriteria Dan Penetapan Status Daerah Irigasi).' }}</textarea>
            </div>

            <div class="form-group mb-3">
                <label for="informasi_pengurugan" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    Informasi peil banjir
                </label>
            </div>
            <div class="d-flex align-items-center mb-3">
                <textarea name="informasi_peilbanjir" id="informasi_peilbanjir" class="form-control" rows="3">{{ $data->informasi_peilbanjir ?? 'Hasil analisis peninjauan lapangan pada tanggal 25 Oktober 2024, tetuang pada Berita Acara Peninjauan Lokasi IPB Nomor : 01/X-BAIPB-TR/DPUPRP/2024, tanggal 25 Oktober 2024.didukung dengan hasil analiasi data tersebut diatas, dapat kami informasikan sebagai berikut :' }}</textarea>
            </div>
            
            <div class="form-group mb-3">
                <label for="informasi_peilbanjir" class="fw-bold text-primary mb-2" style="font-size: 1.1rem;">
                    <i class="fas fa-info-circle me-2"></i>
                    List Informasi Peil Banjir
                </label>
            </div>

            <table id="tabel-isian" class="table table-bordered">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Isian</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="tabel-isian-body">
                    @foreach ($isian_peilbanjir as $isian)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                @php
                                    $peilbanjirIsian = $peilbanjir_isian->where('isian', $isian->isian)->first();
                                @endphp
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="peilbanjir_isian[]" value="{{ $isian->isian }}" 
                                        {{ $peilbanjirIsian ? 'checked' : '' }}>
                                    <label class="form-check-label">
                                        {{ $isian->isian }}
                                    </label>
                                </div>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm hapus-isian-peilbanjir">Hapus</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="form-group mb-3">
                <label for="catatan">Catatan</label>
                <textarea name="catatan" id="catatan" class="form-control" rows="3"
                    @if ($data->id_status == 2) readonly @endif>{{ $data->catatan }}</textarea>
            </div>
            <button type="button" id="kirim-catatan" class="btn btn-success mb-3">Kirim Catatan ke
                Pomohon</button>
            <div class="form-group mb-3">
                <label for="peilbanjir_ditandatangani">Peil Banjir ditandatangani</label>
                <input type="file" name="peilbanjir_ditandatangani" class="form-control"
                    value="{{ $data->peilbanjir_ditandatangani }}" @if ($data->id_status == 2) readonly @endif>
            </div>
                
                <div class="form-group mb-3">
                    <label for="id_status">Status</label>
                    <select id="id_status" name="id_status" class="form-control"
                        @if ($data->id_status == 5) readonly @endif>
                        @foreach ($status as $s)
                        <option value="{{ $s->id }}" {{ $data->id_status == $s->id ? 'selected' : '' }}>
                            {{ $s->status }}
                        </option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
@endsection



@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
<script>
        $('#tambah-isian-baru').on('click', function() {
            let data = $('#isian_baru_peilbanjir').val();
            let total_isian = parseInt($('#total_isian_peilbanjir').val());
            total_isian++;
            $('#total_isian_peilbanjir').val(total_isian);
            $('#isian_baru_peilbanjir').val('');

            $('#tabel-isian-body').append(`
                <tr>
                    <td>${total_isian}</td>
                    <td><textarea name="peilbanjir_isian[]" class="form-control" rows="3">${data}</textarea></td>
                    <td><button type="button" class="btn btn-danger btn-sm hapus-isian-peilbanjir">Hapus</button></td>
                </tr>
            `);
        });
        $ $(document).on('click', '.hapus-isian', function() {
            // Hapus baris
            $(this).closest('tr').remove();
            
            // Update penomoran
            $('#tabel-isian-body tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });
            
            // Update total isian
            let total_isian = parseInt($('#total_isian_peilbanjir').val());
            total_isian--;
            $('#total_isian_peilbanjir').val(total_isian);
        });
        $('#kirim-catatan').on('click', function() {
            $.ajax({
                url: "{{ route('data.kirim-catatan', $data->id) }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    catatan: $('#catatan').val()
                }
            });
        });
    </script>

    <div class="container">
        <!-- Form yang sudah ada -->
        <form>
            <!-- Input fields yang sudah ada -->
        </form>
    </div>
    
    <!-- Tombol WhatsApp Mengambang -->
    <a href="https://wa.me/6281358721520" class="float" target="_blank">
        <i class="fab fa-whatsapp my-float"></i>
    </a>
    
    <style>
        .float {
            position: fixed !important;
            width: 60px !important;
            height: 60px !important;
            bottom: 40px !important;
            right: 40px !important;
            background-color: #25d366 !important;
            color: #FFF !important;
            border-radius: 50% !important;
            text-align: center !important;
            font-size: 30px !important;
            box-shadow: 2px 2px 3px #999 !important;
            z-index: 99999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
        }
    
        .my-float {
            margin: 0 !important;
        }
    
        .float:hover {
            background-color: #20ba5a !important;
            transform: scale(1.1) !important;
        }
    </style>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@endpush