@extends('layouts.frontend')
@section('content')
<main>

<section class="banner-back-img-howto">
    <div class="inner-main-img">
        <div class="container">
            <div class="inner-banner-comn">
                <h1>{{ GetMetaData('page_title','how-to') }}</h1>
            </div>
        </div>
    </div>
</section>

<section class="comn-padd">
    <div class="container">
        <div class="text-how-to">
            <h4>{{ GetMetaData('title',$page_type) }}</h4>
            {!! GetMetaData('description',$page_type) !!}
        </div>

        <div class="video-sec">
            <div class="row row-gap-3">
                @if(GetMetaData('video1',$page_type))
                <div class="col-sm-6 col-md-4">
                    <div class="inner-video-one">
                        <div class="video-wrapper">
                            <div class="video-container" id="video-container1">
                                <figure>
                                {{-- <img id="display-image" src="{{  asset('storage/'.GetMetaData('image','how-to')) ?? asset('admin/images/blog.png') }}" alt="How-to Image"> --}}
                                <video id="video1" preload="metadata" controls>
                                    <source src="{{ asset('storage/'.GetMetaData('video1',$page_type)) }}" type="video/mp4">
                                </video>
                                </figure>

                                <div class="play-button-wrapper">
                                    <div title="Play video" class="play-gif" id="circle-play-b1">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @if(GetMetaData('video2',$page_type))
                <div class="col-sm-6 col-md-4">
                    <div class="inner-video-one">
                        <div class="video-wrapper">
                            <div class="video-container" id="video-container2">
                                <figure>
                                {{-- <img id="display-image" src="{{  asset('storage/'.GetMetaData('image2','how-to')) ?? asset('admin/images/blog.png') }}" alt="How-to Image"> --}}
                                <video id="video2" preload="metadata" controls>
                                    <source src="{{ asset('storage/'.GetMetaData('video2',$page_type)) }}" type="video/mp4">
                                </video>
                                </figure>

                                <div class="play-button-wrapper">
                                    <div title="Play video" class="play-gif" id="circle-play-b2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @if(GetMetaData('video3',$page_type))
                <div class="col-sm-6 col-md-4">
                    <div class="inner-video-one">
                        <div class="video-wrapper">
                            <div class="video-container" id="video-container3">
                                <figure>
                                {{-- <img id="display-image" src="{{  asset('storage/'.GetMetaData('image3','how-to')) ?? asset('admin/images/blog.png') }}" alt="How-to Image"> --}}
                                <video id="video3" preload="metadata" controls>
                                    <source src="{{ asset('storage/'.GetMetaData('video3',$page_type)) }}" type="video/mp4">
                                </video>
                                </figure>

                                <div class="play-button-wrapper">
                                    <div title="Play video" class="play-gif" id="circle-play-b3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
</main>
@endsection