@extends('front::layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset(config('front.asset_path') . 'css/lightgallery.css') }}">
    <link rel="stylesheet" href="{{ asset(config('front.asset_path') . 'css/materialdesignicons.min.css') }}">
@endpush

@section('content')

    <div class="container-fluid mt-5 pt-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row pb-sm-5 border rounded">
                    <div class="col-md-12 pb-sm-5">
                        <div class="gallery-desc p-3">
                            {!! $photo->description !!}
                        </div>
                        <div id="eventscarousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                @foreach ($photo->gallery as $image)
                                <button type="button" data-bs-target="#eventscarousel" data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->first ? "active" : "" }}" aria-current="true" aria-label="Slide {{ $loop->index }}">
                                    <div class="thumnail-box">
                                        <img src="{{ asset($image->image) }}" alt="">
                                    </div>
                                </button>
                                @endforeach
                            </div>
                            <div class="carousel-inner">
                                <div id="lightgallery">
                                    @foreach ($photo->gallery as $image)
                                    <div class="carousel-item {{ $loop->first ? 'active' : '' }}" data-src="{{ asset($image->image) }}">
                                        <a href="">
                                            <img src="{{ asset($image->image) }}" class="d-block w-100" alt="...">
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#eventscarousel"
                                    data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#eventscarousel"
                                    data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row px-md-5 mt-5">
                @include('front::photos.sidebar')
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="{{ asset(config('front.asset_path') . 'js/lightgallery.js') }}"></script>
@endpush