@extends('layouts.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 Produk</h1>

    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: @json(session('success')),
                    timer: 3000,
                    showConfirmButton: false
                });
            });
        </script>
    @endif

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

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

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

        {{-- 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>

        {{-- Harga dan Stok --}}
        <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>

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

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

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

        {{-- Gambar Utama --}}
        <x-input.label text="Gambar Utama" />
        @if ($catalog->image_path)
            <div class="mb-2">
                <img src="{{ asset('storage/' . $catalog->image_path) }}" alt="Gambar Produk" class="w-32 rounded shadow">
            </div>
        @endif
        <x-input.file name="image_path" accept="image/*" />

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

@push('scripts')
{{-- Slugify --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const nameInput = document.getElementById('name');
        const slugInput = document.getElementById('slug');

        if (nameInput && slugInput) {
            nameInput.addEventListener('input', function () {
                const slug = this.value
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9 -]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-');
                slugInput.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