@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 Utama --}}
        <div>
            <label class="block font-semibold mb-2">Gambar Utama</label>
            <div class="relative group w-full max-w-sm">
                <img id="preview-gambar"
                     src="{{ asset('no-image.png') }}"
                     class="w-full h-44 object-cover rounded-lg border border-gray-300 dark:border-gray-700">
                <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 Gambar
                </label>
                <input type="file" name="gambar" id="gambar"
                       accept="image/jpeg,image/png"
                       class="hidden"
                       onchange="previewGambar(event)">
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                Format: JPG, PNG. Maks: 5MB.
            </p>
        </div>

        {{-- Gambar 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 previewGambar(event) {
        const file = event.target.files[0];
        if (file && !['image/jpeg', 'image/png'].includes(file.type)) {
            Swal.fire('Format tidak valid!', 'Hanya JPG dan PNG yang diperbolehkan.', 'error');
            event.target.value = '';
            return;
        }
        if (file.size > 5 * 1024 * 1024) {
            Swal.fire('Ukuran terlalu besar!', 'Maksimal 5MB.', 'error');
            event.target.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = function(){
            const output = document.getElementById('preview-gambar');
            if (output) output.src = reader.result;
        };
        reader.readAsDataURL(file);
    }

    function previewIkon(event) {
        const file = event.target.files[0];
        if (file && !['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(){
            const output = document.getElementById('preview-ikon');
            if (output) {
                output.src = reader.result;
                output.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