@extends('Web/App')
@section('main-content')
    @include('Web/Layouts/minibanner')
    <section class="bg-brown-theme py-1">
        <div class="container mt-5 bg-white">
             
            @foreach ($facilities as $item)
                @php
                    $is_even = $loop->index % 2 == 0;
                    $reverse_col_sm = '';
                    if($is_even){
                        $reverse_col_sm = 'reverse_columns';
                    }
                @endphp
                 <h1 class="heading text-light bg-darkblue-theme py-1 shadow-sm  mt-2 animate__animated animate__fadeIn" style="text-transform: upperCase">{{$item->name}} </h1>
                <div class="row shadow mb-5 px-2 {{$reverse_col_sm}}" style="font-weight: bolder">
                                       
                    @if(!$is_even)
                    {{-- If it's even number Image first--}}
                        <div class="col-md-6 m-auto animate__animated animate__fadeInRight">
                            @if (count($item->media) > 1)
                                {{-- Do carousel slideshow --}}
                                <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                    <div class="carousel-indicators">
                                        @foreach ($item->media as $itm)
                                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$loop->index}}" @if($loop->index > 0) class="active" @endif aria-current="true" aria-label="Slide {{$loop->index + 1}}"></button>
                                        @endforeach
                                    </div>
                                    <div class="carousel-inner">
                                        @foreach ($item->media as $itm)
                                            @php
                                                $is_active = 'active';
                                                if($loop->index > 0){
                                                    $is_active = '';
                                                }
                                            @endphp
                                            <div class="carousel-item {{$is_active}}">
                                                @if ($itm->media_type == 'image')
                                                    <img src="{{asset('storage/facilities/'.$itm->media_name)}}" class="d-block w-100 col-12" alt="...">
                                                @else
                                                    <video src="{{asset('storage/facilities/'.$itm->media_name)}}" id="facility_{{$item->id}}_{{$itm->id}}" class="col-12" controls></video>
                                                @endif
                                            </div>
                                        @endforeach                                      
                                      
                                    </div>
                                    {{-- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
                                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                      <span class="visually-hidden">Next</span>
                                    </button> --}}
                                  </div>
                            @else
                                @php
                                    $mediaitem = $item->media[0];
                                @endphp
                                @if ($mediaitem->media_type == 'image')
                                    <img src="{{asset('storage/facilities/'.$mediaitem->media_name)}}" class="d-block w-100 col-12" alt="...">
                                @else
                                    <video src="{{asset('storage/facilities/'.$mediaitem->media_name)}}" id="facility_{{$item->id}}" class="col-12" controls></video>
                                @endif
                            @endif
                        </div>
                    @endif
                    <div class="col-md-6 m-auto  text-darkblue-theme bg-light p-3  animate__animated animate__fadeInRight">
                        Ullamco esse sunt et reprehenderit aute nulla sint. Consequat tempor labore magna tempor dolor eiusmod laboris enim duis incididunt enim velit non proident. In aute occaecat laborum quis elit minim ad sint exercitation consectetur. Ullamco mollit ut commodo anim esse nostrud nostrud in magna dolore enim exercitation ullamco. Adipisicing deserunt exercitation pariatur et quis ad. Aute sit cillum occaecat exercitation minim sunt non cillum reprehenderit laborum. Id nostrud incididunt laborum fugiat pariatur eiusmod eu anim duis officia.
                        <div class="underlining shadow my-3"></div>
                    </div>


                    @if($is_even)
                    {{-- If it's even number Image second--}}
                        <div class="col-md-6 m-auto  animate__animated animate__fadeInLeft">
                            @if (count($item->media) > 1)
                                {{-- Do carousel slideshow --}}
                                <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                                    <div class="carousel-indicators">
                                        @foreach ($item->media as $itm)
                                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{$loop->index}}" @if($loop->index > 0) class="active" @endif aria-current="true" aria-label="Slide {{$loop->index + 1}}"></button>
                                        @endforeach
                                    </div>
                                    <div class="carousel-inner">
                                        @foreach ($item->media as $itm)
                                            @php
                                                $is_active = 'active';
                                                if($loop->index > 0){
                                                    $is_active = '';
                                                }
                                            @endphp
                                            <div class="carousel-item {{$is_active}} ">
                                                @if ($itm->media_type == 'image')
                                                    <img src="{{asset('storage/facilities/'.$itm->media_name)}}" class="d-block w-100 col-12" alt="...">
                                                @else
                                                    <video src="{{asset('storage/facilities/'.$itm->media_name)}}" id="facility_{{$item->id}}_{{$itm->id}}" class="col-12" controls></video>
                                                @endif
                                            </div>
                                        @endforeach                                      
                                      
                                    </div>
                                    {{-- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
                                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                      <span class="visually-hidden">Next</span>
                                    </button> --}}
                                  </div>
                            @else
                            @php
                                $mediaitem = $item->media[0];
                            @endphp
                                @if ($mediaitem->media_type == 'image')
                                    <img src="{{asset('storage/facilities/'.$mediaitem->media_name)}}" class="d-block w-100" alt="...">
                                @else
                                    <video src="{{asset('storage/facilities/'.$mediaitem->media_name)}}" id="facility_{{$item->id}}" class="" controls></video>
                                @endif
                            @endif
                        </div>
                   
                    @endif
                </div>
                {{-- <hr class="text-muted mb-2"> --}}
            @endforeach
        </div>
    </section>
@endsection