@extends('app.layout')

@section('sub_content')
    <div class="page-header">
        <div class="page-title">
            <h4>{{ __('Medias') }}</h4>
        </div>

        <div class="breadcrumb-line">
            <div class="d-flex">
                <div class="breadcrumb">
                    <a href="{{ route('home') }}" class="breadcrumb-item"><i class="material-icons mr-2">home</i>
                        {{ __('Home') }}</a>
                    <span class="breadcrumb-item active">{{ __('Medias') }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- @if ($Medias->hasPages())
        <div class="pagination justify-content-center my-4">
            {{ $Medias->links() }}
        </div>
    @endif --}}

    {{-- <div class="row px-3 h-50">
        @foreach ($Galleries as $media)
            <div class="col-4 w-100 h-100 p-2 border" style="width:100%;height:50%">
                @if (strstr($media->path, 'images/'))
                    <img src="{{ Storage::url($media->path) }}" style="max-width: 100%; max-height: 100%">
                @else
                    <video class="video-fluid" loop controls muted style="max-width: 100%; max-height: 100%">
                        <source src="{{ Storage::url($media->path) }}" type="video/mp4" />
                    </video>
                @endif
            </div>
        @endforeach
    </div> --}}

    {{-- <div class="container">
        <div class="row d-flex flex-wrap align-items-center h-50">
            @foreach ($Medias as $index => $media)
                <div class="col-12 col-md-6 col-lg-2 p-3"
                style="max-width: 100%; max-height: 100%"
                >
                    @if ($media->extension != 'mp4')
                        <img src="{{ $media->path }}" alt="{{$media->name}}" data-toggle="modal" data-target="#lightbox" data-target="#indicators" data-slide-to="{{$index}}" class="m-0 p-0"
                        style="max-width: 100%; max-height: 100%"
                        />
                    @else
                        <video loop controls style="max-width: 100%; max-height: 100%">
                            <source src="{{ $media->path }}" type="video/mp4" alt="{{$media->name}}" />
                        </video>
                    @endif
                </div>
            @endforeach
        </div>

        <!-- Modal -->
        <div class="modal fade" id="lightbox" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <button type="button" class="close text-right p-2" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div id="indicators" class="carousel slide" data-interval="false">
                        <ol class="carousel-indicators">
                            @foreach ($Medias as $index => $media)
                                <li data-target="#indicators" data-slide-to="{{$index}}" {{$loop->first ? 'class="active"' : ''}}></li>
                            @endforeach
                        </ol>

                        <div class="carousel-inner">
                            @foreach ($Medias as $index => $media)
                                <div class="carousel-item {{$loop->first ? 'active' : ''}}">
                                    @if ($media->extension != 'mp4')
                                        <img class="d-block w-100" src="{{ $media->path }}" alt="{{$media->name}}" class="m-0 p-0" style="max-width: 100%; max-height: 100%">
                                    @else
                                        <div class="bg-dark">
                                            <video class="w-100 p-5" loop controls style="max-width: 100%; max-height: 100%">
                                                <source src="{{ $media->path }}" type="video/mp4" alt="{{$media->name}}" />
                                            </video>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>

                        <a class="carousel-control-prev" href="#indicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#indicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div> --}}

    <style>
        .ekko-lightbox-nav-overlay a {
            color: goldenrod;
        }

        .gallery-title {
            text-align: center;
            font-weight: 500;
            border-bottom: 1px dotted orange;
            margin-top: 1em;
        }

    </style>

    {{-- <div class="container">
        <div class="row">
            <div class="col-12">
                @foreach ($Reservations as $Reservation)
                    @if ($Reservation->ReservationMedia->count())
                        <h3 class="gallery-title">{{ 'Date : ' . $Reservation->date_reservation }}</h3>
                        <div class="row">
                            @foreach ($Reservation->ReservationMedia as $index => $media)
                                <a href="{{ $media->path }}" data-toggle="lightbox" data-gallery="example-gallery"
                                    class="col-md-4 col-6 my-2">
                                    @if ($media->extension != 'mp4')
                                        <img src="{{ $media->path }}" class="img-fluid card">
                                    @else
                                        <video class="img-fluid card" loop controls>
                                            <source src="{{ $media->path }}" type="video/mp4"
                                                alt="{{ $media->name }}" />
                                        </video>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div> --}}

    <div class="container">
        <div class="row">
            <div class="col-12 mh-50 px-0 px-sm-5" style="max-height: 50%">
                @foreach ($Reservations as $r => $Reservation)
                    <div class="text-center py-2 bg-secondary text-white mt-2">
                        <label class="m-0 h4">Reservation N° {{ $Reservation->reference }}</label>
                    </div>

                    @if ($Reservation->ReservationMedia()->exists())
                        @foreach (array_unique(array_column($Reservation->ReservationMedia()->orderBy('date', 'desc')->get()->toArray(), 'date')) as $d => $date)
                            <h3 class="gallery-title">{{ 'Date : ' . $date }}</h3>

                            <div id="carouselExampleIndicators-{{ $r }}-{{ $d }}"
                                class="carousel slide col-12 col-sm-12" data-ride="carousel" data-bs-interval="false"
                                data-interval="false">
                                <ol class="carousel-indicators">
                                    @foreach ($Reservation->ReservationMedia()->whereDate('date', $date)->get() as $m => $media)
                                        <li data-target="#carouselExampleIndicators-{{ $r }}-{{ $d }}"
                                            data-slide-to="{{ $m }}" class="{{ $m == 0 ? 'active' : '' }}">
                                        </li>
                                    @endforeach
                                </ol>
                                <div class="carousel-inner border">
                                    @foreach ($Reservation->ReservationMedia()->whereDate('date', $date)->get() as $m => $media)
                                        <div class="my-2 carousel-item {{ $m == 0 ? 'active' : '' }}">
                                            @if ($media->extension != 'mp4')
                                                <img class="d-block w-100 h-25" src="{{ $media->path }}"
                                                    alt="First slide">
                                            @else
                                                <video class="d-block w-100 h-25" src="{{ $media->path }}" loop controls
                                                    autoplay></video>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev"
                                    href="#carouselExampleIndicators-{{ $r }}-{{ $d }}"
                                    role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next"
                                    href="#carouselExampleIndicators-{{ $r }}-{{ $d }}"
                                    role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        @endforeach
                    @endif
                @endforeach
            </div>
        </div>
    </div>
@endsection

<style>
    .close {
        font-size: 1.5rem;
    }

    .col-12 img {
        opacity: 0.9;
        cursor: pointer;
        /* margin: 2rem; */
        width: 100%;
        max-height: 100%;
        height: 100%;
    }

    .col-12 img:hover {
        opacity: 1;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .col-12 video {
        opacity: 0.9;
        cursor: pointer;
        /* margin: 2rem; */
        width: 100%;
        max-height: 100%;
        height: 100%;
    }

    .col-12 video:hover {
        opacity: 1;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

</style>