@extends('layouts.app')

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

@section('content')
    <!-- Page Header -->
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-white">
        <h1 class="text-sm font-semibold text-gray-800">Create Category</h1>
        <a href="{{ route('category.index') }}"
           class="inline-flex items-center text-[11px] font-medium text-gray-700 hover:text-gray-900 border border-gray-300 px-2 py-1 rounded-md bg-gray-50 hover:bg-gray-100 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            Back
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-lg shadow-sm mt-3">
        <div class="px-4 py-2 border-b border-gray-200">
            <h2 class="text-xs font-semibold text-gray-800">Category Create</h2>
        </div>

        <div class="p-4">
            <form id="category-form" method="POST" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <!-- Category Name -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Category Name</label>
                        <input type="text" name="name" id="name"
                               class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Enter Category Name">
                    </div>

                    <!-- Description -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Category Code</label>
                        <input type="text" name="description" id="description"
                               class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                               placeholder="Enter Code">
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Status</label>
                        <select name="status" id="status"
                                class="form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white">
                            <option value="A">Active</option>
                            <option value="I">Inactive</option>
                        </select>
                    </div>
                </div>

                <!-- Submit -->
                <div class="flex justify-end pt-2">
                    <button type="submit"
                            class="text-[11px] font-medium bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 transition">
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $('#category-form').on('submit', function (e) {
            e.preventDefault();

            // Clear previous errors
            clearErrors();

            let formData = {
                name: $('#name').val(),
                description: $('#description').val(),
                status: $('#status').val(),
                _token: '{{ csrf_token() }}'
            };

            $.ajax({
                url: '{{ route('category.store') }}',
                method: 'POST',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message,
                        confirmButtonColor: '#3085d6',
                    }).then(() => {
                        $('#category-form')[0].reset();
                        window.location.href = '{{ route('category.index') }}';
                    });
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        showErrors(xhr.responseJSON.errors);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'An unexpected error occurred.',
                        });
                    }
                }
            });
        });

        function showErrors(errors) {
            $.each(errors, function (key, messages) {
                let input = $('[name="' + key + '"]');
                if (input.length) {
                    input.addClass('border-red-500');

                    // Append error below input
                    const errorElement = $('<span></span>')
                        .addClass('text-red-500 text-[10px] mt-1 block invalid-feedback')
                        .text(messages[0]);

                    input.after(errorElement);
                }
            });
        }

        function clearErrors() {
            $('.border-red-500').removeClass('border-red-500');
            $('.invalid-feedback').remove();
        }

        $(document).on('input change', '.border-red-500', function () {
            $(this).removeClass('border-red-500');
            $(this).next('.invalid-feedback').remove();
        });
    </script>
@endpush