@extends('layouts.admin-apoteker')

@section('title', 'Edit Katalog')

@section('content')
<div class="max-w-3xl mx-auto py-10">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">✏️ Edit Katalog</h1>

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

        <x-input.label text="Nama Produk" />
        <x-input.text name="name" :value="old('name', $catalog->name)" id="name" required />

        <x-input.label text="Slug (Otomatis)" />
        <x-input.text name="slug" :value="old('slug', $catalog->slug)" id="slug" required />

        {{-- TinyMCE for Deskripsi --}}
        <x-input.label text="Deskripsi" />
        <textarea id="description" name="description" class="form-textarea w-full dark:bg-gray-700 dark:text-white">
{{ old('description', $catalog->description) }}
        </textarea>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <x-input.label text="Harga" />
                <x-input.text name="price" type="number" step="0.01" :value="old('price', $catalog->price)" required />
            </div>
            <div>
                <x-input.label text="Stok" />
                <x-input.text name="stock" type="number" :value="old('stock', $catalog->stock)" required />
            </div>
        </div>

        <x-input.label text="Urutan (Sort Order)" />
        <x-input.text name="sort_order" type="number" :value="old('sort_order', $catalog->sort_order)" />

        <x-input.label text="Kategori" />
        <x-input.select name="category_id" :options="$categories" :selected="old('category_id', $catalog->category_id)" required />

        <x-input.checkbox name="is_active" label="Aktifkan" :checked="old('is_active', $catalog->is_active)" />

        <x-input.label text="Gambar Baru (Opsional)" />
        <x-input.file name="image_path" accept="image/*" />
        @if($catalog->image_path && file_exists(public_path('storage/' . $catalog->image_path)))
            <img src="{{ asset('storage/' . $catalog->image_path) }}" alt="Gambar" class="w-32 mt-2 rounded shadow">
        @else
            <div class="text-sm text-gray-500 dark:text-gray-400 mt-2">Belum ada gambar.</div>
        @endif

        <div class="pt-6">
            <button type="submit" class="px-6 py-2 bg-[color:var(--primary-color)] text-white rounded-lg hover:brightness-110">
                💾 Update
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
{{-- Slug Otomatis --}}
<script>
    document.getElementById('name').addEventListener('input', function () {
        const slug = this.value
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9 -]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-');
        document.getElementById('slug').value = slug;
    });
</script>

{{-- TinyMCE --}}
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#description',
        height: 300,
        plugins: 'lists link image media table code',
        toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | link image media | code',
        menubar: false,
        branding: false,
        content_style: 'body { font-family: Inter, sans-serif; font-size: 14px; }'
    });
</script>
@endpush