@extends('admin.layouts.layout')

@section('content')
    @php($dontShowNotSection = true)
    @include('admin.report-templates.template_header')
    
    <div class="mb-4">    
        <div class="servicestitle rounded-0 mobile_column">
            <h3>Attachments</h3>
            <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
                <div class="search_box">
                    <input type="text" class="form-control" placeholder="Search files..." id="search-input" value="{{ request('search') }}">
                    <button class="btn btn_search" id="search-btn">
                        <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                    </button>
                    <button class="btn btn-clear-search" id="clear-search" style="display: {{ request('search') ? 'inline-block' : 'none' }}; margin-left: 5px;">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Files Section -->
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="white_box">
                    <div class="customer_infoboxtitle pt-0">
                        <h3>Files</h3>
                    </div>
                    <div class="row" id="filesGrid">
                        <!-- Upload New File Card -->
                        <div class="col-lg-3 col-md-3 mb-3">
                            <div class="file_listbox customfile_upload" onclick="document.getElementById('fileInput').click();" style="cursor: pointer;">
                                <div>
                                    <img src="{{ asset('images/add_circle.svg') }}"/>
                                </div>
                                <h4>Upload your file from here</h4>
                                <form id="uploadForm" enctype="multipart/form-data" style="display: none;">
                                    @csrf
                                    <input type="file" id="fileInput" name="file" accept=".pdf,application/pdf"/>
                                    <input type="text" name="name" id="fileName" placeholder="File name (optional)" class="form-control mb-2">
                                    <input type="text" name="description" id="fileDescription" placeholder="Description (optional)" class="form-control mb-2">
                                </form>
                            </div>
                        </div>

                        <!-- Dynamic File Listing -->
                        @if(isset($attachments) && $attachments->count() > 0)
                            @foreach($attachments as $attachment)
                                @php($file = $attachment->attachmentFile)
                                <div class="col-lg-3 col-md-3 mb-3" data-attachment-id="{{ $attachment->id }}">
                                    <div class="file_listbox" onclick="openFile('{{ $file ? \App\Models\Masters\File::getImage($file) : '#' }}')" style="cursor: pointer;">
                                        <div class="d-flex justify-content-end w-100">
                                            <div class="dropdown">
                                                <img src="{{ asset('images/horizontal_menu.svg') }}" 
                                                     class="dropdown-toggle" 
                                                     data-bs-toggle="dropdown" 
                                                     style="cursor: pointer;"
                                                     onclick="event.stopPropagation();"/>
                                                <ul class="dropdown-menu dropdown-menu-end">
                                                    @if($file)
                                                        <li><a class="dropdown-item" href="{{ \App\Models\Masters\File::getImage($file) }}" target="_blank"><i class="fas fa-eye me-2"></i>View</a></li>
                                                        <li><a class="dropdown-item" href="{{ \App\Models\Masters\File::getImage($file) }}" download><i class="fas fa-download me-2"></i>Download</a></li>
                                                        <li><hr class="dropdown-divider"></li>
                                                    @endif
                                                    <li><a class="dropdown-item text-danger" href="#" onclick="event.stopPropagation(); deleteAttachment({{ $attachment->id }})"><i class="fas fa-trash me-2"></i>Delete</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/pdf.svg') }}"/>
                                        </div>
                                        <h4 title="{{ $attachment->name }}">{{ pathinfo($attachment->name, PATHINFO_FILENAME) }}</h4>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('page_script')
<script src="{{ asset('assets/js/template-filter.js') }}"></script>
<script>
$(document).ready(function() {
    // File upload handler
    $('#fileInput').on('change', function() {
        const files = this.files;
        if (files.length > 0) {
            const file = files[0];
            
            // Define allowed file types - PDF only
            const allowedTypes = [
                'application/pdf'
            ];
            
            // Validate file type
            if (!allowedTypes.includes(file.type)) {
                showNotification('error', 'Only PDF files are allowed');
                this.value = ''; // Clear the input
                return;
            }
            
            // Validate file size (10MB)
            if (file.size > 10 * 1024 * 1024) {
                showNotification('error', 'File size must be less than 10MB');
                this.value = ''; // Clear the input
                return;
            }
            
            uploadFile(file);
        }
    });

    // Upload file function
    function uploadFile(file) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('name', $('#fileName').val() || file.name);
        formData.append('description', $('#fileDescription').val() || '');
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

        // Show loading
        showLoading('Uploading file...');

        $.ajax({
            url: '{{ route("report-templates.attachments.store") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                hideLoading();
                if (response.status === 'success') {
                    showNotification('success', response.message);
                    // Clear form
                    $('#uploadForm')[0].reset();
                    $('#fileName').val('');
                    $('#fileDescription').val('');
                    // Refresh attachment list
                    refreshAttachments();
                } else {
                    showNotification('error', response.message || 'Upload failed');
                }
            },
            error: function(xhr) {
                hideLoading();
                let message = 'Upload failed';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                    message = Object.values(xhr.responseJSON.errors).flat().join(', ');
                }
                showNotification('error', message);
            }
        });
    }

    // Refresh attachments list
    function refreshAttachments() {
        // Check if there's a current search term
        const currentSearch = $('#search-input').val().trim();
        
        // Always perform search/refresh without page reload
        performSearch(currentSearch);
    }

    // Update attachments list in DOM
    function updateAttachmentsList(attachments) {
        // Remove all existing attachment items (keep upload box)
        $('#filesGrid .col-lg-3:not(:first-child)').remove();

        if (attachments.length === 0) {
            // Show no results message
            const noResultsHtml = `
                <div class="col-12" id="no-results-message">
                    <div class="text-center py-4">
                        <p class="text-muted">No attachments found matching your search.</p>
                    </div>
                </div>
            `;
            $('#filesGrid').append(noResultsHtml);
            return;
        }

        // Remove any existing no-results message
        $('#no-results-message').remove();

        attachments.forEach(function(attachment) {
            // Since we only allow PDF files, always use PDF icon
            const fileIcon = '{{ asset("images/pdf.svg") }}';
            
            const attachmentHtml = `
                <div class="col-lg-3 col-md-3 mb-3" data-attachment-id="${attachment.id}">
                    <div class="file_listbox" onclick="openFile('${attachment.file_url}')" style="cursor: pointer;">
                        <div class="d-flex justify-content-end w-100">
                            <div class="dropdown">
                                <img src="{{ asset('images/horizontal_menu.svg') }}" 
                                     class="dropdown-toggle" 
                                     data-bs-toggle="dropdown" 
                                     style="cursor: pointer;"
                                     onclick="event.stopPropagation();"/>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    ${attachment.file_url ? `
                                        <li><a class="dropdown-item" href="${attachment.file_url}" target="_blank"><i class="fas fa-eye me-2"></i>View</a></li>
                                        <li><a class="dropdown-item" href="${attachment.file_url}" download><i class="fas fa-download me-2"></i>Download</a></li>
                                        <li><hr class="dropdown-divider"></li>
                                    ` : ''}
                                    <li><a class="dropdown-item text-danger" href="#" onclick="event.stopPropagation(); deleteAttachment(${attachment.id})"><i class="fas fa-trash me-2"></i>Delete</a></li>
                                </ul>
                            </div>
                        </div>
                        <div>
                            <img src="${fileIcon}"/>
                        </div>
                        <h4 title="${attachment.name}">${attachment.name.replace(/\.[^/.]+$/, "")}</h4>
                    </div>
                </div>
            `;
            
            $('#filesGrid').append(attachmentHtml);
        });
    }

    // Search functionality - Live search with debounce
    let searchTimeout;
    $('#search-input').on('input', function() {
        const searchTerm = $(this).val().trim();
        const hasValue = searchTerm.length > 0;
        $('#clear-search').toggle(hasValue);
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Set new timeout for debounced search
        searchTimeout = setTimeout(function() {
            performSearch(searchTerm);
        }, 300); // 300ms delay
    });

    // Handle Enter key press
    $('#search-input').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            const searchTerm = $(this).val().trim();
            clearTimeout(searchTimeout); // Cancel debounced search
            performSearch(searchTerm);
        }
    });

    $('#search-btn').on('click', function() {
        const searchTerm = $('#search-input').val().trim();
        performSearch(searchTerm);
    });

    // Perform search
    function performSearch(searchTerm) {
        $.ajax({
            url: '{{ route("report-templates.attachments.index") }}',
            type: 'GET',
            data: { 
                search: searchTerm,
                ajax: true 
            },
            success: function(response) {
                if (response.status === 'success' && response.data.attachments) {
                    updateAttachmentsList(response.data.attachments);
                }
            },
            error: function() {
                showNotification('error', 'Search failed. Please try again.');
            }
        });
    }

    // Clear search
    $('#clear-search').on('click', function() {
        $('#search-input').val('');
        $(this).hide();
        // Perform search with empty term to show all results
        performSearch('');
    });

    // Show/hide clear button based on input - this is now handled in the input event above

    function showNotification(type, message) {
        if (typeof toastr !== 'undefined') {
            toastr[type](message);
        } else if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: type === 'error' ? 'error' : type === 'success' ? 'success' : 'info',
                title: message,
                timer: 3000,
                showConfirmButton: false
            });
        } else {
            alert(message);
        }
    }

    function showLoading(message = 'Loading...') {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: message,
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        }
    }

    function hideLoading() {
        if (typeof Swal !== 'undefined') {
            Swal.close();
        }
    }
});

// Open file in new tab (global scope for onclick)
function openFile(fileUrl) {
    if (fileUrl && fileUrl !== '#') {
        window.open(fileUrl, '_blank');
    }
}

// Delete attachment function (global scope for onclick)
function deleteAttachment(attachmentId) {
    if (typeof Swal !== 'undefined') {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                performDelete(attachmentId);
            }
        });
    } else {
        if (confirm('Are you sure you want to delete this attachment?')) {
            performDelete(attachmentId);
        }
    }
}

function performDelete(attachmentId) {
    $.ajax({
        url: '{{ route("report-templates.attachments.destroy", ":id") }}'.replace(':id', attachmentId),
        type: 'DELETE',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status === 'success') {
                $(`[data-attachment-id="${attachmentId}"]`).fadeOut(function() {
                    $(this).remove();
                    // Check if there are any files left (excluding upload box)
                    if ($('#filesGrid .col-lg-3').length === 1) {
                        // Only upload box remains, no need to show empty message since upload box is always visible
                    }
                });
                
                if (typeof toastr !== 'undefined') {
                    toastr.success(response.message);
                } else if (typeof Swal !== 'undefined') {
                    Swal.fire('Deleted!', response.message, 'success');
                }
            } else {
                if (typeof toastr !== 'undefined') {
                    toastr.error(response.message || 'Delete failed');
                } else if (typeof Swal !== 'undefined') {
                    Swal.fire('Error!', response.message || 'Delete failed', 'error');
                }
            }
        },
        error: function() {
            if (typeof toastr !== 'undefined') {
                toastr.error('Failed to delete attachment');
            } else if (typeof Swal !== 'undefined') {
                Swal.fire('Error!', 'Failed to delete attachment', 'error');
            }
        }
    });
}
</script>
@endpush