@extends('layouts.app')

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

    @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

    <h1 class="text-2xl font-bold mb-4">Form Kunjungan</h1>


    <form method="POST" action="{{ route('user.kunjungan.store') }}" autocomplete="off">
    @csrf

    {{-- DATA ANAK --}}
    <div>
        <h3>Data Anak Binaan</h3>

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

        <input type="text" name="nama_anak_binaan"
            placeholder="Nama Anak Binaan"
            class="border p-2 w-full mb-2">
    </div>

    {{-- DATA PENGUNJUNG --}}
    <div>
        <h3>Data Pengunjung</h3>

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

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

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

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

        <select name="jenis_kelamin" class="border p-2 w-full mb-2">
            <option value="">Jenis Kelamin</option>
            <option>Laki-laki</option>
            <option>Perempuan</option>
        </select>

        <select name="hubungan" class="border p-2 w-full mb-2">
            <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>
        <h3>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: Tombol Kembali & Simpan Berdampingan Proporsional --}}
    <div class="flex gap-2 mt-6">
        <a href="{{ route('user.kunjungan.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-5 py-2 rounded text-center font-semibold transition text-sm">
            Kembali
        </a>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded font-semibold transition text-sm">
            Simpan
        </button>
    </div>

    </form>

<script>
    function addPengikut() {
        document.getElementById('pengikut-box').insertAdjacentHTML('beforeend', `
            <div class="border p-2 mt-2">
                <input name="pengikut_nama[]" placeholder="Nama" class="border p-1 w-full mb-1" autocomplete="off">
                <input name="pengikut_no_id[]" placeholder="No ID" class="border p-1 w-full mb-1" autocomplete="off">

                <select name="pengikut_jk[]" class="border p-1 w-full">
                    <option>Laki-laki</option>
                    <option>Perempuan</option>
                </select>
            </div>
        `);
    }
</script>

</div>
@endsection