@extends('front.layouts.app')
@section('content')
<!-- START INNER BANNER SECTION -->
<div class="inner-banner" @if(@$metaArr['main_banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-12">
                <div class="inner-banner-content">
                    <h4>{!! @$metaArr['main_banner_subtitle'] !!}</h4>
                    <h1>{!! @$metaArr['main_banner_title'] !!}</h1>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['main_banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</div>
<!-- END INNER BANNER SECTION -->

<!-- START ABOUT US SECTION -->
<section class="au-page-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 artical-col artical-col-991">
                <div class="artical-img right bapt-sac-imgs-col">
                    <div class="row">
                        <div class="col-sm-3">
                            @if(@$metaArr['content_img1_type'] == "video")
                            <div class="bapt-sac-img-1" style="height:auto;">
                                <x-video-js-player :src="$metaArr['content_img1']" id="content_img1" />
                            </div>
                            @else
                            <div class="bapt-sac-img-1">
                                <img src="{!! getCmsFileUrl(@$metaArr['content_img1']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['content_img1_alt']) !!}">
                            </div>
                            @endif
                        </div>
                        <div class="col-sm-6 my-auto">
                            @if(@$metaArr['content_img2_type'] == "video")
                            <div class="bapt-sac-img-2" style="height:auto;">
                                <x-video-js-player :src="$metaArr['content_img2']" id="content_img2"/>
                            </div>
                            @else
                            <div class="bapt-sac-img-2">
                                <img src="{!! getCmsFileUrl(@$metaArr['content_img2']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['content_img2_alt']) !!}">
                            </div>
                            @endif
                        </div>
                        <div class="col-sm-3 mt-auto">
                            @if(@$metaArr['content_img3_type'] == "video")
                            <div class="bapt-sac-img-3" style="height:auto;">
                                <x-video-js-player :src="$metaArr['content_img3']" id="content_img3" />
                            </div>
                            @else
                            <div class="bapt-sac-img-3">
                                <img src="{!! getCmsFileUrl(@$metaArr['content_img3']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['content_img3_alt']) !!}">
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="au-learn-content artical-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    <p>{!! @$metaArr['content_description'] !!}</p>
                    @if(@$metaArr['content_btn_caption'] && @$metaArr['content_btn_link'])
                    <a href="{!! @$metaArr['content_btn_link'] !!}" class="btn btn-theme-blue mt-4" @if(@$metaArr['content_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['content_btn_caption'] !!}</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ABOUT US SECTION -->

<!-- START VIDEO SECTION -->
<section class="bapt-video-sec overlay-black" style="background-image: url({!! getCmsFileUrl(@$metaArr['video_bg_img']) !!});">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-md-6 text-center">
                @if(@$metaArr['video_link'])
                <div class="video-wraper" id="videoWraper" style="display:none;">
                    <x-video-js-player :src="$metaArr['video_link']" id="videoPlayer" />
                    <a href="javascript:void(0)" class="video-close-btn">
                        <i class="fas fa-x"></i>
                    </a>
                </div>
                <a href="javascript:void(0)" class="au-video-icon">
                    <img src="{!! asset('assets/frontend/images/play-icon-blue.png') !!}" class="img-fluid" alt="play-icon-blue">
                </a>
                @endif
            </div>
            <div class="col-md-6">
                <div class="sec-title line-left">
                    <strong>{!! @$metaArr['video_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['video_title'] !!}</h2>
                </div>
                @if(@$metaArr['video_btn_caption'] && @$metaArr['video_btn_link'])
                <a href="{!! @$metaArr['video_btn_link'] !!}" class="btn btn-theme-blue mt-4" @if(@$metaArr['video_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['video_btn_caption'] !!}</a>
                @endif
                @if(@$metaArr['video_btn2_caption'] && @$metaArr['video_btn2_link'])
                <a href="{!! @$metaArr['video_btn2_link'] !!}" class="btn btn-theme-blue mt-4" @if(@$metaArr['video_btn2_link_open_in_new_tab']) target="_blank" @endif style="margin-left:10px">{!! @$metaArr['video_btn2_caption'] !!}</a>
                @endif
            </div>
        </div>
    </div>
</section>
<!-- END VIDEO SECTION -->

<!-- START BPT-CARE SECTION -->
<section class="bpt-care-sec sec-py">
    <div class="container">
        <div class="sec-title text-center">
            <strong>{!! @$metaArr['quick_link_subtitle'] !!}</strong>
            <h2>{!! @$metaArr['quick_link_title'] !!}</h2>
        </div>
        <div class="row g-lg-5 justify-content-center">
            @for($i=1;$i<=2;$i++)
            <div class="col-md-6 Col">
                <div class="bpt-care-card">
                    @if(@$metaArr['quick_link_box'.$i.'_img_type'] == "video")
                    <video autoplay loop muted playsinline>
                        <source src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" type="video/mp4">
                        <source src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>
                    @else
                    <img src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" alt="{!! @$metaArr['quick_link_box'.$i.'_title'] !!}" class="img-fluid bpt-img">
                    @endif
                    <h6>{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h6>
                    <p>{!! @$metaArr['quick_link_box'.$i.'_description'] !!}</p>
                    @if(@$metaArr['quick_link_box'.$i.'_btn_caption'] && @$metaArr['quick_link_box'.$i.'_btn_link'])
                    <a href="{!! @$metaArr['quick_link_box'.$i.'_btn_link'] !!}" class="bpt-btn" @if(@$metaArr['quick_link_box'.$i.'_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['quick_link_box'.$i.'_btn_caption'] !!}</a>
                    @endif
                </div>
            </div>
            @endfor
        </div>
    </div>
</section>
<!-- END AU-SERVICE SECTION -->

<!-- START BPT-QUESTIONS SECTION -->
<section class="bpt-question-sec sec-py">
    <div class="container">
        <div class="sec-title text-center">
            <strong>Questions</strong>
            <h2>{!! @$metaArr['question_title'] !!}</h2>
        </div>
        <p class="sec-subtitle">
            {!! @$metaArr['question_description'] !!}
        </p>
        @if(isset($metaArr['questions']) && is_array($metaArr['questions']) && count($metaArr['questions']) > 0)
        <div class="row">
            @foreach($metaArr['questions'] as $key => $questions)
            <div class="col-lg-6">
                <div class="audio-card">
                    <h5>{!! $key+1 !!}. {!! $questions['title'] !!}</h5>
                    <div class="audio green-audio-player">
                        <div class="play-pause-btn" style="cursor:pointer" data-id="{!! $key !!}">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
                                <path fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon">
                            </svg>
                        </div>
                        <div class="controls">
                            <span class="current-time" id="currentTime_{!! $key !!}">0:00</span>
                            <div class="slider" data-direction="horizontal">
                                <div class="progress" id="audio_progress_{!! $key !!}">
                                    <div class="pin" data-method="rewind"></div>
                                </div>
                            </div>
                            <span class="total-time">{!! date("i:s",$questions['duration']) !!}</span>
                        </div>
                        <div class="volume" style="display:none;">
                            <div class="volume-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path fill="#566574" fill-rule="evenodd"
                                        d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker">
                                </svg>
                            </div>
                            <div class="volume-controls hidden">
                                <div class="slider" data-direction="vertical">
                                    <div class="progress">
                                        <div class="pin" id="volume-pin" data-method="changeVolume"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <audio id="audio_{!! $key !!}" controls controlsList="nodownload" style="display:none">
                            <source src="{!! getCmsFileUrl(@$questions['audio']) !!}" type="audio/ogg">
                            <source src="{!! getCmsFileUrl(@$questions['audio']) !!}" type="audio/mpeg">
                        </audio>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>
<!-- END BPT-QUESTIONS SECTION -->

@includeIf('front.includes.elexio_form')
@includeIf('front.includes.faq')

@section('js')
<script>
$(document).on('click','.play-pause-btn', function () {
    $('audio').each(function(k,v){
        this.pause(); // Stop playing
        this.currentTime = 0; // Reset time
        $(".current-time").html("0:00");
        $("path").attr("d", "M18 12L0 24V0");
    });
    $(".play-pause-btn").removeClass("btnPlay");
    $(".play-pause-btn").removeClass("btnPause");
    // $(this).removeClass("btnPlay");
    $(this).addClass("btnPause");
    var id = $(this).data('id');
    var audioclip = document.getElementById("audio_"+id);
    audioclip.currentTime = 0;
    audioclip.play();
    audioclip.onended = function() {
        $("path").html('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24"><path fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon"></svg>');
        // $("path").attr("d", "M18 12L0 24V0");
        $(".current-time").html("0:00");
    };
    audioclip.addEventListener("timeupdate", function() {
        var currentTime = audioclip.currentTime;
        var duration = audioclip.duration;

        var percent = currentTime / duration * 100;
        $('#audio_progress_'+id).css('width',percent + '%');

        $("#currentTime_"+id).html(currentTime);

        var sec= new Number();
        var min= new Number();
        sec = Math.floor( currentTime );
        min = Math.floor( sec / 60 );
        min = min >= 10 ? min : '0' + min;
        sec = Math.floor( sec % 60 );
        sec = sec >= 10 ? sec : '0' + sec;

        // $("#total_duration").html(min + ":"+ sec);   //Id where i have to print the total duration of song.
        $("#currentTime_"+id).html(min + ":"+ sec);
    });
    // $(this).attr('d',"M0 0h6v24H0zM12 0h6v24h-6z");
    $(this).html('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24"><path fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" class="play-pause-icon"></svg>');
})

$(document).on('click','.btnPause', function () {
    var audioclip = document.getElementById("audio_"+$(this).data('id'));
    audioclip.pause();
    // $(this).attr('d',"M18 12L0 24V0");
    $(this).html('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24"><path fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon"></svg>');
    $(this).removeClass("btnPause");
    $(this).addClass("btnPlay");
})
</script>
@stop
@endsection