@extends('frontend.layouts.master')
@section('title') {{$title}} @endsection
@section('content')
@php
    $banner_bg = "";
    if($banner != null){
        $banner_bg = 'style="background-image:url('.asset($banner->value).')"';
    }
@endphp
<section class="banner smallest-banner" {!!$banner_bg !!}>
    @include('frontend.partials.navbar')
    <div class="banner-content">
        <h1 class="text-capitalize" data-aos="fade-right">{{$title}}</h1>
    </div>
</section>
@if(count($tutorials) > 0)
<section class="content">
    <div id="carouselExampleIndicators" class="carousel slide tutorial-slider" data-ride="carousel">
        {{-- <ol class="carousel-indicators">
          @foreach ($tutorials as $index => $tutorial)
          <li data-target="#carouselExampleIndicators" data-slide-to="{{$index}}" class="{{$index == 0 ? 'active' : ''}}"></li>
          @endforeach
        </ol> --}}
        <div class="carousel-inner">
            @foreach ($tutorials as $index => $tutorial)
          <div class="carousel-item {{$index == 0 ? 'active' : ''}}">
            @if ($tutorial->type == \App\Models\Tutorial::TypeImage)
            <img src="{{ asset('tutorials/' . $tutorial->media_url) }}" class="d-block w-100" alt="Carousel {{$index}} Image">
            @elseif ($tutorial->type == \App\Models\Tutorial::TypeVideo)
            <video controls class="carousel-video w-100">
                <source src="{{ asset('tutorials/' . $tutorial->media_url) }}">
            Your browser does not support the video tag.
            </video>
            @endif
          </div>
          @endforeach
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
</section>
@endif
@if(count($faqs) > 0)
    <section class="tutorials container-fluid">
        <h2 data-aos="fade-right">FAQs</h2>
        <div id="accordion" class="accordion mt-4" data-aos="fade-up" data-aos-delay="400">
            @foreach($faqs as $index => $faq)
                <div class="card">
                    <div class="card-header" id="heading{{ $index }}">
                        <h5 class="mb-0">
                            <button class="btn btn-link {{ $index === 0 ? '' : 'collapsed' }}" data-toggle="collapse" data-target="#collapse{{ $index }}"
                                    aria-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="collapse{{ $index }}">
                                {{ $faq['question'] }}
                            </button>
                        </h5>
                    </div>
                    <div id="collapse{{ $index }}" class="collapse {{ $index === 0 ? 'show' : '' }}"
                         aria-labelledby="heading{{ $index }}" data-parent="#accordion">
                        <div class="card-body">
                            {{ $faq['answer'] }}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
@endif
@endsection
@section('script')
<script>
    $(function () {
        const $carousel = $("#carouselExampleIndicators")
        const $video = $('.carousel-video');
        $video.on("play", function () {
            $carousel.carousel('pause');
        });
        $video.on("pause", function () {
            $carousel.carousel('cycle');
        });
        $carousel.on('slide.bs.carousel', function () {
            $video.each(function () {
            this.pause();
            this.currentTime = 0;
        });
    });
  });
</script>
@endsection