@extends('layouts.admin-apoteker')
@section('title', 'Tambah Dokumen')

@section('content')
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl p-6 shadow space-y-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📥 Tambah Dokumen Baru</h1>

    <form action="{{ route('admin.library.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
        @csrf

        {{-- Nama Dokumen --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nama Dokumen</label>
            <input type="text" name="name"
                   class="mt-1 block w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                   required>
        </div>

        {{-- Deskripsi --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Deskripsi</label>
            <textarea name="description"
                      rows="4"
                      class="mt-1 block w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white shadow-sm focus:ring-primary focus:border-primary sm:text-sm"></textarea>
        </div>

        {{-- Tipe File --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tipe Dokumen</label>
            <select name="file_type"
                    class="mt-1 block w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:text-white shadow-sm focus:ring-primary focus:border-primary sm:text-sm">
                @foreach(['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'] as $ext)
                    <option value="{{ $ext }}">{{ strtoupper($ext) }}</option>
                @endforeach
            </select>
        </div>

        {{-- Upload File --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Upload File</label>
            <input type="file" name="file" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
                   class="mt-1 block w-full text-sm text-gray-900 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-300 dark:border-gray-600 cursor-pointer focus:outline-none"
                   required>
            <p class="text-sm text-gray-500 mt-1">Hanya file dokumen (PDF, Word, Excel, PPT) maksimal 10 MB.</p>
        </div>

        {{-- Tombol --}}
        <div class="pt-4">
            <button type="submit"
                    class="w-full bg-[color:var(--primary-color)] text-white py-2 rounded-lg font-semibold hover:brightness-110 transition">
                🚀 Simpan Dokumen
            </button>
        </div>
        <div class="pt-2 text-center">
            <a href="{{ route('admin.library.index') }}"
               class="inline-block text-sm text-gray-500 dark:text-gray-300 hover:underline hover:text-[color:var(--primary-color)] transition">
                ← Kembali ke Daftar Dokumen
            </a>
        </div>

    </form>
    @push('scripts')
<script>
    document.querySelector('input[name="file"]').addEventListener('change', function (e) {
        const file = e.target.files[0];
        const allowedExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];
        const maxSize = 10 * 1024 * 1024; // 10 MB

        if (file) {
            const fileExt = file.name.split('.').pop().toLowerCase();
            if (!allowedExtensions.includes(fileExt)) {
                alert('Tipe file tidak didukung. Hanya PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX.');
                e.target.value = '';
                return;
            }

            if (file.size > maxSize) {
                alert('Ukuran file maksimal 10MB.');
                e.target.value = '';
            }
        }
    });
</script>
@endpush

</div>
@endsection