@extends('layout')

@section('content')
    <div class="dashboard-main-body">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Tambah Pelayanan</h6>
            <ul class="d-flex align-items-center gap-2">
                <li class="fw-medium">
                    <a href="index.html" class="d-flex align-items-center gap-1 hover-text-primary">
                        <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                        Dashboard
                    </a>
                </li>
                <li>-</li>
                <li class="fw-medium">Tambah Pelayanan</li>
            </ul>
        </div>
        <div class="card basic-data-table">
            <div class="card-header">
                <div class="d-flex " style="justify-content: space-between">
                    <div>
                        <h5 class="card-title mb-0">Form Tambah Pelayanan</h5>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data" action="{{ url('tambah_pelayanan') }}">
                    @csrf
                    <div>
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label">Tanggal Kematian</label>
                                <input type="date" class="form-control" id="tgl_transaksi" name="tanggal_transaksi"
                                    required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control" id="nama" name="nama" required>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Umur</label>
                                <input type="number" class="form-control" id="umur" name="umur" required>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">NIK</label>
                                <input type="number" class="form-control" id="nik" name="nik" required>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Jenis Kelamin</label>
                                <select class="form-select" id="jenkel" name="jenis_kelamin" required>
                                    <option value="">-- Pilih --</option>
                                    <option value="Laki-Laki">Laki-laki</option>
                                    <option value="Perempuan">Perempuan</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Hari Kematian</label>
                                <select class="form-select" id="hari_kematian" required name="hari_kematian">
                                    <option value="">-- Pilih Hari --</option>
                                    <option value="Senin">Senin</option>
                                    <option value="Selasa">Selasa</option>
                                    <option value="Rabu">Rabu</option>
                                    <option value="Kamis">Kamis</option>
                                    <option value="Jumat">Jumat</option>
                                    <option value="Sabtu">Sabtu</option>
                                    <option value="Minggu">Minggu</option>
                                </select>

                            </div>


                            <div class="col-md-6">
                                <label class="form-label">Jam Kematian</label>
                                <input type="time" class="form-control" id="jam_kematian" required name="jam_kematian">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Jam Dimandikan</label>
                                <input type="time" class="form-control" id="jam_mandi" required name="jam_mandi">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-control" required id="">
                                    <option value="Draft">Draft</option>
                                    <option value="Dalam Penanganan">Dalam Penanganan</option>
                                    <option value="Selesai">Selesai</option>
                                </select>
                            </div>
                            <link rel="stylesheet"
                                href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
                            <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
                            <div class="col-md-4">
                                <label class="form-label">Anggota</label>
                                <select name="anggota" id="anggota" class="form-control" required style="width: 100%">
                                    <option value="" disabled>Pilih</option>
                                    @foreach ($anggota as $ango)
                                        <option value="{{ $ango->id }}">{{ $ango->nama }}</option>
                                    @endforeach
                                </select>
                            </div>



                            <div class="container mt-3">
                                <h6 class="mb-3">Layanan</h6>

                                <div id="dynamicForm">
                                    <div id="formRows">
                                        <!-- Baris pertama -->
                                        <div class="row g-3 align-items-start mb-3 form-row">
                                            <div class="col-md-5">
                                                <label class="form-label">Layanan</label>
                                                <select name="layanan[]" class="form-control layanan" required>
                                                    <option value="" disabled>Pilih</option>
                                                    @foreach ($layanan as $r)
                                                        <option value="{{ $r->id }}">{{ $r->layanan }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-5">
                                                <label class="form-label">Petugas</label>
                                                <select name="petugas[]" class="form-control layanan" required
                                                    id="">
                                                    <option value="" disabled>Pilih</option>
                                                    @foreach ($petugas as $rs)
                                                        <option value="{{ $rs->id }}">{{ $rs->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-10">
                                                <div>
                                                    <label class="form-label">Keterangan</label>
                                                    <textarea name="keterangan[]" class="form-control" rows="1" required></textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-2 d-flex align-items-end mt-5">
                                                <button type="button" class="btn btn-danger removeRow">Hapus</button>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-primary" id="addRow">Tambah</button>
                                </div>
                            </div>

                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    // Ambil HTML option untuk Layanan dan Petugas dari Blade untuk dipakai ulang
                                    const layananOptions = `
        <option value="" disabled>Pilih</option>
        @foreach ($layanan as $r)
            <option value="{{ $r->id }}">{{ $r->layanan }}</option>
        @endforeach
    `;
                                    const petugasOptions = `
        <option value="" disabled>Pilih</option>
        @foreach ($petugas as $rs)
            <option value="{{ $rs->id }}">{{ $rs->name }}</option>
        @endforeach
    `;


                                    // Tambah row baru
                                    document.getElementById("addRow").addEventListener("click", function() {
                                        let formRows = document.getElementById("formRows");

                                        let newRow = document.createElement("div");
                                        newRow.classList.add("row", "g-3", "align-items-start", "mb-3", "form-row");

                                        newRow.innerHTML = `
        <div class='col-md-10'>
            <div class='row'>
                <div class="col-md-6">
                <label class="form-label">Layanan</label>
                <select name="layanan[]" class="form-control layanan" required>
                    ${layananOptions}
                </select>
            </div>
                <div class="col-md-6">
                <label class="form-label">Petugas</label>
                <select name="petugas[]" class="form-control petugas" required>
                    ${petugasOptions}
                </select>
            </div>
            </div>
            <div class="col-md-12">
                <label class="form-label">Keterangan</label>
                <textarea name="keterangan[]" class="form-control" rows="1" required></textarea>
            </div>
        </div>
        <div class='col-md-2'>
                <div class="col-md-1 d-flex align-items-end mt-5">
                <button type="button" class="btn btn-danger removeRow">Hapus</button>
            </div>
        </div>
        `;

                                        formRows.appendChild(newRow);

                                        // Inisialisasi Choices.js untuk dropdown baru
                                        let newLayananSelect = newRow.querySelector("select.layanan");
                                        new Choices(newLayananSelect, {
                                            searchEnabled: true,
                                            itemSelectText: '',
                                            placeholder: true,
                                            searchPlaceholderValue: 'Cari...'
                                        });

                                        let newPetugasSelect = newRow.querySelector("select.petugas");
                                        new Choices(newPetugasSelect, {
                                            searchEnabled: true,
                                            itemSelectText: '',
                                            placeholder: true,
                                            searchPlaceholderValue: 'Cari...'
                                        });
                                    });

                                    // Event delegation untuk hapus row
                                    document.getElementById("formRows").addEventListener("click", function(e) {
                                        if (e.target && e.target.classList.contains("removeRow")) {
                                            e.target.closest(".form-row").remove();
                                        }
                                    });

                                    // Inisialisasi Choices.js pada select yang ada saat page load
                                    document.querySelectorAll("select.layanan").forEach(function(el) {
                                        new Choices(el, {
                                            searchEnabled: true,
                                            itemSelectText: '',
                                            placeholder: true,
                                            searchPlaceholderValue: 'Cari ...'
                                        });
                                    });

                                    document.querySelectorAll("select.petugas").forEach(function(el) {
                                        new Choices(el, {
                                            searchEnabled: true,
                                            itemSelectText: '',
                                            placeholder: true,
                                            searchPlaceholderValue: 'Cari...'
                                        });
                                    });
                                });
                            </script>

                            <div class="col-12">
                                <label class="form-label">Jumlah Relawan</label>
                                <input type="number" class="form-control" required placeholder="Relawan" name="relawan">
                            </div>

                            <div class="col-12">
                                <label class="form-label">Keterangan Makam</label>
                                <textarea class="form-control" id="ket_makam" rows="2" required name="ket_makam"></textarea>
                            </div>

                            <div class="col-12">
                                <label class="form-label">Alamat Duka</label>
                                <textarea class="form-control" id="alamat_duka" name="alamat" required rows="2"></textarea>
                            </div>

                        </div>
                    </div>
                    <script>
                        new Choices("#anggota", {
                            searchEnabled: true,
                            itemSelectText: '', // hilangkan teks "Press to select"
                            placeholder: true,
                            searchPlaceholderValue: 'Cari anggota...',
                        });
                        document.querySelectorAll("select.layanan").forEach(function(el) {
                            new Choices(el, {
                                searchEnabled: true,
                                itemSelectText: '', // hilangkan teks "Press to select"
                                placeholder: true,
                                searchPlaceholderValue: 'Cari layanan...',
                            });
                        });
                    </script>
                    <div class="mt-3">
                        <a href="{{ url('pelayanan') }}" class="btn btn-secondary">Kembali</a>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection