<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Activity - Disnaker Pontianak</title>

    <!-- Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- ICON -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>

<body class="bg-[#F5F7FB] text-slate-700">

<!-- NAVBAR -->
<div class="bg-white px-10 py-4 flex justify-between items-center shadow-sm">

    <h1 class="font-bold text-[#0D215C] tracking-wide">
        DISNAKER PONTIANAK
    </h1>

    <div class="flex items-center gap-6 text-sm text-slate-500">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <a href="#">Activity Reports</a>
        <a href="#" class="text-[#0D215C] font-semibold">Input Activity</a>
        <a href="#">Settings</a>

        <!-- ICON 3D STYLE -->
        <div class="flex items-center gap-3 ml-4">

            <!-- NOTIF -->
            <div class="bg-white p-2 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition cursor-pointer">
                <i data-lucide="bell" class="w-5 h-5 text-[#0D215C]"></i>
            </div>

            <!-- USER -->
            <div class="bg-white p-2 rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition cursor-pointer">
                <i data-lucide="user" class="w-5 h-5 text-[#0D215C]"></i>
            </div>

        </div>
    </div>
</div>

<!-- CONTENT -->
<div class="max-w-6xl mx-auto mt-10 px-4">

    <div class="mb-6">
        <h2 class="text-2xl font-bold text-[#0D215C]">
            Input Laporan Kegiatan
        </h2>
        <p class="text-sm text-slate-400 mt-2 max-w-xl">
            Silakan lengkapi formulir di bawah ini untuk melaporkan aktivitas lapangan Anda.
            Pastikan data yang dimasukkan akurat sesuai dengan pelaksanaan tugas.
        </p>
    </div>

    <div class="grid grid-cols-3 gap-6">

        <!-- FORM -->
        <div class="col-span-2 bg-white p-6 rounded-xl shadow-sm border">

            <div class="mb-4">
                <label class="text-sm font-semibold text-[#0D215C]">Nama Kegiatan</label>
                <input type="text" placeholder="Contoh: Monitoring Kepatuhan Perusahaan"
                       class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]">
            </div>

            <div class="grid grid-cols-2 gap-4 mb-4">

                <div>
                    <label class="text-sm font-semibold text-[#0D215C]">Tanggal Pelaksanaan</label>
                    <input type="date"
                           class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]">
                </div>

                <div>
                    <label class="text-sm font-semibold text-[#0D215C]">Lokasi</label>
                    <input type="text" placeholder="Kec. Pontianak Selatan"
                           class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]">
                </div>

            </div>

            <div>
                <label class="text-sm font-semibold text-[#0D215C]">Deskripsi Kegiatan</label>
                <textarea rows="5"
                          placeholder="Uraikan detail jalannya kegiatan..."
                          class="w-full mt-2 p-3 bg-[#F5F7FB] rounded-lg outline-none focus:ring-2 focus:ring-[#0D215C]"></textarea>
            </div>

        </div>

        <!-- RIGHT PANEL -->
        <div class="space-y-6">

            <!-- Upload -->
            <div class="bg-white p-6 rounded-xl shadow-sm border">

                <h4 class="font-semibold text-[#0D215C] mb-4">
                    Unggah Dokumen
                </h4>

                <div id="drop-area"
                     onclick="document.getElementById('fileInput').click()"
                     class="border-2 border-dashed rounded-xl p-6 text-center text-slate-400 hover:border-[#0D215C] hover:bg-[#F0F4FF] transition cursor-pointer">

                    <p class="text-sm">Klik untuk upload atau drag file ke sini</p>

                    <button type="button"
                            class="mt-3 bg-[#0D215C] hover:bg-blue-900 transition text-white px-4 py-2 rounded-lg shadow">
                        Browse Files
                    </button>

                    <input type="file" id="fileInput" multiple class="hidden">
                </div>

                <div id="fileList" class="mt-4 space-y-2 text-sm"></div>

            </div>

            <!-- Panduan -->
            <div class="bg-[#0D215C] text-white p-5 rounded-xl">
                <h4 class="font-semibold mb-3">Panduan Input</h4>
                <ul class="text-sm space-y-1 opacity-90">
                    <li>- Gunakan bahasa formal</li>
                    <li>- Lampirkan minimal 1 foto</li>
                    <li>- Data harus valid</li>
                </ul>
            </div>

            <button class="w-full bg-[#0D215C] hover:bg-blue-900 transition text-white py-3 rounded-xl font-semibold shadow-lg hover:scale-[1.02]">
                Kirim Laporan 
            </button>

            <p class="text-center text-sm text-slate-400">
                Simpan Sebagai Draft
            </p>

            <a href="{{ route('dashboard') }}" class="block text-center text-sm text-blue-600 mt-2">
                ← Kembali ke Dashboard
            </a>

        </div>

    </div>

</div>

<!-- SCRIPT -->
<script>
    lucide.createIcons();

    const fileInput = document.getElementById('fileInput');
    const fileList = document.getElementById('fileList');

    fileInput.addEventListener('change', function () {
        fileList.innerHTML = "";

        Array.from(this.files).forEach((file, index) => {
            const item = document.createElement('div');
            item.className = "flex justify-between items-center bg-[#F5F7FB] p-3 rounded-lg hover:shadow transition";

            item.innerHTML = `
                <div class="flex items-center gap-2">
                    📄 <span>${file.name}</span>
                </div>
                <button onclick="removeFile(${index})" class="text-red-500 hover:text-red-700 font-bold text-lg">
                    ×
                </button>
            `;

            fileList.appendChild(item);
        });
    });

    function removeFile(index) {
        const dt = new DataTransfer();

        Array.from(fileInput.files).forEach((file, i) => {
            if (i !== index) dt.items.add(file);
        });

        fileInput.files = dt.files;
        fileInput.dispatchEvent(new Event('change'));
    }
</script>

</body>
</html>