@extends('layouts.main')

@section('content')

    <section class="py-4 py-md-3 banner-c d-none d-md-block" >
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="text-white f-sm-30 f-30 fw-500 mb-0">{{ $cmsPage->Title }}</h1>
                </div>
                <div class="col-md-6 text-end"></div>
            </div>
        </div>
    </section>

    <section class="breadcrumb pt-4 custom_breadcrumb">
        <div class="container">
            <div class="row align-items-center">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}" role="button" tabindex="0"><i class="fa fa-home"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $cmsPage->Title }}</li>
                </ol>
            </div>
        </div>
    </section>

    <section class="padding-sec  pb-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12 left_Sec">
                    <div class="left_Sec_content text-justify overview-main-content" id="overview">
                        <h2>{{ $cmsPage->Title }}</h2>

                        {!! $cmsPage->Description !!}
                    </div>

                    @if(count($cmsPage->accordion))
                        <div class="cms-tabs mt-4">
                            <ul class="nav nav-pills cms-tabs flex-nowrap">
                                @foreach($cmsPage->accordion as $accordion)
                                    <li class="nav-item">
                                        <a class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="pill" href="#{{ trim(strtolower($accordion->TabName)) }}">
                                            {{ $accordion->TabName }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                            <div class="tab-content px-0 py-md-4  cms-tab-content">
                                @foreach($cmsPage->accordion as $accordionContent)
                                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="{{ trim(strtolower($accordionContent->TabName)) }}">
                                        {!! $accordionContent->TabContent !!}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!--  Certificate Slider -->
                    @if(count($cmsPage->media))
                        <div class="left_Sec_content" id="overview">
                            <h2>Certificates</h2>
                        </div>

                        <div class="cerificate-slider-wrappwer">
                            <div class="swiper certificate-slider py-4 px-1 pb-5">
                                <div class="swiper-wrapper">
                                    @foreach($cmsPage->media as $cmsPhoto)
                                        <div class="swiper-slide">
                                            <a href="{{ $cmsPhoto->url }}" class="d-block no-underline certificate-wrap-box" data-fancybox="certificate">
                                                <img src="{{ $cmsPhoto->url }}">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="swiper-button-next"><i class="fa-solid fa-angle-right"></i></div>
                                <div class="swiper-button-prev"><i class="fa-solid fa-angle-left"></i></div>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </section>

@stop

@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
        Fancybox.bind('[data-fancybox="certificate"]', {
            hideScrollbar: false,
            Dots: false,
        });
    </script>
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
    <style>
        #filterme{display: flex!important;}
        .select-input-news {margin:5px;}
        .fancybox__container{z-index: 9999;}
    </style>
@endsection