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

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} Sponsorship Category
@endsection

@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 class="">{{ $edit ? 'Edit' : 'Create' }} Sponsorship Category</h4>
                            <a href="{{ route('admin.sponsorship-categories.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

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

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="name">Category Name <x-required/></label>
                                        <input type="text" class="form-control" name="name" id="name"
                                            value="{{ $edit ? $category->name : old('name') }}"
                                            placeholder="Enter Category Name" required 
                                        />
                                    </div>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-sm-12 col-md-6">
                                    <div class="form-group">
                                        <label for="slug">Slug (Leave empty to auto-generate)</label>
                                        <input type="text" class="form-control" name="slug" id="slug"
                                            value="{{ $edit ? $category->slug : old('slug') }}"
                                            placeholder="category-slug" 
                                        />
                                    </div>
                                </div>

                                <div class="col-sm-12 col-md-3">
                                    <div class="form-group">
                                        <label for="order">Display Order <x-required/></label>
                                        <input type="number" class="form-control" name="order" id="order"
                                            value="{{ $edit ? $category->order : old('order', 0) }}"
                                            placeholder="0" required min="0"
                                        />
                                        <small class="form-text text-muted">Lower numbers appear first</small>
                                    </div>
                                </div>

                                <div class="col-sm-12 col-md-3">
                                    <div class="form-group">
                                        <label for="status">Status <x-required/></label>
                                        <select class="form-control" name="status" id="status" required>
                                            <option value="1" {{ (old('status', $edit ? $category->status : 1) == 1) ? 'selected' : '' }}>
                                                Active
                                            </option>
                                            <option value="0" {{ (old('status', $edit ? $category->status : 1) == 0) ? 'selected' : '' }}>
                                                Inactive
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" name="description" id="description" rows="4"
                                            placeholder="Enter category description (optional)">{{ $edit ? $category->description : old('description') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            @if($edit && $category->icon)
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label>Current Icon Preview:</label>
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $category->icon) }}" alt="Category Icon" 
                                                     style="max-width: 150px; max-height: 150px; object-fit: contain; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="row">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> {{ $edit ? 'Update' : 'Create' }} Category
                                    </button>
                                    <a href="{{ route('admin.sponsorship-categories.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times"></i> Cancel
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        /* Summernote Mobile Responsive Styles */
        @media (max-width: 768px) {
            .note-editor .note-toolbar {
                flex-wrap: wrap;
            }
            
            .note-editor .note-toolbar .note-btn-group {
                margin-bottom: 5px;
            }
            
            .note-editor .note-editing-area {
                min-height: 150px;
            }
            
            .note-modal .modal-dialog {
                margin: 10px;
                max-width: calc(100% - 20px);
            }
            
            .note-popover {
                max-width: 250px;
            }
        }
        
        @media (max-width: 576px) {
            .note-editor .note-toolbar {
                padding: 5px;
            }
            
            .note-editor .note-toolbar .note-btn {
                padding: 4px 6px;
                margin: 1px;
            }
        }
    </style>
@endpush

@push('js')
    <x-generic-validation-error-toastr/>
    <!-- Summernote JS -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Summernote for description
            $('#description').summernote({
                height: 300,
                minHeight: 200,
                maxHeight: 600,
                placeholder: 'Enter category description...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'italic', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link']],
                    ['view', ['codeview', 'undo', 'redo']]
                ],
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '64'],
                dialogsInBody: true,
                dialogsFade: true,
                focus: false,
                tabDisable: false,
                styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                callbacks: {
                    onInit: function() {
                        console.log('Summernote initialized for sponsorship category description');
                    }
                }
            });

            // Clean up Summernote on page unload
            $(window).on('beforeunload', function() {
                if ($('#description').length && $('#description').summernote) {
                    $('#description').summernote('destroy');
                }
            });

            // Custom file input label update
            $('.custom-file-input').on('change', function() {
                let fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });

            // Form validation
            $('.edit-add-form').validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 255
                    },
                    slug: {
                        maxlength: 255
                    },
                    order: {
                        required: true,
                        number: true,
                        min: 0
                    },
                    status: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter category name",
                        maxlength: "Category name must not exceed 255 characters"
                    },
                    order: {
                        required: "Please enter display order",
                        number: "Please enter a valid number",
                        min: "Order must be at least 0"
                    },
                    status: {
                        required: "Please select status"
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    // Sync Summernote content before submission
                    if ($('#description').summernote) {
                        $('#description').val($('#description').summernote('code'));
                    }
                    
                    let formData = new FormData(form);

                    $.ajax({
                        url: $(form).attr('action'),
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            let alertType = response.alertType;
                            let alertMessage = response.message;
                            let alerter = toastr[alertType];
                            if (alerter) {
                                alerter(alertMessage);
                                setTimeout(function () {
                                    if (response.redirectTo) {
                                        window.location.href = response.redirectTo;
                                    }
                                }, 1500);
                            } else {
                                toastr.error("toastr alert-type " + alertType + " is unknown");
                            }
                        },
                        error: function(xhr) {
                            var response = xhr.responseJSON;
                            if (response && response.errors) {
                                Object.keys(response.errors).forEach(function (field) {
                                    const errorMessage = response.errors[field].join(", ");
                                    toastr.error(errorMessage, "Validation Error");
                                });
                            }
                        }
                    });
                    return false;
                }
            });

            // Auto-generate slug from name
            // $('#name').on('blur', function() {
            //     let name = $(this).val();
            //     let slug = $('#slug').val();
                
            //     // Only auto-generate if slug is empty
            //     if (!slug && name) {
            //         slug = name.toLowerCase()
            //             .replace(/[^\w\s-]/g, '')
            //             .replace(/\s+/g, '-')
            //             .replace(/--+/g, '-')
            //             .trim();
            //         $('#slug').val(slug);
            //     }
            // });
        });
    </script>
@endpush