@extends('layouts.admin-apoteker')

@section('title', 'Tambah Highlight')

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

    <form id="form-create"
          action="{{ route('admin.highlight-sliders.store') }}"
          method="POST"
          enctype="multipart/form-data"
          class="space-y-6">
        @csrf

        {{-- Judul --}}
        <div>
            <label class="block font-semibold">Judul</label>
            <input type="text" name="judul" value="{{ old('judul') }}"
                   class="w-full mt-1 rounded border-gray-300 dark:bg-gray-800 dark:text-white">
        </div>

        {{-- Deskripsi --}}
        <div>
            <label class="block font-semibold">Deskripsi</label>
            <textarea name="deskripsi" rows="3"
                      class="w-full mt-1 rounded border-gray-300 dark:bg-gray-800 dark:text-white">{{ old('deskripsi') }}</textarea>
        </div>

        {{-- Gambar/Video --}}
        <div>
            <label class="block font-semibold mb-2">Media Utama (Gambar atau Video)</label>
            <div class="relative group w-full max-w-sm">
                <div id="media-container"
                     class="rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden h-44 flex items-center justify-center bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-300 text-sm italic">
                    No image/video available

                    {{-- Video Preview --}}
                    <video id="preview-video" class="hidden absolute inset-0 w-full h-full object-cover" autoplay muted loop playsinline></video>

                    {{-- Gambar Preview --}}
                    <img id="preview-gambar" class="hidden absolute inset-0 w-full h-full object-cover" />
                </div>

                <label for="gambar"
                       class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white opacity-0 group-hover:opacity-100 cursor-pointer rounded-lg transition">
                    <i class="fas fa-upload mr-2"></i> Pilih File
                </label>

                <input type="file" name="gambar" id="gambar"
                       accept="image/jpeg,image/png,video/mp4,video/webm,video/ogg"
                       class="hidden"
                       onchange="previewMedia(event)">
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Format: JPG, PNG, MP4, WEBM, OGG. Maks: 10MB.
            </p>
        </div>

        {{-- Ikon --}}
        <div class="mt-6">
            <label class="block font-semibold mb-2">Gambar Ikon (overlay)</label>
            <div class="relative w-full max-w-sm">
                <img id="preview-ikon"
                     src=""
                     class="w-20 h-20 object-contain bg-white rounded-full border border-gray-300 dark:border-gray-600 hidden">
                <input type="file" name="ikon" id="ikon"
                       accept="image/png,image/jpeg,image/svg+xml"
                       class="w-full mt-2 rounded border-gray-300 dark:bg-gray-800 dark:text-white"
                       onchange="previewIkon(event)">
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                PNG transparan disarankan. Maks: 5MB.
            </p>
        </div>

        {{-- Tautan --}}
        <div>
            <label class="block font-semibold">Tautan</label>
            <input type="url" name="tautan" value="{{ old('tautan') }}"
                   class="w-full mt-1 rounded border-gray-300 dark:bg-gray-800 dark:text-white">
        </div>

        {{-- Aktif --}}
        <div>
            <input type="hidden" name="aktif" value="0">
            <label class="inline-flex items-center mt-4">
                <input type="checkbox" name="aktif" value="1"
                       {{ old('aktif') ? 'checked' : '' }}
                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                <span class="ml-2">Tampilkan (Aktif)</span>
            </label>
        </div>

        {{-- Tombol --}}
        <div class="flex justify-between items-center pt-4">
            <a href="{{ route('admin.highlight-sliders.index') }}"
               class="inline-flex items-center px-6 py-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-600 transition">
                Batal
            </a>

            <button type="button"
                    onclick="confirmCreate()"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded shadow hover:scale-105 transition">
                Simpan
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function previewMedia(event) {
        const file = event.target.files[0];
        const imgPreview = document.getElementById('preview-gambar');
        const vidPreview = document.getElementById('preview-video');
        const container = document.getElementById('media-container');

        if (!file) return;

        const allowedTypes = ['image/jpeg', 'image/png', 'video/mp4', 'video/webm', 'video/ogg'];
        if (!allowedTypes.includes(file.type)) {
            Swal.fire('Format tidak valid!', 'Gunakan JPG, PNG, atau Video (MP4, WEBM, OGG).', 'error');
            event.target.value = '';
            return;
        }

        if (file.size > 10 * 1024 * 1024) {
            Swal.fire('Ukuran terlalu besar!', 'Maksimal 10MB.', 'error');
            event.target.value = '';
            return;
        }

        container.classList.remove('justify-center', 'text-sm', 'italic', 'text-gray-500', 'dark:text-gray-300');
        container.innerHTML = ''; // Clear fallback text
        container.appendChild(imgPreview);
        container.appendChild(vidPreview);

        const reader = new FileReader();
        reader.onload = function () {
            if (file.type.startsWith('video')) {
                imgPreview.classList.add('hidden');
                vidPreview.classList.remove('hidden');
                vidPreview.src = reader.result;
                vidPreview.play();
            } else {
                vidPreview.classList.add('hidden');
                imgPreview.classList.remove('hidden');
                imgPreview.src = reader.result;
            }
        };
        reader.readAsDataURL(file);
    }

    function previewIkon(event) {
        const file = event.target.files[0];
        const preview = document.getElementById('preview-ikon');
        if (!file) return;

        if (!['image/png', 'image/jpeg', 'image/svg+xml'].includes(file.type)) {
            Swal.fire('Format ikon tidak valid!', 'Hanya PNG, JPG, atau SVG.', 'error');
            event.target.value = '';
            return;
        }

        if (file.size > 5 * 1024 * 1024) {
            Swal.fire('Ukuran ikon terlalu besar!', 'Maksimal 5MB.', 'error');
            event.target.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = function () {
            preview.src = reader.result;
            preview.classList.remove('hidden');
        };
        reader.readAsDataURL(file);
    }

    function confirmCreate() {
        Swal.fire({
            title: 'Simpan data ini?',
            text: "Highlight akan ditambahkan.",
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, simpan',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#2563eb',
            cancelButtonColor: '#6b7280',
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-create').submit();
            }
        });
    }
</script>
@endpush