@extends('admin.layouts.app')

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

@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 Subcategory</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
                subcategory</p>
        </div>

        <form method="POST" action="{{ route('admin.subcategories.store') }}" enctype="multipart/form-data">
            @csrf

            @include('admin.subcategories._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