@extends('frontend.layouts.master')
@section('content')
    @use('App\Helpers\Helpers')
    @php
        $content = $content = Helpers::getLandingPageContent();
    @endphp
    <section class="section-space pt-0 mofi-page-section layout bg-white overflow-hidden">
        <div class="container-fluid fluid-space">
            <div class="title">
                <h5 class="sub-title lh-1">{{ $content['home']['cruds']['sub_title'] }}</h5>
                <h2>{{ $content['home']['cruds']['title'] }}</h2>
                <p>{{ $content['home']['cruds']['description'] }}</p>
            </div>

            <div class="container-fluid main-page">
                <div class="row gy-4 justify-content-center">
                    @forelse ($content['home']['cruds']['crud_banners'] ?? [] as $cruds)
                        <div class="col-xl-4 col-lg-4 col-md-6 demo-content fadeInUp wow">
                            <div class="mofi-demo-img btn-light1-{{ $cruds['bg_color'] }}">
                                <div class="overflow-hidden">
                                    <a href="{{ $cruds['url'] }}" target="_blank">
                                        <div class="laravel-content">
                                            <h3>{{ $cruds['title'] }}</h3>
                                            <p>{{ $cruds['description'] }}</p>
                                        </div>
                                        <div class="tilt-image">
                                            <img class="img-fluid js-tilt" src="{{ asset($cruds['image']) }}" alt="project"
                                                data-tilt-perspective='300', data-tilt-speed='400', data-tilt-max='5'>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>No Data Found</p>
                    @endforelse
                </div>
                <div class="show-more btn"></div>
            </div>
    </section>
    <section class="section-space mofi-demo-section layout overflow-hidden">
        <div class="container-fluid">
            <div class="title">
                <h5 class="sub-title lh-1">{{ $content['home']['dashboard']['sub_title'] }}</h5>
                <h2>{{ $content['home']['dashboard']['title'] }}</h2>
                <p>{{ $content['home']['dashboard']['description'] }}</p>
            </div>
        </div>
        <div class="container-fluid fluid-space layout-sec">
            <div class="col-xxl-12 layout-wrap demo-imgs">
                <div class="layout-wrapper">
                    <div class="swiper layout-slider">
                        <div class="swiper-wrapper">
                            @forelse ($content['home']['dashboard']['banners'] ?? [] as $dashboard)
                                <div class="swiper-slide">    
                                    <div class="col demo-content fadeInUp wow">
                                        <div class="mofi-demo-img">
                                            <div class="overflow-hidden"><a href="{{ $dashboard['url'] }}" target="_blank"><img
                                                        class="img-fluid" src="{{ asset($dashboard['image']) }}" alt="default"></a></div>
                                        </div>
                                        <div class="title-wrapper">
                                            <h3 class="theme-name mb-0"> <a href="{{ $dashboard['url'] }}"
                                                    target="_blank">{{ $dashboard['title'] }} </a></h3>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p>No Data Found</p>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-space app-section overflow-hidden bg-white" id="applications">
        <div class="container-fluid">
            <div class="title">
                <h5 class="sub-title lh-1">{{ $content['application']['sub_title'] }}</h5>
                <h2>{{ $content['application']['title'] }} </h2>
                <p>{{ $content['application']['description'] }} </p>
            </div>
        </div>
        <div class="container demo-section app-sec">
            <div class="row demo-block">
                @forelse ($content['application']['banners'] ?? [] as $app)
                    <div class="col-lg-4 col-sm-6 wow pulse">
                        <div class="demo-box">
                            <div class="img-wrraper"><a href="{{ $app['url'] }}" target="_blank"><img class="img-fluid"
                                        src="{{ asset($app['image']) }}" alt=""></a>
                            </div>
                            <div class="demo-detail">
                                <div class="demo-title">
                                    @if(isset($app['title']))
                                    <a class="btn btn-primary" href="{{ $app['url'] }}"
                                        target="_blank">{{ $app['title'] }}</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>No Data Found</p>
                @endforelse
            </div>
            <div class="show-more btn"></div>
        </div>
    </section>
    <section class="section-space framework-section overflow-hidden" id="frameworks">
        <div class="container">
            <div class="title">
                <h5 class="sub-title lh-1">{{ $content['frameworks']['sub_title'] }}</h5>
                <h2>{{ $content['frameworks']['title'] }}</h2>
                <p>{{ $content['frameworks']['description'] }}</p>
            </div>
        </div>
        <div class="container">
            <div class="col-sm-12">
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active framework-sec" id="html" role="tabpanel" aria-labelledby="html-tab">
                        <div class="row g-xxl-5 g-4">
                            @forelse ($content['frameworks']['banners'] ?? [] as $framework)
                                <div class="col-xxl-4 col-md-6 slideInUp wow">
                                    <div class="framework-box">
                                        <div class="frame-icon"> <img src="{{ asset($framework['image']) }}" alt=""></div>
                                        <div class="frame-details">
                                            <h5>{{ $framework['title'] }}</h5>
                                            <p class="f-light">{{ $framework['description'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p>No Data Found</p>
                            @endforelse
                        </div>
                        <div class="show-more btn"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-space boxed customer-support overflow-hidden">
        <div class="container">
            <div class="col-xxl-12 customer-wrap">
                <div class="customer-support-wrapper">
                    <div class="swiper support-slider">
                        <div class="swiper-wrapper">
                            @forelse ($content['frameworks']['customer_support'] ?? [] as $support)
                                <div class="swiper-slide">
                                    <div class="col zoomIn wow">
                                        <div class="customer-wrapper pt-0">
                                            <div class="customer-box"> <img src="{{ asset($support['svg_img']) }}" alt="">
                                                <h6 class="f-light mb-0 mt-2">{{ $support['title'] }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <p>No Data Found</p>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="line zoomIn wow"> <img class="img-fluid"
                        src="{{ asset($content['frameworks']['support_line_img']) }}" alt=""></div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-space feature-section overflow-hidden" id="core feature">
        <div class="container-fluid">
            <div class="title">
                <h5 class="sub-title lh-1">{{ $content['core_feature']['sub_title'] }}</h5>
                <h2>{{ $content['core_feature']['title'] }}</h2>
                <p>{{ $content['core_feature']['description'] }}</p>
            </div>
        </div>
        <div class="container feature-sec">
            <div class="row g-4">
                @forelse ($content['core_feature']['banners'] as $core)
                    <div class="col-xxl-3 col-lg-4 col-sm-6 slideInUp wow">
                        <div class="feature-box">
                            <div class="feature-icon"><img src="{{ asset($core['svg_icon']) }}" height="24px" width="24px" alt=""></div>
                            <h5>{{ $core['title'] }}</h5>
                            <p class="mb-0 f-light">{{ $core['description'] }}</p>
                        </div>
                    </div>
                @empty
                    <p>No Data Found</p>
                @endforelse
            </div>
            <div class="show-more btn"></div>
        </div>
    </section>
    <section class="faq-section section-space overflow-hidden" id="faq">
        <div class="container-fluid">
            <div class="title">
                <h5 class="sub-title lh-1">{{ $content['core_feature']['design_assortment']['sub_title'] }}</h5>
                <h2>{{ $content['core_feature']['design_assortment']['title'] }}</h2>
                <p>{{ $content['core_feature']['design_assortment']['description'] }}</p>
            </div>
        </div>
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-lg-4 col-12 faq-sec-con custom-scrollbar">
                  @forelse ( $content['core_feature']['design_assortment']['content'] ?? [] as $design)
                    <div class="d-flex">
                        <div class="flex-shrink-0"><img class="img-30 img-fluid"
                                src="{{ asset($design['image']) }}" alt="Education"></div>
                        <div class="flex-grow-1">
                            <h3>{{ $design['main_text'] }}</h3>
                            <p class="mb-0">{{ $design['sub_text'] }}</p>
                        </div>
                    </div>
                  @empty
                    <p>No Data Found</p>                    
                  @endforelse
                </div>
                <div class="col-lg-8 col-12">
                    <div class="faq-img"> 
                      <img class="img-fluid"
                            src="{{ asset($content['core_feature']['design_assortment']['image']) }}" alt="faq">
                        <div class="faq-bg"> 
                          <img class="img-fluid"
                                src="{{ asset('/frontend/assets/images/landing/faq/1.png') }}" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection