@extends('admin.stakeholders.layout')

@section('title', 'Daftar Stakeholder')

@section('content')
<div class="bg-gradient-to-r from-blue-900 to-indigo-900 p-8 rounded-lg shadow-xl max-w-full">
    <div class="text-center mb-8">
        <h2 class="text-white text-3xl font-semibold">Daftar Stakeholder</h2>
        <p class="text-white text-lg mt-2">Gunakan filter berikut untuk mencari data stakeholder</p>
    </div>

    <form action="" method="GET" class="flex flex-wrap gap-6 items-center justify-center max-w-7xl mx-[2rem]">

          <!-- Manual Search Filter -->
    <div class="flex flex-col w-72">
        <label for="manualSearch" class="text-white font-semibold text-lg mb-2">Cari Nama Stakeholder</label>
        <input type="text" name="manualSearch" id="manualSearch"
            class="text-black bg-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-200"
            value="{{ request('manualSearch') }}" onkeyup="this.value = this.value.toUpperCase();">
    </div>

        <!-- Jenis Stakeholder -->
        <div class="flex flex-col w-72">
            <label for="jenisStakeholder" class="text-white font-semibold text-lg mb-2">Jenis Stakeholder</label>
            <select name="jenisStakeholder" id="jenisStakeholder"
                class="text-black bg-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-200">
                <option value="">Semua</option>
                <option value="Government" {{ request('jenisStakeholder') == 'Government' ? 'selected' : '' }}>Government</option>
                <option value="Perusahaan" {{ request('jenisStakeholder') == 'Perusahaan' ? 'selected' : '' }}>Perusahaan</option>
                <option value="SMA/SMK" {{ request('jenisStakeholder') == 'SMA/SMK' ? 'selected' : '' }}>SMA/SMK</option>
                <option value="SLB" {{ request('jenisStakeholder') == 'SLB' ? 'selected' : '' }}>SLB</option>
                <option value="Perguruan Tinggi" {{ request('jenisStakeholder') == 'Perguruan Tinggi' ? 'selected' : '' }}>Perguruan Tinggi</option>
                <option value="Rekanan" {{ request('jenisStakeholder') == 'Rekanan' ? 'selected' : '' }}>Rekanan</option>
                <option value="P3MI" {{ request('jenisStakeholder') == 'P3MI' ? 'selected' : '' }}>P3MI</option>
                <option value="LPPRT" {{ request('jenisStakeholder') == 'LPPRT' ? 'selected' : '' }}>LPPRT</option>
                <option value="LPTKS" {{ request('jenisStakeholder') == 'LPTKS' ? 'selected' : '' }}>LPTKS</option>
                <option value="Peladi Makarti" {{ request('jenisStakeholder') == 'Peladi Makarti' ? 'selected' : '' }}>Peladi Makarti</option>
                <option value="Lainnya" {{ request('jenisStakeholder') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
            </select>
        </div>

        <!-- Tipe Instansi -->
        <div id="pendidikanFields" class="flex flex-col w-72 {{ request('jenisStakeholder') == 'SMA/SMK' || request('jenisStakeholder') == 'SLB' || request('jenisStakeholder') == 'Perguruan Tinggi' ? '' : 'hidden' }}">
            <label for="tipeInstansi" class="text-white font-semibold text-lg mb-2">Tipe Instansi</label>
            <select name="tipeInstansi" id="tipeInstansi"
                class="text-black bg-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-200">
                <option value="">Semua</option>
                <option value="Negeri" {{ request('tipeInstansi') == 'Negeri' ? 'selected' : '' }}>Negeri</option>
                <option value="Swasta" {{ request('tipeInstansi') == 'Swasta' ? 'selected' : '' }}>Swasta</option>
            </select>
        </div>

        <!-- Status BKK -->
        <div id="statusBKKFields" class="flex flex-col w-72 {{ request('jenisStakeholder') == 'SMA/SMK' || request('jenisStakeholder') == 'SLB' || request('jenisStakeholder') == 'Perguruan Tinggi' ? '' : 'hidden' }}">
            <label for="statusBKK" class="text-white font-semibold text-lg mb-2">Status BKK</label>
            <select name="statusBKK" id="statusBKK"
                class="text-black bg-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-200">
                <option value="">Semua</option>
                <option value="Terdaftar" {{ request('statusBKK') == 'Terdaftar' ? 'selected' : '' }}>Terdaftar</option>
                <option value="Belum Terdaftar" {{ request('statusBKK') == 'Belum Terdaftar' ? 'selected' : '' }}>Belum Terdaftar</option>
            </select>
        </div>

        <!-- Kelurahan -->
        <div class="flex flex-col w-72">
            <label for="kelurahan" class="text-white font-semibold text-lg mb-2">Kelurahan</label>
            <select name="kelurahan" id="kelurahan"
                class="text-black bg-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-200">
                <option value="">Semua</option>
                @foreach ($kelurahans as $kelurahan)
                    <option value="{{ $kelurahan->kelurahan }}" {{ request('kelurahan') == $kelurahan->kelurahan ? 'selected' : '' }}>{{ $kelurahan->kelurahan }}</option>
                @endforeach
            </select>
        </div>

        <!-- Kabupaten -->
        <div class="flex flex-col w-72">
            <label for="kabupaten" class="text-white font-semibold text-lg mb-2">Kabupaten</label>
            <select name="kabupaten" id="kabupaten"
                class="text-black bg-white rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-200">
                <option value="">Semua</option>
                @foreach ($kabupatens as $kabupaten)
                    <option value="{{ $kabupaten->kabupaten }}" {{ request('kabupaten') == $kabupaten->kabupaten ? 'selected' : '' }}>{{ $kabupaten->kabupaten }}</option>
                @endforeach
            </select>
        </div>

        <!-- Tombol Cari -->
    <div class="flex flex-col mt-[2.3em] items-end w-full sm:w-auto">
        <button type="submit"
            class="bg-blue-500 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-600 focus:outline-none focus:ring-4 w-full sm:w-auto">
            Cari
        </button>
    </div>

    </form>
</div>

<!-- HASIL PENCARIAN -->
<div class="flex gap-6 px-6 py-8 mx-[5rem]">
    <!-- Kolom Kiri: Daftar Stakeholder -->
    <div class="w-1/2 space-y-4">
        @foreach ($stakeholders as $stakeholder)
        <div onclick="loadDetail({{ $stakeholder->id }})"
            class="bg-white rounded-lg p-6 border border-gray-300 hover:border-blue-800 cursor-pointer transition">
            <h3 class="text-lg font-semibold text-gray-800">
                {{ $stakeholder->nama_stakeholder }}
                @if(Str::contains(strtolower($stakeholder->jenis_stakeholder), 'sma') || Str::contains(strtolower($stakeholder->jenis_stakeholder), 'smk'))
                    @if($stakeholder->status_bkk === 'Terdaftar')
                        <span class="ml-2 px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">Terdaftar</span>
                    @else
                        <span class="ml-2 px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full">Belum Terdaftar</span>
                    @endif
                @endif
            </h3>
            <p class="text-sm text-gray-600 mt-2">{{ $stakeholder->jenis_stakeholder }}</p>
            <p class="text-sm text-gray-600">{{ $stakeholder->kelurahan }}, {{ $stakeholder->kabupaten }}</p>
            <div class="mt-4 flex justify-between items-center">
            <span class="text-blue-900 hover:underline font-medium cursor-pointer" onclick="loadDetail({{ $stakeholder->id }})">Lihat Detail</span>
            </div>
        </div>
        @endforeach
    </div>

  <!-- Kolom Kanan: Detail Stakeholder -->
<div id="detail-container" class="w-3/4 bg-white rounded-lg p-6 border border-gray-200 shadow ">
    <p class="text-gray-500 italic">Klik salah satu stakeholder untuk melihat detail...</p>
</div>




<script>
    const jenisSelect = document.getElementById("jenisStakeholder");
    const pendidikanFields = document.getElementById("pendidikanFields");
    const statusBKKFields = document.getElementById("statusBKKFields");

    jenisSelect.addEventListener("change", () => {
        const selectedValue = jenisSelect.value;

        if (["SMA/SMK", "SLB", "Perguruan Tinggi"].includes(selectedValue)) {
            pendidikanFields.classList.remove("hidden");
            statusBKKFields.classList.remove("hidden");
        } else {
            pendidikanFields.classList.add("hidden");
            statusBKKFields.classList.add("hidden");
        }
    });

    document.addEventListener("DOMContentLoaded", () => {
        jenisSelect.dispatchEvent(new Event("change"));
    });

    
 function loadDetail(id) {
        fetch(`/stakeholders/${id}`)
            .then(response => response.json())
            .then(data => {
                const detailContainer = document.getElementById('detail-container');

                let contactPersonsHtml = '';
                if (data.contact_persons.length) {
                    contactPersonsHtml = `<div class="mt-10 border-t pt-6">
                        <h3 class="text-xl font-bold text-blue-900 mb-4">Contact Person</h3>`;
                    data.contact_persons.forEach((contact, index) => {
                        contactPersonsHtml += `
                            <div class="bg-blue-50 rounded-lg p-4 mb-4 shadow-sm">
                                <p class="font-semibold text-blue-900 mb-2">Contact Person ${index + 1}</p>
                                <div class="grid md:grid-cols-2 gap-4 text-sm text-gray-800">
                                    <div class="flex items-start gap-2">
                                        <i class="fas fa-user-circle text-blue-900 mt-1"></i>
                                        <div><span class="font-semibold">Nama:</span> ${contact.nama_contact_person}</div>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i class="fas fa-briefcase text-blue-900 mt-1"></i>
                                        <div><span class="font-semibold">Jabatan:</span> ${contact.jabatan_contact_person}</div>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i class="fab fa-whatsapp text-blue-900 mt-1"></i>
                                        <div><span class="font-semibold">WhatsApp:</span> ${contact.telp_wa_contact_person}</div>
                                    </div>
                                    <div class="flex items-start gap-2">
                                        <i class="fas fa-phone-alt text-blue-900 mt-1"></i>
                                        <div><span class="font-semibold">Telepon:</span> ${contact.telpon_contact_person}</div>
                                    </div>
                                </div>
                            </div>`;
                    });
                    contactPersonsHtml += `</div>`;
                }

                detailContainer.innerHTML = `
                    <h2 class="text-3xl font-bold text-blue-900 mb-8 text-center">Detail Stakeholder</h2>
                    <div class="space-y-5 text-gray-700">
                        <div class="flex items-start gap-3">
                            <i class="fas fa-user text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Nama Stakeholder:</span> ${data.nama_stakeholder}</div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-briefcase text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Jenis Stakeholder:</span> ${data.jenis_stakeholder}</div>
                        </div>
                        ${data.jenis_stakeholder === 'Rekanan' ? `
                        <div class="flex items-start gap-3">
                            <i class="fas fa-clipboard-list text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Jenis Rekanan:</span> ${data.jenis_rekanan}</div>
                        </div>` : ''}
                        ${['SMA/SMK', 'SLB', 'Perguruan Tinggi'].includes(data.jenis_stakeholder) ? `
                        <div class="flex items-start gap-3">
                            <i class="fas fa-school text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Tipe Instansi:</span> ${data.tipe_instansi}</div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-check-circle text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Status BKK:</span> ${data.status_bkk}</div>
                        </div>` : ''}
                        <div class="flex items-start gap-3">
                            <i class="fas fa-envelope text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Email:</span> ${data.email}</div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-phone-alt text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Telepon Kantor:</span> ${data.telpon_kantor}</div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-map-marker-alt text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Alamat:</span> ${data.alamat}</div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-city text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Kelurahan:</span> ${data.kelurahan}</div>
                        </div>
                        <div class="flex items-start gap-3">
                            <i class="fas fa-building text-blue-900 text-xl mt-1"></i>
                            <div><span class="font-semibold">Kecamatan:</span> ${data.kecamatan}</div>
                        </div>
                    </div>
                    ${contactPersonsHtml}
                `;
            })
            .catch(error => {
                console.error("Gagal memuat detail:", error);
            });
    }

</script>
@endsection