@extends('layouts.app')

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

@section('content')
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-white">
        <!-- Breadcrumb -->
        <nav class="flex items-center text-[11px] font-medium text-gray-600" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-2">
                <li class="inline-flex items-center">
                    <a href="#" class="text-gray-600 hover:text-gray-900 inline-flex items-center">
                        <svg class="w-3 h-3 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3" />
                        </svg>
                        Product
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                        <a href="#" class="text-gray-600 hover:text-gray-900">Category</a>
                    </div>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                        <span class="text-gray-500">Details</span>
                    </div>
                </li>
            </ol>
        </nav>

        <!-- Back Button -->
        <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>

    <!-- Compact Form -->
    <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-update-form" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" id="brand_id" name="brand_id">

                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Category Name</label>
                        <input type="text" name="name" id="name"
                               class="w-full text-[11px] border border-gray-300 rounded px-2 py-1"
                               placeholder="Enter Category Name">
                    </div>
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Category Code</label>
                        <input type="text" name="description" id="description"
                               class="w-full text-[11px] border border-gray-300 rounded px-2 py-1"
                               placeholder="Enter Code">
                    </div>
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Status</label>
                        <select name="status" id="status"
                                class="w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white">
                            <option value="A">Active</option>
                            <option value="I">Inactive</option>
                        </select>
                    </div>
                </div>

                <!-- Submit -->
                <div class="flex justify-end">
                    <button type="submit"
                            class="text-[11px] font-medium bg-blue-600 text-white px-3 py-1.5 rounded hover:bg-blue-700 transition">
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        const brandId = {{ $id }};

        // Load existing category data
        $(document).ready(function () {
            $.ajax({
                url: `/category/${brandId}`, // Must match your route
                method: 'GET',
                success: function (data) {
                    $('#brand_id').val(data.id);
                    $('#name').val(data.name);
                    $('#description').val(data.description);
                    $('#status').val(data.status ? 'A' : 'I');
                },
                error: function () {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Failed to load category data.',
                    });
                }
            });
        });

        // Submit update via AJAX
        $('#category-update-form').on('submit', function (e) {
            e.preventDefault();

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

            $.ajax({
                url: `/category/${brandId}`,
                method: 'PUT',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Updated!',
                        text: response.message,
                        confirmButtonText: 'OK'
                    }).then(() => {
                        window.location.href = '{{ route('category.index') }}';
                    });
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let formattedErrors = Object.values(errors).map(
                            errArray => `• ${errArray.join('<br>')}`
                        ).join('<br><br>');

                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            html: formattedErrors,
                            confirmButtonText: 'Fix'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.'
                        });
                    }
                }
            });
        });
    </script>
@endpush