@extends('layouts.app')

@section('content')
<div class="max-w-5xl mx-auto px-6 pt-6">

    <h1 class="text-2xl font-bold text-gray-800 mb-4">➕ Tambah Notis Mesyuarat Ahli</h1>

    <form action="{{ route('notis-ahli.store') }}" method="POST"
          class="bg-white p-6 shadow-md rounded-lg border border-gray-100 space-y-6">
        @csrf

        <!-- ============================================= -->
        <!-- SECTION A: MAKLUMAT MESYUARAT -->
        <!-- ============================================= -->

        <h2 class="text-lg font-semibold text-gray-700 border-b pb-2">Maklumat Mesyuarat</h2>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700">Bilangan Mesyuarat</label>
                <input type="text" name="bilangan_mesyuarat"
                       class="w-full border rounded-lg px-3 py-2 mt-1"
                       placeholder="Contoh: 1" required>
            </div>

            <div>
                <label class="block font-medium text-gray-700">Tahun Mesyuarat</label>
                <input type="text" name="tahun_mesyuarat"
                       class="w-full border rounded-lg px-3 py-2 mt-1"
                       placeholder="Contoh: 2025" required>
            </div>
        </div>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700">Tarikh Mesyuarat</label>
                <input type="date" name="mesyuarat_tarikh"
                       class="w-full border rounded-lg px-3 py-2 mt-1" placeholder="dd/mm/yyyy" autocomplete="off"
                       required>
            </div>

            <div>
                <label class="block font-medium text-gray-700">Masa Mesyuarat</label>
                <input type="time" name="mesyuarat_masa"
                       class="w-full border rounded-lg px-3 py-2 mt-1"
                       required>
            </div>
        </div>

        <div>
            <label class="block font-medium text-gray-700">Tempat Mesyuarat</label>
            <input type="text" name="mesyuarat_tempat"
                   class="w-full border rounded-lg px-3 py-2 mt-1"
                   placeholder="Contoh: Bilik Mesyuarat Utama" required>
        </div>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block font-medium text-gray-700">Nama Penandatangan (Setiausaha)</label>
                <input type="text" name="penandatangan_nama"
                       class="w-full border rounded-lg px-3 py-2 mt-1"
                       placeholder="Nama Setiausaha">
            </div>

            <div>
                <label class="block font-medium text-gray-700">Jawatan Penandatangan</label>
                <input type="text" name="penandatangan_jawatan"
                       class="w-full border rounded-lg px-3 py-2 mt-1"
                       value="Setiausaha">
            </div>
        </div>

        <div>
            <label class="block font-medium text-gray-700">Tarikh Notis Dikeluarkan</label>
            <input type="date" name="tarikh_notis"
                   class="w-full border rounded-lg px-3 py-2 mt-1">
        </div>

        <!-- ============================================= -->
        <!-- SECTION B: AGENDA MESYUARAT -->
        <!-- ============================================= -->

        <h2 class="text-lg font-semibold text-gray-700 border-b pb-2">Agenda Mesyuarat</h2>

        <p class="text-gray-500 text-sm mb-2">
            Anda boleh mengubah, memadam atau menambah agenda mengikut keperluan mesyuarat.<br>
            <span class="text-xs text-gray-400">Sistem akan menentukan jenis layout secara automatik.</span>
        </p>

        <div id="agenda-container" class="space-y-3">

            @foreach($templateAgendas as $index => $item)
            <div class="agenda-item flex items-start gap-3 bg-gray-50 border border-gray-200 p-3 rounded-lg">

                <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 pt-2">☰</div>

                <div class="agenda-number pt-2 font-semibold text-gray-600 w-6 text-right">
                    {{ $index + 1 }}.
                </div>

                <input type="text" name="agenda[]" 
                       class="flex-1 border rounded-lg px-3 py-2"
                       value="{{ $item->tajuk }}" required>

                <button type="button"
                        onclick="removeAgendaItem(this)"
                        class="text-red-500 hover:text-red-700 font-bold px-2">
                    ✕
                </button>
            </div>
            @endforeach

        </div>

        <!-- Add new agenda -->
        <button type="button"
                onclick="addAgendaItem()"
                class="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200">
            ➕ Tambah Agenda
        </button>

        <!-- ============================================= -->
        <!-- SUBMIT -->
        <!-- ============================================= -->

        <div class="flex justify-end gap-3 border-t pt-4">
            <a href="{{ route('notis-alk.index') }}"
               class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                ← Kembali
            </a>

            <button type="submit"
                    class="px-6 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
                Simpan Notis
            </button>
        </div>

    </form>
</div>

<!-- SORTABLEJS CDN -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('agenda-container');

    Sortable.create(container, {
        animation: 150,
        handle: '.drag-handle',
        ghostClass: 'bg-indigo-100',
        onSort: function () {
            renumberAgendas();
        }
    });
});

function addAgendaItem() {
    let container = document.getElementById('agenda-container');

    let html = `
        <div class="agenda-item flex items-start gap-3 bg-gray-50 border border-gray-200 p-3 rounded-lg">
            <div class="drag-handle cursor-move text-gray-400 hover:text-gray-600 pt-2">☰</div>
            <div class="agenda-number pt-2 font-semibold text-gray-600 w-6 text-right"></div>
            <input type="text" name="agenda[]" class="flex-1 border rounded-lg px-3 py-2" placeholder="Agenda baharu" required>
            <button type="button" onclick="removeAgendaItem(this)"
                    class="text-red-500 hover:text-red-700 font-bold px-2">✕</button>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', html);
    renumberAgendas();
}

function removeAgendaItem(btn) {
    btn.parentElement.remove();
    renumberAgendas();
}

function renumberAgendas() {
    document.querySelectorAll('.agenda-number').forEach((el, index) => {
        el.textContent = (index + 1) + '.';
    });
}
</script>
@endsection