@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">
                @if (session()->get('error'))
                    <div class="alert alert-danger">
                        <p>{{ session()->get('error') }}</p>
                    </div>
                @endif

                <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">Tanggal Pemandian</label>
                                <input type="date" class="form-control" id="tgl_mandi" required name="tgl_mandi">
                            </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-6">
                                <label class="form-label">Jam Dimandikan</label>
                                <input type="time" class="form-control" id="jam_mandi" required name="jam_mandi">
                            </div>

                            
                            {{-- <style>
                                .results {
                                    background: #fff;
                                    border: 1px solid #e5e7eb;
                                    border-radius: 8px;
                                    overflow: hidden
                                }

                                .empty {
                                    padding: 10px;
                                }

                                .masss {
                                    cursor: pointer;
                                }

                                .note {
                                    font-size: 13px;
                                    color: #6b7280;
                                    margin-bottom: 8px
                                }

                                .results {
                                    background: #fff;
                                    border: 1px solid #e5e7eb;
                                    border-radius: 8px;
                                    overflow: hidden
                                }

                                .item {
                                    padding: 10px 12px;
                                    border-bottom: 1px solid #f1f5f9;
                                    cursor: pointer
                                }

                                .item:last-child {
                                    border-bottom: 0
                                }

                                .item:hover {
                                    background: #f1f5f9
                                }

                                .meta {
                                    font-size: 13px;
                                    color: #6b7280;
                                    margin-top: 6px
                                }

                                .coords {
                                    font-weight: 600
                                }

                                .empty {
                                    padding: 12px;
                                    color: #6b7280
                                }
                            </style>
                            <div class="col-12">
                                <label class="form-label">Titik Lokasi Maps </label>
                                <div class="search-box">
                                    <div class="row">
                                        <div class="col-md-11">
                                            <input id="q" type="search" class="form-control" name="maps"
                                                placeholder="Cari alamat, contoh: Jl. Sudirman Jakarta"
                                                autocomplete="off" />
                                        </div>
                                        <div class="col-md-1">
                                            <button id="btnSearch" type="button" class="btn btn-primary">Search</button>
                                        </div>
                                    </div>
                                    <small id="status" class="note"></small>
                                    <div class="results" id="results" aria-live="polite">
                                        <div class="empty"><small>Belum ada pencarian.</small></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Latitude</label>
                                <input type="text" class="form-control" id="lat" readonly placeholder="Latitude"
                                    name="lat">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Longitude </label>
                                <input type="text" class="form-control" id="lng" readonly name="lng"
                                    placeholder="Longitude">
                            </div> --}}

                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-control" required id="">
                                    <option value="Dalam Penanganan">Dalam Penanganan</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-6">
                                <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="errorMessage"></div>

                                <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 ">
                                                    <option value="">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 petugas"
                                                    id="">
                                                    <option value="">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.querySelector('form').addEventListener('submit', function(e) {
                                    e.preventDefault(); // tahan submit dulu

                                    // ambil semua select
                                    const layananSelects = document.querySelectorAll('select.layanan');
                                    const petugasSelects = document.querySelectorAll('select.petugas');

                                    let valid = true;
                                    let errorMessage = '';

                                    // cek semua layanan
                                    layananSelects.forEach((select, index) => {
                                        if (!select.value) {
                                            valid = false;
                                            errorMessage = `Layanan pada baris ke-${index + 1} wajib dipilih.`;
                                        }
                                    });

                                    // cek semua petugas
                                    petugasSelects.forEach((select, index) => {
                                        if (!select.value) {
                                            valid = false;
                                            errorMessage = `Petugas pada baris ke-${index + 1} wajib dipilih.`;
                                        }
                                    });

                                    // tampilkan alert jika tidak valid
                                    let alertBox = document.querySelector('.alert-danger');
                                    if (!valid) {
                                        if (!alertBox) {
                                            alertBox = document.createElement('div');
                                            alertBox.classList.add('alert', 'alert-danger', 'mt-3');
                                            document.querySelector('#errorMessage').insertAdjacentElement('afterbegin', alertBox);
                                        }
                                        alertBox.textContent = errorMessage;
                                        return; // hentikan submit
                                    } else {
                                        if (alertBox) alertBox.remove(); // hapus alert kalau sudah valid
                                    }

                                    // kalau semua valid baru submit
                                    this.submit();
                                });
                            </script>

                            <script>
                                document.addEventListener('change', function(e) {
                                    if (e.target.classList.contains('layanan')) {
                                        const allSelects = document.querySelectorAll('select.layanan');
                                        const selectedValues = [];

                                        allSelects.forEach(select => {
                                            if (select.value) selectedValues.push(select.value);
                                        });

                                        // hitung jumlah kemunculan setiap value
                                        const duplicates = selectedValues.filter((val, idx, arr) => arr.indexOf(val) !== idx);

                                        if (duplicates.includes(e.target.value)) {
                                            // tampilkan alert custom
                                            let alertBox = document.querySelector('.alert-danger');
                                            if (!alertBox) {
                                                alertBox = document.createElement('div');
                                                alertBox.classList.add('alert', 'alert-danger', 'mt-3');
                                                alertBox.textContent = 'Layanan ini sudah dipilih, silakan pilih layanan lain!';
                                                document.querySelector('#errorMessage').insertAdjacentElement('afterbegin', alertBox);
                                            } else {
                                                alertBox.textContent = 'Layanan ini sudah dipilih, silakan pilih layanan lain!';
                                            }

                                            // kosongkan pilihan (paksa reset meskipun pakai Choices.js)
                                            e.target.value = '';
                                            if (e.target.choices) {
                                                e.target.choices.clearStore();
                                            } else {
                                                const event = new Event('change');
                                                e.target.dispatchEvent(event);
                                            }

                                            // jika pakai Choices.js, reset juga placeholder-nya
                                            if (e.target.choicesInstance) {
                                                e.target.choicesInstance.removeActiveItems();
                                                e.target.choicesInstance.setChoiceByValue('');
                                            }
                                        } else {
                                            // hapus alert kalau semua valid
                                            const alertBox = document.querySelector('.alert-danger');
                                            if (alertBox) alertBox.remove();
                                        }
                                    }
                                });
                            </script>

                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    const formRows = document.getElementById('formRows');
                                    const errorMessage = document.getElementById('errorMessage');

                                    // Fungsi menampilkan pesan error bootstrap
                                    function showError(message) {
                                        errorMessage.innerHTML = `
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                ${message}
            </div>
        `;
                                    }

                                    // Jalankan validasi ketika pilih petugas
                                    formRows.addEventListener('change', function(e) {
                                        if (e.target && e.target.matches('select[name="petugas[]"]')) {
                                            const allPetugas = document.querySelectorAll('select[name="petugas[]"]');
                                            const selectedValues = [];

                                            for (let select of allPetugas) {
                                                const val = select.value;
                                                if (val) {
                                                    if (selectedValues.includes(val)) {
                                                        showError('Petugas Tidak Boleh Sama!');

                                                        // Kosongkan select yang duplikat (support Choices.js)
                                                        if (select.choices) {
                                                            select.choices.removeActiveItems();
                                                            // pastikan tampil placeholder “Pilih”
                                                        } else {
                                                            select.value = '';
                                                        }

                                                        return;

                                                        return;
                                                    }
                                                    selectedValues.push(val);
                                                }
                                            }

                                            // Hapus alert kalau semua valid
                                            errorMessage.innerHTML = '';
                                        }
                                    });
                                });
                            </script>

                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    // Ambil HTML option untuk Layanan dan Petugas dari Blade untuk dipakai ulang
                                    const layananOptions = `
        <option value="" >Pilih</option>
        @foreach ($layanan as $r)
            <option value="{{ $r->id }}">{{ $r->layanan }}</option>
        @endforeach
    `;
                                    const petugasOptions = `
        <option value="" >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" >
                    ${layananOptions}
                </select>
            </div>
                <div class="col-md-6">
                <label class="form-label">Petugas</label>
                <select name="petugas[]" class="form-control petugas" >
                    ${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">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>


    {{-- <script>
        // CONFIG: sesuaikan base URL api jika perlu
        const API_BASE = "{{ url('search-location') }}"; // change if your API path berbeda

        const qInput = document.getElementById('q');
        const btn = document.getElementById('btnSearch');
        const resultsEl = document.getElementById('results');
        const statusEl = document.getElementById('status');

        let debounceTimer = null;
        let lastQuery = '';
        let map = null;
        let marker = null;

        function setStatus(txt, isError = false) {
            statusEl.textContent = txt;
            statusEl.style.color = isError ? '#b91c1c' : '#374151';
        }

        function clearResults() {
            resultsEl.innerHTML = '<div class="empty">Belum ada pencarian.</div>';
        }

        function renderResults(items) {
            if (!items || items.length === 0) {
                resultsEl.innerHTML = '<div class="empty">Tidak ditemukan hasil.</div>';
                return;
            }

            resultsEl.innerHTML = '';
            items.forEach(it => {
                const div = document.createElement('div');
                div.className = 'item';
                div.innerHTML = `
                <div class="masss">
                    <div class="title">${escapeHtml(it.name)}</div>
          <div class="meta">Lat: <span class="coords">${it.lat}</span> , Lng: <span class="coords">${it.lng}</span></div>
                    </div>
          
        `;
                div.addEventListener('click', () => {
                    onSelectResult(it);
                });
                resultsEl.appendChild(div);
            });
        }

        function escapeHtml(s) {
            if (!s) return '';
            return s.replace(/[&<>"']/g, (m) => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            } [m]));
        }

        async function search(q) {
            if (!q || q.trim().length === 0) {
                setStatus('Masukkan kata kunci pencarian.', true);
                clearResults();
                return;
            }
            if (q === lastQuery) return;
            lastQuery = q;

            setStatus('Mencari...');
            try {
                const url = API_BASE + '?text=' + encodeURIComponent(q);
                const res = await fetch(url, {
                    headers: {
                        Accept: 'application/json'
                    }
                });

                if (!res.ok) {
                    const txt = await res.text();
                    setStatus('Error: ' + res.status + ' — ' + txt, true);
                    return;
                }

                const json = await res.json();
                // expect structure: {status:'success', results:[{name,lat,lng}, ...]}
                const items = json.results || (json.data && json.data.features ? json.data.features.map(f => ({
                    name: (f.properties && (f.properties.formatted || f.properties.name)) || f
                        .properties.formatted || '—',
                    lat: f.properties.lat || (f.geometry && f.geometry.coordinates ? f.geometry
                        .coordinates[1] : null),
                    lng: f.properties.lon || (f.geometry && f.geometry.coordinates ? f.geometry
                        .coordinates[0] : null)
                })) : []);

                renderResults(items);
                setStatus('Menampilkan ' + items.length + ' hasil.');
            } catch (err) {
                console.error(err);
                setStatus('Gagal mencari: ' + err.message, true);
            }
        }

        function onSelectResult(item) {
            qInput.value = item.name;
            setStatus('Dipilih: ' + item.name);
            // optionally show location on map
            document.getElementById('lat').value = item.lat;
            document.getElementById('lng').value = item.lng;
            showOnMap(item.lat, item.lng, item.name);
        }

        // Debounce helper
        qInput.addEventListener('input', () => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                const v = qInput.value.trim();
                if (v.length >= 2) search(v);
            }, 400);
        });

        btn.addEventListener('click', () => {
            search(qInput.value.trim());
        });

        qInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                search(qInput.value.trim());
            }
        });

        // Optional: Leaflet map initialization and show marker

        function showOnMap(lat, lng, label) {
            if (!lat || !lng) return;
            // if leaflet present initialize if needed
            if (typeof L !== 'undefined') {
                const ll = [parseFloat(lat), parseFloat(lng)];
                if (!marker) {
                    marker = L.marker(ll).addTo(map).bindPopup(label || '').openPopup();
                } else {
                    marker.setLatLng(ll).setPopupContent(label || '').openPopup();
                }
                map.setView(ll, 15);
            } else {
                // if no map, show coords in status
                setStatus(`Koordinat: ${lat}, ${lng}`);
            }
        }

        // initial
        clearResults();
        setStatus('Siap. Ketik minimal 2 karakter untuk mencari.');
    </script> --}}
@endsection