@extends('layouts.app')
@section('title', 'Images')

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
    <style>
        .image-preview {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
            /* Ensure wrapping of thumbnails */
        }

        .image-preview img {
            width: 100px;
            /* Thumbnail size */
            cursor: pointer;
            border: 2px solid #ccc;
            border-radius: 5px;
            transition: transform 0.2s;
            /* Optional: Add a hover effect */
        }

        .image-preview img:hover {
            transform: scale(1.05);
            /* Optional: Scale up on hover */
        }
        .image-box {
            width: 100%;
            max-width: 200px;
            margin-bottom: 15px;
        }

        /* Custom CSS to move the close button */
        .lightbox .lb-close {
            position: absolute;
            top: 10px;
            right: 150px;
            z-index: 1000;
            /* background-color: white; */
            border-radius: 50%;
            padding: 10px;
            color: white;
            font-size: 16px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;

        }
    </style>
@endpush

@section('content')
    <x-content-body>
        <div class="container">
            <input type="file" id="image-upload" multiple accept="image/*" />
        
            <div class="image-preview" id="image-preview"></div>
        </div>
        
    </x-content-body>

    @push('js')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
        <script>
            $(document).ready(function() {
                const imagePreview = $('#image-preview');

                // Handle image upload
                $('#image-upload').on('change', function(event) {
                    const files = event.target.files;
                    imagePreview.empty(); // Clear previous images
                    Array.from(files).forEach(file => {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            // Create thumbnail with lightbox link
                            const img = $('<img>')
                                .attr('src', e.target.result)
                                .attr('data-lightbox', 'product-images') // Lightbox group
                                .attr('alt', 'Product Image');

                            // Create a link around the image
                            const link = $('<a>')
                                .attr('href', e.target.result) // Link to original image
                                .attr('data-lightbox', 'product-images') // Lightbox group
                                .append(img); // Append the thumbnail to the link

                            imagePreview.append(link); // Append the link to the preview container
                        };
                        reader.readAsDataURL(file);
                    });
                });
            });
        </script>
    @endpush
@endsection