@section('title', $title)
@section('description', $description)
@extends('layout.app')
<!-- Custom Styles -->
<style>
    /* Library Grid Layout */
    .library-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 15px;
    }
    
    /* File Card */
    .file-card {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        overflow: visible;
        position: relative;
    }
    
    /* File Preview */
    .file-preview {
        background-color: #ffffff;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        position: relative;
    }
    
    /* Image preview styles */
    .file-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
    }
    
    /* File icon styles */
    .file-icon {
        width: 80px;
        height: 100px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .file-icon::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-width: 0 20px 20px 0;
        border-style: solid;
        border-color: #ddd #ffffff;
    }
    
    .file-icon-text {
        font-size: 16px;
        font-weight: bold;
        color: #666;
        text-transform: uppercase;
        margin-top: 10px;
    }
    
    /* File Info */
    .file-info {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f0f0f0;
    }
    
    .file-name {
        font-size: 14px;
        color: #333;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .file-type {
        font-size: 12px;
        color: #888;
        margin-top: 2px;
    }
    
    /* Menu Button */
    .menu-button {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 50%;
        position: relative;
    }
    
    .menu-button:hover {
        background-color: #f0f0f0;
    }
    
    .dots {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }
    
    .dot {
        width: 4px;
        height: 4px;
        background-color: #666;
        border-radius: 50%;
    }
    
    /* Dropdown Menu */
    .dropdown-menu {
        position: absolute;
        right: 0;
        top: 100%;
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        width: 120px;
        z-index: 100;
        display: none;
        overflow: visible;
        border: 1px solid #e0e0e0;
    }
    
    .dropdown-menu.active {
        display: block;
    }
    
    .menu-item {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        cursor: pointer;
        transition: background-color 0.2s;
        background-color: white;
        text-decoration: none;
        color: #333;
    }
    
    .menu-item:hover {
        background-color: #f5f5f5;
    }
    
    .menu-icon {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }
    
    .menu-item:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 40px 20px;
    }
    
    .empty-state-icon {
        font-size: 48px;
        margin-bottom: 15px;
    }
    
    /* SweetAlert customization */
    .my-swal-popup {
        top: 12% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
</style>
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="breadcrumb-main user-member justify-content-sm-between">
                <div class="d-flex flex-wrap justify-content-center breadcrumb-main__wrapper">
                    <div class="d-flex align-items-center user-member__title justify-content-center me-sm-25">
                        <h4 class="text-capitalize fw-500 breadcrumb-title">{{ trans('menu.user-table') }}</h4>
                        <span class="sub-title ms-sm-25 ps-sm-25">Home</span>
                    </div>

                    <form action="/" class="d-flex align-items-center user-member__form my-sm-0 my-2">
                        <img src="{{ asset('assets/img/svg/search.svg') }}" alt="search" class="svg">
                        <input class="form-control me-sm-2 border-0 box-shadow-none" type="search" placeholder="Search by Name" aria-label="Search">
                    </form>
                </div>
                <div class="action-btn">
                    <a href="#" class="btn px-15 btn-primary" data-bs-toggle="modal" data-bs-target="#new-project-modal">
                        <i class="las la-plus fs-16"></i>Add File</a>

                    <!-- Modal -->
                    <div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content radius-xl">
                                <div class="modal-header">
                                    <h6 class="modal-title fw-500" id="projectModalLabel">Add new file</h6>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <img src="{{ asset('assets/img/svg/x.svg') }}" alt="x" class="svg">
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="project-modal">
                                        <form id="uploadFile" enctype="multipart/form-data">
                                            @csrf

                                            <!-- File Upload Field -->
                                            <div class="form-group mb-20">
                                                <label for="project-logo">Upload File</label>
                                                <input type="file" class="form-control" id="project-file" name="files" accept="image/*" required>
                                                <input type="hidden" class="form-control" id="folderUrl" name="folderUrl" value="{{$folderUrl}}">
                                            </div>

                                            <!-- Button Group -->
                                            <div class="button-group d-flex pt-25">
                                                <button type="submit" class="btn btn-primary btn-default btn-squared text-capitalize">Upload File</button>
                                                <button type="button" class="btn btn-light btn-default btn-squared fw-400 text-capitalize b-light color-light" data-bs-dismiss="modal">Cancel</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Modal -->
                </div>
            </div>
        </div>
    </div>

    <!-- File Display Section -->
    <div class="row">
        <div class="col-lg-12">
            <div class="userDatatable global-shadow border-light-0 p-30 bg-white radius-xl w-100 mb-30">
                <h4 class="mb-4">My Files</h4>
                
                @if(count($imagesOrFiles) > 0)
                    <div class="library-grid">
                        @foreach($imagesOrFiles as $file)
                            @php
                                $filePath = asset($folderUrl . '/' . basename($file));
                                $fileName = basename($file);
                                $fileExtension = pathinfo($file, PATHINFO_EXTENSION);
                                $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                $isImage = in_array(strtolower($fileExtension), $imageExtensions);
                            @endphp

                            <div class="file-card">
                                <div class="file-preview">
                                    @if($isImage)
                                        <!-- Show Image -->
                                        <img src="{{ $filePath }}" alt="{{ $fileName }}">
                                    @else
                                        <!-- Show File Icon -->
                                        <div class="file-icon">
                                            <div class="file-icon-text">{{ strtoupper($fileExtension) }}</div>
                                        </div>
                                    @endif
                                </div>
                                <div class="file-info">
                                    <div>
                                        <div class="file-name">{{ $fileName }}</div>
                                        <div class="file-type">{{ strtoupper($fileExtension) }}</div>
                                    </div>
                                    <div class="menu-button">
                                        <div class="dots">
                                            <div class="dot"></div>
                                            <div class="dot"></div>
                                            <div class="dot"></div>
                                        </div>
                                        
                                        <div class="dropdown-menu">
                                            <a href="{{ $filePath }}" class="menu-item download-btn" download>
                                                <div class="menu-icon">⬇️</div>
                                                DOWNLOAD
                                            </a>
                                            <div class="menu-item delete-btn" data-file="{{ $folderUrl . '/' . basename($file) }}">
                                                <div class="menu-icon">🗑</div>
                                                DELETE
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else 
                    <div class="empty-state">
                        <div class="empty-state-icon">📁</div>
                        <h5>No Attachments Available</h5>
                        <p>Upload files to see them here</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>



<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get all menu buttons
        const menuButtons = document.querySelectorAll('.menu-button');
        
        // Add click event listener to each menu button
        menuButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                // Find the dropdown menu within this menu button
                const dropdownMenu = this.querySelector('.dropdown-menu');
                
                // Toggle the active class on the dropdown menu
                dropdownMenu.classList.toggle('active');
                
                // Close other dropdown menus
                document.querySelectorAll('.dropdown-menu').forEach(menu => {
                    if (menu !== dropdownMenu) {
                        menu.classList.remove('active');
                    }
                });
                
                // Prevent the click from propagating to the document
                e.stopPropagation();
            });
        });
        
        // Close all dropdown menus when clicking outside
        document.addEventListener('click', function() {
            document.querySelectorAll('.dropdown-menu').forEach(menu => {
                menu.classList.remove('active');
            });
        });
        
        // File Upload Form Submission
        document.getElementById('uploadFile').addEventListener('submit', function(event) {
            event.preventDefault();

            //==================For sweetalert initialization========================
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                },
                customClass: {
                    popup: 'my-swal-popup',
                }
            });

            //==================For Add new file========================
            let formData = new FormData();
            let fileInput = document.getElementById('project-file');
            let folderUrl = document.getElementById('folderUrl');

            if (fileInput.files.length === 0) {
                Toast.fire({ icon: 'error', title: 'Please select a file to upload.' })
                return;
            }

            formData.append('file', fileInput.files[0]);
            formData.append('folderUrl', folderUrl.value);

            fetch('/upload-file', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status == 'success') {
                    Toast.fire({ icon: 'success', title: 'File uploaded successfully' })
                    window.location.reload();
                } else {
                    Toast.fire({ icon: 'error', title: 'File upload failed.' })
                }
            })
            .catch(error => console.error('Error:', error));
        });

        //==================For Delete file========================
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                
                let fileUrl = this.getAttribute('data-file'); // Get file URL from button

                Swal.fire({
                    title: "Are you sure?",
                    text: "This file will be permanently deleted!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch('/delete-file', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                            },
                            body: JSON.stringify({ fileUrl: fileUrl })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {
                                Swal.fire("Deleted!", "Your file has been deleted.", "success");
                                setTimeout(() => window.location.reload(), 1500);
                            } else {
                                Swal.fire("Error!", "File deletion failed.", "error");
                            }
                        })
                        .catch(error => console.error('Error:', error));
                    }
                });
            });
        });
    });
</script>
@endsection