@extends('layouts.home.index')
@section('title','Form RHA-2')
@section('content')

@include('report._js.form2')

@push('style')
    <style>
        * {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .btn-primary {
            background-color: #0e5e90 !important;
            border-radius: 8px !important;
        }

        .btn-primary:hover {
            background-color: #218bcd !important;
        }

        .btn-success {
            background-color: #428c6b !important;
            color: #ffffff !important;
            border-radius: 8px !important;
        }

        .form-control {
            padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
        }

        .form-select {
            border-radius: 10px !important;
        }
        
        .btn-success:hover {
            background-color: #4fa47d !important;
        }
        
        .btn-danger {
            border-radius: 8px !important;
            background-color: #dc3546 !important;
        }

        .btn-danger:hover {
            background-color: #fe4154 !important;
        }

        .alert {
            padding: 16px !important;
        }
    </style>
@endpush

    <div class="container">
        <div class="form-title text-center mt-3 pt-3">
            <h4 class="fw-bold">PENILAIAN CEPAT KESEHATAN</h4>
            <h4 class="fw-bold">DALAM BIDANG KESEHATAN LINGKUNGAN</h4>
            <h4 class="fw-bold"><i>(RAPID HEALTH ASSESSMENT)</i></h4>
        </div>

        <div class="mt-3 mb-3">
            <div class="alert alert-warning text-center">
                Pastikan data pelaksana penilaian anda sudah terisi dengan benar. Untuk mengupdate data pelaksana penilaian silahkan klik menu Profil
            </div>
        </div>

        <div class="">
            <div class="">
                <div class="">
                    <h2 class="fs-5 fw-semibold">Data pelaksana penilaian</h2>
                </div>
        
                <div class="row pt-3">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Nama petugas penilai</label>
                            <input type="text" class="form-control" name="name" id="name" required readonly>
                        </div>
                    </div>
        
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="agency" class="form-label">Dinas/Instansi</label>
                            <input type="text" class="form-control" name="agency" id="agency" required readonly>
                        </div>
                    </div>
                </div>
        
                <div class="row pt-1">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="phone" class="form-label">No. Telp/HP</label>
                            <input type="number" class="form-control" name="phone" id="phone" required readonly>
                        </div>
                    </div>
        
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="fax" class="form-label">No. Fax</label>
                            <input type="text" class="form-control" name="fax" id="fax" required readonly>
                        </div>
                    </div>
        
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" id="email" required readonly>
                        </div>
                    </div>
                </div>
        
                <div class="row pt-1">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="date" class="form-label">Tanggal Penilaian</label>
                            <input type="date" class="form-control" name="date" id="date" required>
                        </div>
                    </div>
        
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="time" class="form-label">Jam Penilaian</label>
                            <input type="time" class="form-control" name="time" id="time" required>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="pt-5">
                <div class="">
                    <h2 class="fs-5 fw-semibold">Data Umum</h2>
                </div>
        
                <div class="row pt-3">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="province" class="form-label">Provinsi</label>
                            <input type="text" name="province" id="province" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="district" class="form-label">Kabupaten/Kota</label>
                            <input type="text" name="district" id="district" class="form-control" required>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="subdistrict" class="form-label">Kecamatan</label>
                            <input type="text" name="subdistrict" id="subdistrict" class="form-control" required>
                        </div>
                    </div>
                </div>
        
                <div class="row pt-1">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <small for="village" class="form-label">Desa/Kelurahan</small>
                            <input type="text" class="form-control" id="village" required>
                        </div>
                    </div>
        
                    <div class="col-md-4">
                        <div class="mb-3">
                            <small for="public_health" class="form-label">Puskesmas</small>
                            <input type="text" class="form-control" id="public_health" required>
                        </div>
                    </div>
        
                    <div class="col-md-4">
                        <div class="mb-3">
                            <small for="incident_time" class="form-label">Tanggal Kejadian</small>
                            <input type="date" class="form-control" id="incident_time" required>
                        </div>
                    </div>
                </div>
        
                <div class="row pt-1">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <small for="disaster_area" class="form-label">Perkiraan luas area yang terkena bencana</small>
                            <input type="text" class="form-control" id="disaster_area" required>
                        </div>
                    </div>
        
                    <div class="col-md-4">
                        <div class="mb-3">
                            <small for="disaster_region" class="form-label">Jenis daerah bencana</small>
                            <input type="text" class="form-control" id="disaster_region" required>
                        </div>
                    </div>
        
                    <div class="col-md-4">
                        <div class="mb-3">
                            <small for="easy_access" class="form-label">Kemudahan Akses</small>
                            <input type="text" class="form-control" id="easy_access" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="mb-3">
                            <small for="location" class="form-label">Lokasi</small>
                            <input type="text" class="form-control" id="location" required>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="pt-5">
                <div class="">
                    <h2 class="fs-5 fw-semibold">Jumlah Penduduk & Korban</h2>
                </div>
        
                <div id="villageSectionsContainer">
                    <div class="village-section border p-3 mb-3 new-village-1">
                        <div class="row pt-1">
                            <div class="col">
                                <div class="mb-3">
                                    <small for="village_victim" class="form-label">Nama Desa</small>
                                    <input type="text" class="form-control village-name" id="village_victim" required>
                                </div>
                            </div>
        
                            <div class="col">
                                <div class="mb-3">
                                    <small for="total_family" class="form-label">Jumlah KK</small>
                                    <input type="number" class="form-control village-total-family" id="total_family" required>
                                </div>
                            </div>
                        </div>
        
                        <div id="population-section">
                            <div class="row pt-1 population-row new-population-1">
                                <div class="col-5">
                                    <div class="mb-3">
                                        <small for="age" class="form-label">Usia Penduduk</small>
                                        <select required name="age" class="form-select age-select">
                                            <option value="0≤1">0≤1</option>
                                            <option value="1≤5">1≤5</option>
                                            <option value="11-20">11-20</option>
                                            <option value="21-59">21-59</option>
                                            <option value=">60">>60</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-5">
                                    <div class="mb-3">
                                        <small for="total_population" class="form-label">Jumlah Penduduk</small>
                                        <input type="number" class="form-control total-population" id="total_population" required>
                                    </div>
                                </div>
        
                                <div class="col-2 d-flex align-items-end">
                                    <div class="mb-3 w-100">
                                        <button type="button" id="populationAddBtn" class="btn btn-primary w-100">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
        
                        <div id="victim-section">
                            <div class="row pt-1 victim-row new-victim-1">
                                <div class="col-5">
                                    <div class="mb-3">
                                        <small for="victim_type" class="form-label">Kategori Korban</small>
                                        <select required name="victim_type" class="form-select victim-type-select">
                                            <option value="Luka Ringan">Luka Ringan</option>
                                            <option value="Luka Berat">Luka Berat</option>
                                            <option value="Meninggal">Meninggal</option>
                                            <option value="Hilang">Hilang</option>
                                        </select>
                                    </div>
                                </div>
        
                                <div class="col-5">
                                    <div class="mb-3">
                                        <small for="total_victim" class="form-label">Jumlah Korban</small>
                                        <input type="number" class="form-control total-victim" id="total_victim" required>
                                    </div>
                                </div>
        
                                <div class="col-2 d-flex align-items-end">
                                    <div class="mb-3 w-100">
                                        <button type="button" id="victimAddBtn" class="btn btn-primary w-100">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        
                <div class="row pt-3">
                    <div class="col">
                        <div class="mb-3">
                            <button type="button" id="addVillageBtn" class="btn btn-success w-100">Tambah Desa</button>
                        </div>
                    </div>
                </div>
        
                <div class="row pt-3">
                    <div class="col-6">
                        <div class="mb-3">
                            <button type="button" id="saveBtn" class="btn btn-success w-100">Simpan Data</button>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="mb-3">
                            <button type="button" id="resetBtn" class="btn btn-danger w-100">Reset Data</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection