@extends('layouts.admin')

@section('title', 'Tambah Kategori Produk')

@section('content')
<div class="max-w-xl mx-auto bg-white dark:bg-gray-900 p-6 rounded-xl shadow space-y-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">➕ Tambah Kategori Produk</h1>

    <form id="form-create" action="{{ route('admin.category.store') }}" method="POST" class="space-y-4">
        @csrf

        {{-- Nama --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">Nama Kategori</label>
            <input type="text" name="name" id="name" value="{{ old('name') }}"
                   class="w-full mt-1 px-4 py-2 rounded border-gray-300 dark:bg-gray-800 dark:text-white focus:ring focus:ring-blue-500"
                   required oninput="generateSlug()">
        </div>

        {{-- Slug --}}
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200">Slug</label>
            <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                   class="w-full mt-1 px-4 py-2 rounded border-gray-300 dark:bg-gray-800 dark:text-white focus:ring focus:ring-blue-500"
                   readonly>
        </div>

        {{-- Tombol --}}
        <div class="flex justify-between items-center pt-4">
            <a href="{{ route('admin.category.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 generateSlug() {
        const name = document.getElementById('name').value;
        const slug = name
            .toLowerCase()
            .trim()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-');
        document.getElementById('slug').value = slug;
    }

    function confirmCreate() {
        Swal.fire({
            title: 'Simpan kategori?',
            text: "Kategori baru 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