@extends('layouts.admin.master')

@php
    $id = request()->route('blog');
    $edit = !empty($id);
    $title = $edit ? 'Edit Blog' : 'Add Blog';
@endphp

@section('title')
    {{ $title }}
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        .dashboard-custom-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .preview-thumbnail-img {
            max-width: 200px;
            border-radius: 6px;
            margin-top: 10px;
        }
        .add-image-btn {
            color: #15803d;
            border: 1px solid #15803d;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            transition: background-color 0.3s, color 0.3s;
        }
        .add-image-btn:hover {
            background-color: #15803d;
            color: white;
        }
        .attachment-card {
            padding: 0.5rem;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            background: #f9fafb;
        }
        .attachment-item {
            background: #f8fafc;
        }
        .attachment-item:hover {
            background: #f1f5f9;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-control:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        .error-message {
            color: #dc2626;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1050;
            display: none;
        }
        
        /* 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

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col" style="margin: 24px;">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="h4 mb-1">{{ $title }}</h4>
                                <p class="text-muted">Fill in the details to {{ $edit ? 'update' : 'create' }} a blog post</p>
                            </div>
                            <a href="{{ route('admin.blogs.index') }}" class="btn btn-secondary">
                                <i class="fas fa-backward mr-2"></i> Back
                            </a>
                        </div>
                        <form id="blogForm" method="POST" action="{{ $edit ? route('admin.blogs.update', $id) : route('admin.blogs.store') }}" enctype="multipart/form-data" class="mt-4" novalidate>
                            @csrf
                            @if($edit)
                                @method('PUT')
                            @endif

                            <input type="hidden" name="submit_type" id="submit_type" value="final_submit">

                            <div class="row">
                                <div class="col-sm-12 col-md-9">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group">
                                                <label for="name" class="block text-sm font-medium text-gray-700">Blog Title</label>
                                                <input type="text" class="form-control mt-1 block w-full rounded-md border-gray-300" id="name" name="name"
                                                    value="{{ $edit ? $blog->name : old('name') }}" placeholder="Enter blog title" required>
                                                @error('name')
                                                <span class="error-message">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <!-- Blog Attachments Section -->
                                        <div class="col-sm-12 col-md-12">
                                            <div class="form-group col-span-2">
                                                <label class="block text-sm font-medium text-gray-700">Blog Attachments (Max 5 files, 2MB each, 10MB total)</label>
                                                <small class="text-muted">Allowed types: JPG, JPEG, PNG, PDF, DOC, DOCX</small>
                                                <div id="attachment-container" class="row mt-2">
                                                    <div class="attachment-card mb-2 col-sm-12 col-md-4" data-attachment="0">
                                                        <div class="d-flex align-items-center">
                                                            <input type="file" class="form-control" name="attachments[0]">
                                                            <button type="button" class="btn btn-sm btn-danger ml-2 remove-attachment" style="display: none;">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="mt-2">
                                                    <button type="button" class="add-image-btn" id="add-new-attachment">
                                                        <i class="fas fa-plus mr-2"></i> Add Attachment
                                                    </button>
                                                </div>
                                                @if($edit && $blog->attachments->count())
                                                    <div class="existing-attachments mt-3">
                                                        <h6>Existing Attachments:</h6>
                                                        <div class="row">
                                                            @foreach($blog->attachments as $attachment)
                                                                <div class="col-sm-12 col-md-3">
                                                                    <div class="attachment-item d-flex align-items-center justify-content-between border rounded p-2 mb-2" data-attachment-id="{{ $attachment->id }}">
                                                                        <div class="d-flex align-items-center">
                                                                            <i class="{{ $attachment->getFileIcon() }} mr-2"></i>
                                                                            <span>{{ $attachment->original_name }}</span>
                                                                            <small class="text-muted ml-2">({{ $attachment->formatted_file_size }})</small>
                                                                        </div>
                                                                        <div>
                                                                            <a href="{{ $attachment->file_url }}" target="_blank" class="btn btn-sm btn-outline-primary mr-1">
                                                                                <i class="fas fa-download"></i>
                                                                            </a>
                                                                            <button type="button" class="btn btn-sm btn-danger remove-existing-attachment" data-attachment-id="{{ $attachment->id }}">
                                                                                <i class="fas fa-trash"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                                @error('attachments')
                                                    <span class="error-message">{{ $message }}</span>
                                                @enderror
                                                @error('attachments.*')
                                                    <span class="error-message">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="col-sm-12 col-md-12"></div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-3">
                                    
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="blog_category_id" class="block text-sm font-medium text-gray-700">Category</label>
                                                <select class="form-control mt-1 block w-full rounded-md border-gray-300" id="blog_category_id" name="blog_category_id" required>
                                                    <option value="">Select Category</option>
                                                    @foreach($categories as $category)
                                                        <option value="{{ $category->id }}"
                                                            {{ ($edit && $blog->blog_category_id == $category->id) || old('blog_category_id') == $category->id ? 'selected' : '' }}>
                                                            {{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                @error('blog_category_id')
                                                    <span class="error-message">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label for="thumbnail_image" class="block text-sm font-medium text-gray-700">Thumbnail Image <span class=" {{ $edit && $blog->thumbnail_image ? 'hidden' : '' }}"></span></label>
                                                <input type="file" class="form-control mt-1 block w-full rounded-md border-gray-300" id="thumbnail_image" name="thumbnail_image">
                                                <img src="{{ $edit && $blog->thumbnail_image ? asset('storage/' . $blog->thumbnail_image) : asset('defaults/noimage/no_img.jpg') }}"
                                                    alt="Thumbnail" class="preview-thumbnail-img">
                                                @error('thumbnail_image')
                                                    <span class="error-message">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group col-span-2">
                                        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                                        <textarea class="form-control mt-1 block w-full rounded-md border-gray-300" id="description" name="description" rows="10" style="min-height: 220px; resize: vertical;">{{ $edit ? $blog->description : old('description') }}</textarea>
                                        @error('description')
                                            <span class="error-message">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="mt-6 flex justify-end space-x-4">
                                <button type="button" class="btn btn-secondary px-4 py-2" id="draft-button">
                                    Draft
                                </button>
                                <button type="button" class="btn btn-primary px-4 py-2" id="submit-button">
                                    {{ $edit ? 'Update' : 'Submit' }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="overlay">
            <i class="fas fa-2x fa-sync-alt fa-spin text-white"></i>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Summernote JS -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

    <script type="text/template" id="attachment_template">
        <div class="attachment-card mb-2 col-md-4 col-sm-12" data-attachment="<%=attachmentSeq%>">
            <div class="d-flex align-items-center">
                <input type="file" class="form-control" name="attachments[<%=attachmentSeq%>]">
                <button type="button" class="btn btn-sm btn-danger ml-2 remove-attachment">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        </div>
    </script>

    <script type="module">
        const EDIT = !!'{{ $edit }}';
        const MAX_ATTACHMENTS = 5;
        const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB in bytes
        const MAX_TOTAL_SIZE = 10 * 1024 * 1024; // 10MB in bytes
        let attachmentSeq = 0;

        function render(templateId, data) {
            return $('#' + templateId).html().replace(/<%=(.*?)%>/g, (match, key) => data[key.trim()]);
        }

        // Attachment functions
        function addAttachment() {
            let totalAttachments = $('#attachment-container .attachment-card').length;
            if (EDIT) {
                totalAttachments += $('.existing-attachments .attachment-item').length;
            }
            if (totalAttachments >= MAX_ATTACHMENTS) {
                toastr.error('You can upload a maximum of 5 attachments.');
                return;
            }
            
            // Find the next available sequence number
            let nextSeq = 0;
            while ($(`input[name="attachments[${nextSeq}]"]`).length > 0) {
                nextSeq++;
            }
            
            const html = render('attachment_template', { attachmentSeq: nextSeq });
            $('#attachment-container').append(html);
            updateAttachmentButtons();
        }

        function updateAttachmentButtons() {
            const fields = $('#attachment-container .attachment-card');
            const existingAttachments = EDIT ? $('.existing-attachments .attachment-item').length : 0;
            const totalAttachments = fields.length + existingAttachments;
            
            // Show remove button for all attachment cards if there's more than one total attachment
            fields.each(function (index) {
                const shouldShow = totalAttachments > 1;
                $(this).find('.remove-attachment').toggle(shouldShow);
            });
            
            // Update add button visibility
            $('#add-new-attachment').toggle(totalAttachments < MAX_ATTACHMENTS);
        }

        function validateFile(file) {
            // Check file size (2MB max)
            if (file.size > MAX_FILE_SIZE) {
                toastr.error(`File "${file.name}" is too large. Maximum size is 2MB.`);
                return false;
            }
            
            // Check file type
            const allowedTypes = ['jpg', 'jpeg', 'png', 'pdf', 'doc', 'docx'];
            const fileExtension = file.name.split('.').pop().toLowerCase();
            if (!allowedTypes.includes(fileExtension)) {
                toastr.error(`File "${file.name}" has an invalid type. Allowed types: JPG, JPEG, PNG, PDF, DOC, DOCX.`);
                return false;
            }
            
            return true;
        }

        function validateTotalSize() {
            let totalSize = 0;
            $('#attachment-container input[type="file"]').each(function() {
                if (this.files && this.files[0]) {
                    totalSize += this.files[0].size;
                }
            });
            
            if (totalSize > MAX_TOTAL_SIZE) {
                toastr.error('Total size of all attachments cannot exceed 10MB.');
                return false;
            }
            
            return true;
        }

        function previewImage(input, previewElement) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    previewElement.attr('src', e.target.result).show();
                };
                reader.readAsDataURL(input.files[0]);
            } else {
                previewElement.hide();
            }
        }

        $(document).ready(function () {
            // Initialize Summernote for description
            $('#description').summernote({
                height: 300,
                minHeight: 200,
                maxHeight: 600,
                placeholder: 'Enter blog 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 blog description');
                    }
                }
            });

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

            $(document).on('change', 'input[name="thumbnail_image"]', function () {
                const input = this;
                const preview = $(input).siblings('.preview-thumbnail-img');
                previewImage(input, preview);
            });

            $('#draft-button').on('click', function () {
                $('#submit_type').val('draft');
                $('#blogForm').submit();
            });

            $('#submit-button').on('click', function () {
                $('#submit_type').val('final_submit');
                $('#blogForm').submit();
            });

            // Attachment event handlers
            $('#add-new-attachment').on('click', function (e) {
                e.preventDefault();
                addAttachment();
            });

            $(document).on('click', '.remove-attachment', function (e) {
                e.preventDefault();
                $(this).closest('.attachment-card').remove();
                updateAttachmentButtons();
            });

            $(document).on('click', '.remove-existing-attachment', function () {
                const attachmentId = $(this).data('attachment-id');
                const $item = $(this).closest('.attachment-item');
                Swal.fire({
                    title: 'Confirm Delete',
                    text: 'Are you sure you want to delete this attachment?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Delete',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('admin.blogs.delete-attachment', ['attachment' => ':attachmentId']) }}'.replace(':attachmentId', attachmentId),
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function (response) {
                                toastr.success(response.message || 'Attachment deleted successfully');
                                $item.remove();
                                updateAttachmentButtons();
                            },
                            error: function (xhr) {
                                toastr.error(xhr.responseJSON?.message || 'Something went wrong');
                            }
                        });
                    }
                });
            });

            // File validation for attachments
            $(document).on('change', 'input[name^="attachments["]', function () {
                const file = this.files[0];
                if (file) {
                    if (!validateFile(file)) {
                        $(this).val(''); // Clear the input
                        return;
                    }
                    
                    // Validate total size
                    setTimeout(() => {
                        if (!validateTotalSize()) {
                            $(this).val(''); // Clear the input
                        }
                    }, 100);
                }
            });

            updateAttachmentButtons();

            // Disable jQuery Validate's default accept/mimetype validation
            $.validator.addMethod("accept", function() {
                return true; // Always return true to disable this validation
            });

            // Add custom file extension validator
            $.validator.addMethod("fileExtension", function(value, element, param) {
                if (!element.files || !element.files[0]) {
                    return true; // No file selected is valid (unless required)
                }
                const fileName = element.files[0].name;
                const extension = fileName.split('.').pop().toLowerCase();
                return param.split('|').indexOf(extension) !== -1;
            }, "Please upload a file with a valid extension.");

            const rules = {
                name: {
                    required: true,
                    maxlength: 191,
                },
                blog_category_id: {
                    required: true,
                },
                thumbnail_image: {
                    fileExtension: "jpg|jpeg|png|gif|webp"
                },
                description: {
                    required: true,
                },
            };

            $("#blogForm").validate({
                ignore: [], // Don't ignore any fields
                rules: rules,
                messages: {
                    name: {
                        required: "Blog title is required",
                        maxlength: "Blog title cannot exceed 191 characters"
                    },
                    blog_category_id: {
                        required: "Please select a category"
                    },
                    thumbnail_image: {
                        fileExtension: "Please upload a valid image (JPG, JPEG, PNG, GIF, WEBP)"
                    },
                    description: {
                        required: "Blog description is required"
                    }
                },
                highlight: function(element) {
                    $(element).addClass('border-red-500').removeClass('border-green-500');
                },
                unhighlight: function(element) {
                    $(element).removeClass('border-red-500').addClass('border-green-500');
                },
                errorPlacement: function(error, element) {
                    error.addClass('error-message').insertAfter(element);
                },
                submitHandler: function (form) {
                    // Sync Summernote content before submission
                    if ($('#description').summernote) {
                        $('#description').val($('#description').summernote('code'));
                    }
                    
                    $('.overlay').show();
                    let formData = new FormData(form);
                    
                    // Add PUT method for edit mode
                    @if($edit)
                        formData.append('_method', 'PUT');
                    @endif
                    
                    // Debug: Log form data
                    console.log('Form Data Entries:');
                    for (let pair of formData.entries()) {
                        console.log(pair[0] + ': ' + pair[1]);
                    }
                    
                    $.ajax({
                        url: $(form).attr('action'),
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function (response) {
                            toastr.success(response.message || 'Blog {{ $edit ? 'updated' : 'created' }} successfully');
                            setTimeout(() => {
                                window.location.href = "{{ route('admin.blogs.index') }}";
                            }, 1500);
                        },
                        error: function (xhr) {
                            console.error('Upload Error:', xhr);
                            if (xhr.status === 422) {
                                const errors = xhr.responseJSON.errors;
                                $.each(errors, function (key, messages) {
                                    $.each(messages, function (index, message) {
                                        toastr.error(message);
                                    });
                                });
                            } else {
                                toastr.error(xhr.responseJSON?.message || 'Something went wrong. Please try again.');
                            }
                        },
                        complete: function () {
                            $('.overlay').hide();
                        }
                    });
                    return false;
                }
            });

            $.each(rules, function (key, item) {
                if (typeof item.required === "function" ? item.required() : item.required) {
                    $('label[for="' + key + '"]').append('<span class="text-red-500 ml-1">*</span>');
                }
            });
        });
    </script>
@endpush