@extends('layouts.admin-apoteker')

@section('title', 'Edit 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">✏️ Edit Highlight Slider</h1>

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

        {{-- Judul --}}
        <div>
            <label class="block font-semibold">Judul</label>
            <input type="text" name="judul" value="{{ old('judul', $highlight->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', $highlight->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="{{ $highlight->gambar ? asset('storage/' . $highlight->gambar) : 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> Ganti 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: 2MB.
            </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="{{ $highlight->ikon ? asset('storage/' . $highlight->ikon) : '' }}"
                     class="w-20 h-20 object-contain bg-white rounded-full border border-gray-300 dark:border-gray-600 {{ $highlight->ikon ? '' : '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">
                Disarankan PNG transparan. Maks: 1MB.
            </p>
        </div>

        {{-- Tautan --}}
        <div>
            <label class="block font-semibold">Tautan</label>
            <input type="url" name="tautan" value="{{ old('tautan', $highlight->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', $highlight->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="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded shadow hover:scale-105 transition">
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function previewGambar(event) {
        const reader = new FileReader();
        reader.onload = function(){
            const output = document.getElementById('preview-gambar');
            if (output) output.src = reader.result;
        };
        if (event.target.files[0]) reader.readAsDataURL(event.target.files[0]);
    }

    function previewIkon(event) {
        const reader = new FileReader();
        reader.onload = function(){
            const output = document.getElementById('preview-ikon');
            if (output) {
                output.src = reader.result;
                output.classList.remove('hidden');
            }
        };
        if (event.target.files[0]) reader.readAsDataURL(event.target.files[0]);
    }
</script>
@endpush