@extends('layouts.admin-apoteker')

@section('title', 'Tambah 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">➕ Tambah Katalog Baru</h1>

    {{-- SweetAlert on success --}}
    @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('admin.catalog.store') }}" enctype="multipart/form-data" class="space-y-6">
        @csrf

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

        <x-input.label text="Slug (Otomatis)" />
        <x-input.text name="slug" id="slug" :value="old('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') ?? 'Tulis penjelasan menarik dan informatif tentang produk ini. Sertakan manfaat utama, bahan atau teknologi yang digunakan, serta keunggulan dibandingkan produk sejenis. Pastikan deskripsi mampu menjawab pertanyaan umum pelanggan dan mendorong mereka untuk membeli.' }}
        </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')" required />
            </div>
            <div>
                <x-input.label text="Stok" />
                <x-input.text name="stock" type="number" :value="old('stock')" required />
            </div>
        </div>

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

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

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

        {{-- Gambar Utama --}}
        <x-input.label text="Gambar Utama" />
        <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">
                💾 Simpan
            </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 for Deskripsi --}}
<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