@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')

    <!-- Gallery Section -->
    <section class="our-project-sec overflow-hidden py-5"
        style="background-image:url(images/background/cross-line2.png)">
        @foreach ($galleries as $type => $gallery)
        <div class="container pb-5">
            <div class="heading text-center mb-5">
                <div class="heading text-uppercase animate__animated animate__fadeInDown text-center mb-4">{{ str_replace('_', ' ', $type) }}</div>
            </div>

            <div class="row gx-4 gy-5">
                
                @foreach($gallery as $item)
                <div class="col-lg-4 col-md-6">
                    <div class="project-wrapper d-block border cursor-pointer open-modal"
                        data-image="{{ url('storage/'.$item->image) }}"
                        data-content="{!! $item->content !!}"
                        data-location="{{ $item->location }}">
                        
                        <div class="text-center overflow-hidden">
                            <div class="overlay-wrapper position-relative">
                                <img src="{{ $item->image ? url('storage/'.$item->image) : url('/assets/admin/images/blog_default.png') }}" class="img-fluid" alt="Gallery">
                                <div class="overlay-description">
                                    {!! \Illuminate\Support\Str::limit($item->content, 100) !!}
                                </div>
                            </div>
                            @if($item->location)
                                <div class="project-info text-center my-3">
                                    <div class="project-location fs-14 fw-medium text-muted text-capitalize">
                                        {{ $item->location }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach

            </div>

        </div>  
        @endforeach
    </section>

    <!-- Modal -->
    <div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
            
                <!-- Close Button -->
                <button type="button" class="btn-close position-absolute end-0 m-3 z-3" data-bs-dismiss="modal" aria-label="Close"></button>
                
                <div class="modal-body p-0 d-md-flex">
                    <div class="col-md-8 p-4 text-center border-end">
                        <img src="" id="modalImage" class="img-fluid" alt="Large View">
                    </div>
                    <div class="col-md-4 p-4">
                        <h5 class="mb-3">Image Content</h5>
                        <p id="modalContent" class="mb-3 text-muted"></p>
                        <p id="modalLocation" class="text-primary fw-semibold"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const modal = new bootstrap.Modal(document.getElementById('galleryModal'));

            document.querySelectorAll('.open-modal').forEach(item => {
                item.addEventListener('click', function () {
                    const image = this.getAttribute('data-image');
                    const content = this.getAttribute('data-content');
                    const location = this.getAttribute('data-location');

                    document.getElementById('modalImage').src = image;
                    document.getElementById('modalContent').textContent = content;
                    document.getElementById('modalLocation').textContent = location ?? '';

                    modal.show();
                });
            });
        });
    </script>



@endsection