@extends('layouts.app')

@section('content')
<div class="p-6 max-w-3xl mx-auto">

    {{-- ERROR --}}
    @if($errors->any())
        <div class="bg-red-100 text-red-700 p-3 mb-3 rounded">
            <ul>
                @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- TITLE --}}
    <h1 class="text-2xl font-bold mb-4 text-[#1c1d56]">
        Form Kunjungan Staff
    </h1>

    <form method="POST"
        action="{{ route('staff.kunjungan.store') }}">

        @csrf

        {{-- DATA ANAK --}}
        <div class="mb-6">

            <h3 class="font-semibold text-lg mb-3 text-[#1c1d56]">
                Data Anak Binaan
            </h3>

            {{-- TANGGAL --}}
            <input type="date"
                name="tanggal_kunjungan"
                class="border p-2 w-full mb-2 rounded">

            {{-- DROPDOWN ANAK --}}
            <select name="nama_anak_binaan"
                class="border p-2 w-full mb-2 rounded"
                onchange="toggleManualAnak(this.value)">

                <option value="">
                    -- Pilih Anak Binaan --
                </option>

                @foreach($anak as $a)

                    <option value="{{ $a->nama }}">
                        {{ $a->nama }}
                    </option>

                @endforeach

                <option value="manual">
                    + Input Manual
                </option>

            </select>

            {{-- INPUT MANUAL --}}
            <div id="manual-anak-box" style="display:none;">

                <input type="text"
                    name="nama_anak_manual"
                    placeholder="Nama Anak Binaan Manual"
                    class="border p-2 w-full mb-2 rounded">

            </div>

        </div>

        {{-- DATA PENGUNJUNG --}}
        <div class="mb-6">

            <h3 class="font-semibold text-lg mb-3 text-[#1c1d56]">
                Data Pengunjung
            </h3>

            <input type="text"
                name="nama_pengunjung"
                placeholder="Nama Pengunjung"
                class="border p-2 w-full mb-2 rounded">

            <input type="text"
                name="no_id_pengunjung"
                placeholder="No ID"
                class="border p-2 w-full mb-2 rounded">

            <input type="text"
                name="alamat_pengunjung"
                placeholder="Alamat"
                class="border p-2 w-full mb-2 rounded">

            <input type="text"
                name="no_telp"
                placeholder="No HP"
                class="border p-2 w-full mb-2 rounded">

            <select name="jenis_kelamin"
                class="border p-2 w-full mb-2 rounded">

                <option value="">
                    Jenis Kelamin
                </option>

                <option>
                    Laki-laki
                </option>

                <option>
                    Perempuan
                </option>

            </select>

            <select name="hubungan"
                class="border p-2 w-full mb-2 rounded">

                <option value="">
                    -- Pilih Hubungan --
                </option>

                <option>Ayah</option>
                <option>Ibu</option>
                <option>Kakak</option>
                <option>Adik</option>
                <option>Saudara</option>
                <option>Teman</option>
                <option>Lain-lain</option>

            </select>

        </div>

        {{-- PENGIKUT --}}
        <div class="mb-6">

            <h3 class="font-semibold text-lg mb-3 text-[#1c1d56]">
                Pengikut
            </h3>

            <button type="button"
                onclick="addPengikut()"
                class="bg-white text-[#1c1d56] border border-[#1c1d56] px-3 py-1.5 rounded-md text-xs font-semibold shadow-sm hover:bg-[#1c1d56] hover:text-white transition">

                + Tambah Pengikut

            </button>

            <div id="pengikut-box"></div>

        </div>

        {{-- ACTION BUTTONS (Disatukan dalam flexbox agar sejajar) --}}
        <div class="flex items-center gap-2 mt-8">
            <a href="{{ route('staff.kunjungan.index') }}" 
               class="bg-gray-500 hover:bg-gray-600 text-white px-5 py-2 rounded-lg transition text-sm font-semibold">
                Kembali
            </a>
            
            <button type="submit" class="bg-[#1c1d56] hover:opacity-90 text-white px-5 py-2 rounded-lg transition text-sm font-semibold">
                Simpan
            </button>
        </div>

    </form>

    {{-- SCRIPT --}}
    <script>

    function addPengikut() {

        document.getElementById('pengikut-box')
        .insertAdjacentHTML('beforeend', `

            <div class="border p-3 mt-2 rounded bg-gray-50">

                <input name="pengikut_nama[]"
                    placeholder="Nama"
                    class="border p-2 w-full mb-2 rounded">

                <input name="pengikut_no_id[]"
                    placeholder="No ID"
                    class="border p-2 w-full mb-2 rounded">

                <select name="pengikut_jk[]"
                    class="border p-2 w-full rounded">

                    <option>Laki-laki</option>
                    <option>Perempuan</option>

                </select>

            </div>

        `);
    }

    function toggleManualAnak(value) {

        const box = document.getElementById('manual-anak-box');

        if (value === 'manual') {
            box.style.display = 'block';
        } else {
            box.style.display = 'none';
        }
    }

    </script>

</div>
@endsection