@extends('admin.layouts.app')

@section('title', 'Create Category')
@section('page-title', 'Create Category')

@section('content')
<div class="bg-white dark:bg-gray-950 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 md:p-8">
    <div class="mb-4 md:mb-6 pb-4 border-b border-gray-200 dark:border-gray-800">
        <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">Create New Category</h3>
        <p class="text-gray-500 dark:text-gray-400 text-xs md:text-sm mt-1">Fill in the details below to create a new category</p>
    </div>
    
    <form method="POST" action="{{ route('admin.categories.store') }}" enctype="multipart/form-data">
        @csrf

        @include('admin.categories._form')
    </form>
</div>

<script>
function previewImage(input, previewId) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById(previewId).src = e.target.result;
            document.getElementById('image_preview_container').classList.remove('hidden');
            document.getElementById('image_url').value = '';
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function previewImageUrl(input, previewId) {
    if (input.value) {
        document.getElementById(previewId).src = input.value;
        document.getElementById('image_preview_container').classList.remove('hidden');
        document.getElementById('image_upload').value = '';
    }
}

function clearImagePreview(previewId, uploadId) {
    document.getElementById(previewId).src = '';
    document.getElementById('image_preview_container').classList.add('hidden');
    document.getElementById(uploadId).value = '';
    document.getElementById('image_url').value = '';
}
</script>
@endsection