@extends('layouts.app')

@section('title', 'Daftar - MTs Maulana Malik Ibrahim - Beji')

@section('content')
    <main id="daftar" class="mt-2">
        <section class="relative overflow-hidden w-screen left-1/2 -translate-x-1/2 min-h-[40vh] md:min-h-[55vh] p-0 flex items-center justify-center">
            <img src="{{ asset('img/gedung/gedung2.jpeg') }}" alt="Gedung MTs Maulana Malik Ibrahim" class="absolute inset-0 h-full w-full object-cover">
            <div class="absolute inset-0 bg-black/40"></div>
            <div class="relative z-10 mx-auto w-fit text-center p-6 md:p-8 text-white">
                <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight">Form Pendaftaran Siswa</h1>
                <p class="mt-2 text-sm md:text-base text-white/90">Tanpa aksi/penyimpanan, untuk pengumpulan data awal</p>
            </div>
        </section>

        <section class="mt-10 mx-auto max-w-7xl">
            <div id="card3d-wrap" class="max-w-4xl mx-auto [perspective:1000px] group">
            <form id="formCard" class="relative p-8 bg-white rounded-2xl shadow-2xl ring-1 ring-black/10 grid grid-cols-1 md:grid-cols-2 gap-6 transform-gpu transition-transform duration-150 will-change-transform" style="transform-style: preserve-3d;">
                <h2 class="col-span-2 text-2xl font-bold mb-2">Data Siswa</h2>

                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Nama Lengkap Siswa</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2" required>
                </div>

                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">NISN</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2" required>
                </div>

                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Tempat Lahir</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2" required>
                </div>

                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Tanggal Lahir</label>
                    <input type="date" class="w-full ring-1 ring-black/10 rounded-md p-2" required>
                </div>

                <div class="col-span-2">
                    <label class="block text-sm font-semibold mb-1">Piagam (Opsional, Maksimal 3 awal, bisa tambah)</label>
                    <div id="piagam-container" class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
                        <div>
                            <label class="text-xs text-gray-600">Piagam 1</label>
                            <input type="file" accept="image/*,application/pdf" class="w-full ring-1 ring-black/10 rounded-md p-2">
                            <input type="text" placeholder="Keterangan Piagam 1" class="w-full ring-1 ring-black/10 rounded-md p-2 mt-1">
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">Piagam 2</label>
                            <input type="file" accept="image/*,application/pdf" class="w-full ring-1 ring-black/10 rounded-md p-2">
                            <input type="text" placeholder="Keterangan Piagam 2" class="w-full ring-1 ring-black/10 rounded-md p-2 mt-1">
                        </div>
                        <div>
                            <label class="text-xs text-gray-600">Piagam 3</label>
                            <input type="file" accept="image/*,application/pdf" class="w-full ring-1 ring-black/10 rounded-md p-2">
                            <input type="text" placeholder="Keterangan Piagam 3" class="w-full ring-1 ring-black/10 rounded-md p-2 mt-1">
                        </div>
                    </div>
                    <button id="add-piagam" type="button" class="mt-3 inline-flex rounded-md bg-[#50c878] px-3 py-2 text-white shadow-lg hover:bg-[#45b46b] hover:scale-[1.02] active:scale-[0.98] transition">Tambah Piagam</button>
                </div>

                <div class="col-span-2">
                    <label class="block text-sm font-semibold mb-1">Berkas Tambahan (Opsional, Maksimal 3 File)</label>
                    <input type="file" accept="image/*,application/pdf" class="w-full ring-1 ring-black/10 rounded-md p-2" multiple>
                </div>

                <h2 class="col-span-2 text-2xl font-bold mt-4">Data Orang Tua / Wali</h2>

                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Nama Ayah Kandung</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Pekerjaan Ayah</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Pendidikan Terakhir Ayah</label>
                    <select class="w-full ring-1 ring-black/10 rounded-md p-2">
                        <option>SD</option>
                        <option>SMP</option>
                        <option>SMA/SMK</option>
                        <option>D1/D2/D3</option>
                        <option>S1</option>
                        <option>S2</option>
                        <option>S3</option>
                    </select>
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Nomor HP Ayah</label>
                    <input type="tel" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>

                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Nama Ibu Kandung</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Pekerjaan Ibu</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Pendidikan Terakhir Ibu</label>
                    <select class="w-full ring-1 ring-black/10 rounded-md p-2">
                        <option>SD</option>
                        <option>SMP</option>
                        <option>SMA/SMK</option>
                        <option>D1/D2/D3</option>
                        <option>S1</option>
                        <option>S2</option>
                        <option>S3</option>
                    </select>
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Nomor HP Ibu</label>
                    <input type="tel" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>

                <div class="col-span-2">
                    <label class="block text-sm font-semibold mb-1">Nama Wali (Opsional)</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Hubungan Wali (Opsional)</label>
                    <input type="text" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2 md:col-span-1">
                    <label class="block text-sm font-semibold mb-1">Nomor HP Wali (Opsional)</label>
                    <input type="tel" class="w-full ring-1 ring-black/10 rounded-md p-2">
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-semibold mb-1">Alamat Orang Tua/Wali</label>
                    <textarea class="w-full ring-1 ring-black/10 rounded-md p-2 h-28"></textarea>
                </div>

                <div class="col-span-2 mt-2">
                    <button type="button" class="w-full bg-green-600 text-white py-2 rounded-md font-semibold shadow-xl hover:scale-[1.02] active:scale-[0.98] transition">Kirim Pendaftaran</button>
                </div>
            </form>
            </div>
        </section>
    </main>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('piagam-container');
            const addBtn = document.getElementById('add-piagam');
            let count = 3;

            addBtn.addEventListener('click', () => {
                if (count >= 10) { alert('Maksimal 10 Piagam'); return; }
                count++;
                const div = document.createElement('div');
                div.className = '';
                div.innerHTML = `
                    <label class="text-xs text-gray-600">Piagam ${count}</label>
                    <input type="file" accept="image/*,application/pdf" class="w-full ring-1 ring-black/10 rounded-md p-2">
                    <input type="text" placeholder="Keterangan Piagam ${count}" class="w-full ring-1 ring-black/10 rounded-md p-2 mt-1">
                `;
                container.appendChild(div);
            });

            const wrap = document.getElementById('card3d-wrap');
            const card = document.getElementById('formCard');
            if (wrap && card) {
                wrap.addEventListener('mousemove', (e) => {
                    const rect = wrap.getBoundingClientRect();
                    const x = (e.clientX - rect.left) / rect.width;
                    const y = (e.clientY - rect.top) / rect.height;
                    const rx = (0.5 - y) * 8;
                    const ry = (x - 0.5) * 8;
                    card.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
                });
                wrap.addEventListener('mouseleave', () => {
                    card.style.transform = 'rotateX(0deg) rotateY(0deg)';
                });
            }
        });
    </script>
    @endpush
@endsection