@php
    $edit = !empty($category->id);
@endphp
@extends('layouts.admin.master')

@section('title', $edit ? 'Edit Blog Category' : 'Create Blog Category')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4>{{ $edit ? 'Edit' : 'Create' }} Blog Category</h4>
                            <a href="{{ route('admin.blog-categories.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

                        <form action="{{ $edit ? route('admin.blog-categories.update', $category->id) : route('admin.blog-categories.store') }}"
                              method="POST" class="edit-add-form">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="name" class="block text-sm font-medium text-gray-700">Name <span class="text-red-500">*</span></label>
                                    <input type="text" name="name" id="name" value="{{ $edit ? $category->name : old('name') }}"
                                           class="mt-1 block w-100 px-4 py-2 text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-0 focus:border-green-400"
                                           placeholder="Enter category name" required>
                                </div>
                                <div class="col-md-3">
                                    <label for="order" class="block text-sm font-medium text-gray-700">Order</label>
                                    <input type="number" name="order" id="order" value="{{ $edit ? $category->order : old('order') }}"
                                           class="mt-1 block w-100 px-4 py-2 text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-0 focus:border-green-400"
                                           placeholder="Enter order" min="0">
                                </div>

                                <div class="col-md-4">
                                    <label for="is_active" class="block text-sm font-medium text-gray-700">Status <span class="text-red-500">*</span></label>
                                    <select name="is_active" id="is_active" class="mt-1 block w-100 px-4 py-2 text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-0 focus:border-green-400" required>
                                        <option value="1" {{ (!$edit && old('is_active', '1') == '1') || ($edit && $category->is_active == 1) ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ (!$edit && old('is_active') == '0') || ($edit && $category->is_active == 0) ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>

                            </div>


                            <div class="mt-3">
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
    <script>
        toastr.options = {
            closeButton: true,
            progressBar: true,
            positionClass: 'toast-top-right',
            timeOut: 5000
        };

        $(document).ready(function () {
            $('.edit-add-form').validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 191
                    },
                    order: {
                        required: false,
                        number: true,
                        min: 0
                    },
                    is_active: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "Name is required",
                        maxlength: "Name cannot exceed 191 characters"
                    },
                    order: {
                        number: "Order must be a number",
                        min: "Order cannot be negative"
                    },
                    is_active: {
                        required: "Status is required"
                    }
                },
                highlight: function(element) {
                    $(element).addClass('border-red-500').removeClass('border-gray-300');
                },
                unhighlight: function(element) {
                    $(element).removeClass('border-red-500').addClass('border-gray-300');
                },
                errorElement: 'p',
                errorClass: 'mt-1 text-sm text-red-500',
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                submitHandler: function(form) {
                    let submitBtn = $(form).find('button[type="submit"]');
                    submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');

                    $.ajax({
                        url: form.action,
                        method: form.method,
                        data: $(form).serialize(),
                        success: function(response) {
                            toastr.success(response.message || 'Successfully saved');
                            setTimeout(() => {
                                window.location.href = "{{ route('admin.blog-categories.index') }}";
                            }, 1000);
                        },
                        error: function(xhr) {
                            console.log('AJAX error:', xhr.responseJSON); // Debug log
                            let errorMessage = xhr.responseJSON?.message || 'An error occurred.';
                            if (xhr.responseJSON?.errors) {
                                Object.values(xhr.responseJSON.errors).forEach(function(messages) {
                                    messages.forEach(function(message) {
                                        toastr.error(message);
                                    });
                                });
                            } else {
                                toastr.error(errorMessage);
                            }
                            submitBtn.prop('disabled', false).html('<i class="fa fa-save"></i> {{ $edit ? "Update" : "Create" }}');
                        }
                    });
                }
            });
        });
    </script>
@endpush