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

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

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

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="title">Title <span style="color: red"> * </span></label>
                                    <input type="text" class="form-control" name="title" id="title"
                                           value="{{ $edit ? $notice->title : old('title') }}"
                                           placeholder="Enter Notice Title" required>
                                </div>

                                <div class="form-group col-md-3">
                                    <label for="expiry_date">Expiry Date <span style="color: red"> * </span></label>
                                    <input type="date" class="form-control" name="expiry_date" id="expiry_date"
                                           value="{{ $edit ? Carbon::parse($notice->expiry_date)->format('Y-m-d') : old('expiry_date') }}"
                                           required>
                                </div>

                                

                                <div class="form-group col-md-3">
                                    <label for="status">Status <span style="color: red"> * </span></label>
                                    <select class="form-control" name="status" id="status" required>
                                        <option value="1" {{ (isset($notice) && $notice->status == 1) ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ (isset($notice) && $notice->status == 0) ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-3">
                                    <label for="visibility">Visibility <span style="color: red"> * </span></label>
                                    <select class="form-control" name="visibility" id="visibility" required>
                                        <option value="1" {{ (isset($notice) && $notice->visibility == 1) ? 'selected' : '' }}>Public</option>
                                        <option value="0" {{ (isset($notice) && $notice->visibility == 0) ? 'selected' : '' }}>Private</option>
                                    </select>
                                </div>

                                <div class="form-group col-md-3">
                                    <label for="attachment">Attachment </label>
                                    <input type="file" class="form-control" name="attachment" id="attachment" {{ $edit ? '' : 'required' }}>
                                    <input type="hidden" name="remove_attachment" id="remove_attachment" value="0">

                                    @if ($edit && $notice->attachment)
                                        <div class="attachment-preview" id="current-attachment">
                                            <div class="file-name">
                                                @php
                                                    $extension = strtolower(pathinfo($notice->attachment, PATHINFO_EXTENSION));
                                                    $isImage = in_array($extension, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                                @endphp

                                                @if($isImage)
                                                    <img src="{{ asset('storage/' . $notice->attachment) }}" class="preview-thumbnail" alt="Preview">
                                                @else
                                                    <div class="preview-icon">
                                                        @switch($extension)
                                                            @case('pdf')
                                                                <i class="fas fa-file-pdf" style="color: #dc3545;"></i>
                                                                @break
                                                            @case('doc')
                                                            @case('docx')
                                                                <i class="fas fa-file-word" style="color: #0d6efd;"></i>
                                                                @break
                                                            @case('xls')
                                                            @case('xlsx')
                                                                <i class="fas fa-file-excel" style="color: #198754;"></i>
                                                                @break
                                                            @default
                                                                <i class="fas fa-file" style="color: #6c757d;"></i>
                                                        @endswitch
                                                    </div>
                                                @endif
                                                {{-- <span>{{ basename($notice->attachment) }}</span> --}}
                                            </div>
                                            <div>
                                                <a href="{{ asset('storage/' . $notice->attachment) }}" class="btn btn-sm btn-info" target="_blank">
                                                    <i class="fas fa-eye"></i> View
                                                </a>
                                                <span class="remove-attachment" onclick="removeAttachment()">
                                                    <i class="fas fa-times"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="attachment-preview" id="new-attachment-preview" style="display: none;">
                                        <div class="file-name">
                                            <div id="new-file-preview"></div>
                                            <span id="new-file-name"></span>
                                        </div>
                                        <span class="remove-attachment" onclick="removeNewAttachment()">
                                            <i class="fas fa-times"></i>
                                        </span>
                                    </div>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="description">Description <span style="color: red"> * </span></label>
                                    <textarea class="form-control" name="description" id="description"
                                              placeholder="Enter Notice Description">{{ $edit ? $notice->description : old('description') }}</textarea>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary" id="submit">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                            </button>
                        </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>
        .attachment-preview {
            border: 1px solid #ddd;
            padding: 10px;
            margin-top: 10px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .remove-attachment {
            color: red;
            cursor: pointer;
            margin-left: 10px;
        }
        .file-name {
            margin-right: 10px;
            word-break: break-all;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .preview-thumbnail {
            max-width: 50px;
            max-height: 50px;
            border-radius: 4px;
            object-fit: cover;
        }
        .preview-icon {
            font-size: 24px;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            border-radius: 4px;
        }
        
        /* Summernote customizations */
        .note-editor .note-toolbar {
            border-bottom: 1px solid #dee2e6;
        }
        .note-editor .note-editing-area {
            min-height: 200px;
        }
        .note-editor.note-frame {
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .note-editor.note-frame.note-focused {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        /* Mobile responsive adjustments for Summernote */
        @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>
        const EDIT = !!'{{ $edit }}';
        const editAddForm = $('.edit-add-form');
        const attachmentInput = $('#attachment');
        const currentAttachment = $('#current-attachment');
        const newAttachmentPreview = $('#new-attachment-preview');
        const removeAttachmentInput = $('#remove_attachment');

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

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

        attachmentInput.on('change', function() {
            const file = this.files[0];
            if (file) {
                $('#new-file-name').text(file.name);

                // Create preview based on file type
                const fileType = file.type;
                const previewDiv = $('#new-file-preview');

                if (fileType.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewDiv.html(`<img src="${e.target.result}" class="preview-thumbnail" alt="Preview">`);
                    };
                    reader.readAsDataURL(file);
                } else {
                    // Show icon based on file type
                    let icon = 'fa-file';
                    let iconColor = '#6c757d';

                    if (fileType === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
                        icon = 'fa-file-pdf';
                        iconColor = '#dc3545';
                    } else if (fileType.includes('word') || file.name.match(/\.docx?$/i)) {
                        icon = 'fa-file-word';
                        iconColor = '#0d6efd';
                    } else if (fileType.includes('spreadsheet') || file.name.match(/\.xlsx?$/i)) {
                        icon = 'fa-file-excel';
                        iconColor = '#198754';
                    }

                    previewDiv.html(`<div class="preview-icon"><i class="fas ${icon}" style="color: ${iconColor};"></i></div>`);
                }

                newAttachmentPreview.show();
                currentAttachment.hide();
                removeAttachmentInput.val('0');
            } else {
                newAttachmentPreview.hide();
                if (EDIT) {
                    currentAttachment.show();
                }
            }
        });

        function removeAttachment() {
            currentAttachment.hide();
            removeAttachmentInput.val('1');
            attachmentInput.prop('required', true);
        }

        function removeNewAttachment() {
            attachmentInput.val('');
            newAttachmentPreview.hide();
            if (EDIT && removeAttachmentInput.val() === '0') {
                currentAttachment.show();
                attachmentInput.prop('required', false);
            } else {
                attachmentInput.prop('required', true);
            }
        }

        editAddForm.validate({
            rules: {
                title: {
                    required: true
                },
                description: {
                    required: function() {
                        // Check if Summernote content is empty
                        return $('#description').summernote('isEmpty');
                    }
                },
                expiry_date: {
                    required: true
                },
                attachment: {
                    required: !EDIT
                },
                status: {
                    required: true
                },
                visibility: {
                    required: true
                }
            },
            messages: {
                title: {
                    required: "Please enter a title"
                },
                description: {
                    required: "Please enter a description"
                },
                expiry_date: {
                    required: "Please select an expiry date"
                },
                attachment: {
                    required: "Please select an attachment"
                },
                status: {
                    required: "Please select a status"
                },
                visibility: {
                    required: "Please select visibility"
                }
            },
            submitHandler: function (htmlForm) {
                // Sync Summernote content before submission
                $('#description').summernote('code', $('#description').summernote('code'));
                
                // Validate Summernote content is not empty
                if ($('#description').summernote('isEmpty')) {
                    toastr.error('Please enter a description');
                    return false;
                }

                $('.overlay').show();
                const form = $(htmlForm);
                const formData = new FormData(htmlForm);
                const url = form.attr("action");

                if (EDIT) {
                    formData.append('_method', 'PUT');
                }

                $.ajax({
                    url: url,
                    data: formData,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('.overlay').hide();

                        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) {
                        $('.overlay').hide();
                        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");
                            });
                        } else {
                            toastr.error('An error occurred while saving');
                        }
                    }
                });
                return false;
            }
        });
    </script>
@endpush