@extends('layout.mainlayout')

@section('content')
    @php
        $locale = app('translator')->getLocale() ?? 'en';
            $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';

            if (isset($global_symbol['from_website']) && $global_symbol['from_website']){
                if ($locale == 'en'){
                  if(isset($global_symbol['is_html']) && $global_symbol['is_html']){
                      $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';
                  }elseif($global_symbol['currency']){
                      $currency_code = $global_symbol['currency_ar'];
                  }
                }else{
                   if(isset($global_symbol['is_html_ar']) && $global_symbol['is_html_ar']){
                      $currency_code = '<img src="/img/sar.svg" alt="SAR" style="height: 1em; width: auto; display: inline-block; vertical-align: middle;">';
                  }elseif($global_symbol['currency']){
                      $currency_code = $global_symbol['currency_ar'];
                  }
                }
            }
    @endphp
    <style>
        .banner-image {
            width: 100%;
            height: auto;
            max-height: 600px;
        }
        .breadcrumb-blog{
            gap: 5px;
        }
        .blog-tags{
            gap: 10px;
        }
        .blog-tags .tag{
            font-size: 16px;
            padding: 2px 20px 2px 20px;
            line-height: 30px;
        }
        .blog-container .row{
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .preefs .preef{
            font-size: 16px;
        }
        .blog-description{
            color: #022C3C;
            text-align: left;
        }
        .blog-description-tags{
            gap: 10px;
            line-height: 30px;
        }
        .blog-description-tags .tag{
            display: inline-block;
            font-size: 16px;
            padding: 2px 20px 2px 20px;
            border-radius: 2rem;
            border: 1px solid var(--blazma-primary);
            color: var(--blazma-primary);
            margin-right: .3rem;
            margin-bottom: .4rem;
        }
        .preefs .preef:not(:last-child)::after{
            /*content: none;*/
        }
        .red-dot {
            width: 5px;
            height: 5px;
            background: linear-gradient(140.37deg, var(--blazma-pastel) -59.16%, var(--blazma-primary) 49.95%);
            border-radius: 50%;
            display: inline-block;
            margin: 0 1rem;
            vertical-align: middle;
        }

        .other-blogs .col-6:first-child h6, .other-blogs .col-6:last-child h6{
            color: #A5A6AA;
            line-height: 24px;
            letter-spacing: 0.1em;
            font-size: 14px;
        }
        .other-blogs .col-6:first-child h5, .other-blogs .col-6:last-child h5{
            line-height: 28px;
            font-weight: bold;
        }

        .other-blogs .col-6:first-child{
            text-align: left;
        }
        .other-blogs .col-6:last-child{
            text-align: right;
        }
        .other-blogs a:hover{
            text-decoration: none;
        }
        .other-blogs h5:hover{
            color: var(--blazma-text) !important;
        }
        a{
            color: var(--blazma-primary);
            text-decoration: none;
        }
        html[dir="rtl"]{
            .blog-description{
                text-align: right;
            }
            .other-blogs .col-6:first-child{
                text-align: right;
            }
            .other-blogs .col-6:last-child{
                text-align: left;
            }
        }
        .splide__arrow {
            background: transparent;
            border: none;
            font-size: 24px;
            color: #1C2129;
            transition: transform 0.3s ease;
            margin: 0 10px;

        }
        .splide__pagination{
            display: none;
        }

        .splide__arrow:hover {
            transform: scale(1.1);
        }

        .tests-sec .splide__arrows {
            display: flex;
            justify-content: left;
            align-items: center;
        }

        .tests-sec .splide__arrow {
            transform: translateY(0);
            position: static;
            background-color: transparent;
            font-size: 30px;
            margin: 0 .3rem;
            border-radius: 0;
        }

        .tests-sec .single-box{
            min-height: 277px;
        }
        .tests-sec .single-box{
            border-radius: 25px;
        }

        .tests-sec .single-box img{
            border-radius: 25px;
            height: 120px;
        }

        .single-box {
            background: #fff;
            border-radius: 25px;
            box-shadow: 0px 4px 20px 0px #0000000D;
            padding: 20px;
            text-align: center;
        }

        .tests-sec .single-box {
            /*min-height: auto;
            padding: 10px;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;*/
            max-width: 280px;
            height: 277px;
            border-radius: 25px;
            border: 1px solid #DADADA;
            padding: 25px 20px;
            transition: transform 0.3s ease-in-out;
        }

        .box-image img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 25px;
        }

        .box-title {
            font-size: 20px;
            font-weight: bold;
            margin: 15px 0;
            color: #022C3C;
        }

        b{
            font-family: 'sans' !important;
        }

        .anchor-single-box:hover{
            text-decoration: none;
        }

        .tests-sec .single-box:hover {
            /*transform: translateY(-5px);*/
            border: 1px solid #DADADA;
            background: #fff;
        }

        #tests-slider{
            width: 80%;
            transform: translateX(22%);
        }

        .testimonials-sec{
            clip-path: none;
            background: #F7F7F9;
            gap: 40px;
            padding: 80px 0;
            max-height: 700px;
        }

        .arrow-row{
            margin: 40px 0 80px 0;
        }

        .mobile-center {
            text-align: start;
        }

        .testimonials-sec .card-img-top{
            margin-bottom: 20px;
        }

        @media (max-width: 575.98px) {
            .mobile-center {
                text-align: center !important;
                padding: 0 1rem;
            }
            #tests-slider{
                width: 100%;
                transform: translateX(0);
                padding: 2px 0;
            }
            .arrows-column {
                display: none;
            }
            .arrow-row{
                margin: 0;
            }
            .tests-sec .whats_up_reservation_header .text-long {
                display: inline;
            }
            .tests-sec .whats_up_reservation_header .text-short {
                display: none;
            }

            .testimonials-sec{
                padding: 60px 0 60px 21px;
            }
        }

        .testimonials-sec .splide__slide{
            padding:  5px;
            flex: 0 0 auto;
            width: auto !important;
        }

        .note.done, .note.done i{
            font-size: 14px
        }

        .note i{
            margin-right: 4px;
        }

        html[dir="rtl"] .note i{
            margin-left: 4px;
            margin-right: 0 !important;
        }

        #tests-slider .card-title{
            font-size: 16px;
            font-weight: 300;
            color: #1C2129;
            text-align: start;
            font-style: normal;
            line-height: 27.2px;
            margin-bottom: 10px;
        }

        #tests-slider .card-body div:first-of-type{
            margin-bottom: 5px;
        }

        #tests-slider .price{
            flex-direction: row;
            align-items: center;
            padding: 0;
            gap: 9.8px;
        }

        #tests-slider .price span:first-of-type{
            font-style: normal;
            font-weight: 300;
            font-size: 14px;
            line-height: 22px;
            text-decoration-line: line-through;
            color: #1C2129;
        }
        #tests-slider .price span:nth-child(1){
            font-style: normal;
            font-weight: 300;
            font-size: 16px;
            line-height: 160%;
            color: var(--blazma-primary);
        }

        .splide__list {
            display: flex;
            align-items: stretch;
            gap: 25px;
        }

        .card.single-box {
            width: 280px;
            /*flex: 1 1 auto;*/
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: transparent;
            border-radius: 25px;
            box-shadow: 0px 4px 20px 0px #0000000D;
            padding: 20px;
            transition: transform 0.3s ease-in-out;
            text-align: center;
        }

        .card-body{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .price{
            margin-top: auto;
        }
        .card.single-box img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 25px;
        }

        @media (max-width: 768px) {

            .blog-tags .tag,
            .blog-description-tags .tag{
                padding: .2rem .8rem;
            }
            .breadcrumb-blog{
                padding-left: 30px !important;
                padding-right: 30px !important;
            }

            .blog-description{
                margin: 0 auto;
                text-align: justify !important;
            }
            .blog-title{
                font-size: 2rem;
                padding: 0 4px;
            }
            .blog-description-tags{
                justify-content: center;
            }
            .testimonials-sec .splide__slide{
                padding:  5px;
            }
            .testimonials-sec .container .row{
                margin: 0;
            }

            .card.single-box{
                width: 215px;
            }
            .splide__list{
                gap: 10px;
            }
        }
    </style>

    <div class="container-fluid p-0 mb-5">
        <img src="{{--/img/blogs/banner-1.png--}}{{$blog->BANNER}}" class="img-fluid banner-image" alt="Banner">
    </div>

    <div class="container d-flex flex-column align-items-center text-center mb-5 blog-container">
        <div class="row">
            <div class="col-md-12">
                <h6 class="steps d-flex p-1 text-uppercase breadcrumb-blog">
                {{trans('web.home')}}
                <i class="{{app('translator')->getLocale() == 'ar' ? 'ri-arrow-left-s-line' : 'ri-arrow-right-s-line'}}"></i>
                {{trans('web.blog')}}
                <i class="{{app('translator')->getLocale() == 'ar' ? 'ri-arrow-left-s-line' : 'ri-arrow-right-s-line'}}"></i>
                <a href="javascript:void(0)" style="color: var(--blazma-primary)" class="step">@if(app('translator')->getLocale() == "ar"){{$blog->TITLE_AR}}@else{{$blog->TITLE_EN}}@endif</a>
            </h6>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                @php
                    $tags = explode(',', app('translator')->getLocale() == 'ar' ? $blog->TAGS_AR : $blog->TAGS_EN);
                @endphp
                <div class="blog-tags d-flex">
                    @foreach ($tags as $tag)
                        <span class="tag">{{ $tag }}</span>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h1 class="blog-title font-weight-bold">@if(app('translator')->getLocale() == "ar"){{$blog->TITLE_AR}}@else{{$blog->TITLE_EN}}@endif</h1>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center">
                    <span>{{trans('web.by')}} {{ app('translator')->getLocale() == 'ar' ? $blog->AUTHOR_AR : $blog->AUTHOR_EN }}</span>
                    <span class="red-dot"></span>
                    <span>{{ $blog->CREATED_DATE }}</span>
                </div>
            </div>
        </div>

        <div class="row py-md-5 py-4 px-4">
            <div class="col-md-12 blog-description">
                {!! app('translator')->getLocale() == 'ar' ? $blog->DESCRIPTION_AR : $blog->DESCRIPTION_EN !!}
            </div>
        </div>
    </div>

    @if(count($tests) > 0)
        <section class="tests-sec testimonials-sec d-flex flex-column" style="direction: ltr">
                    <div class="container py-1 p-0" @if(app('translator')->getLocale() == 'ar') style="direction: rtl" @endif>
                        <div class="row flex-column flex-lg-row justify-content-center text-center text-lg-start mb-2">
                            <div class="col-12 col-lg-8 mb-1 mb-lg-0 order-1 align-content-center mobile-center">
                                <div class="d-flex justify-content-center justify-content-lg-start">
                                    {!! app('translator')->getLocale() == 'ar' ? $blog->HIGHLIGHT_TITLE_AR : $blog->HIGHLIGHT_TITLE_EN !!}
                                </div>
                            </div>
                            <div class="col-12 col-lg-4 order-3 order-lg-2 align-content-center">
                                <div class="d-flex justify-content-center justify-content-lg-end">
                                    @include('partials.whatsapp-btn')
                                </div>
                            </div>
                            <div class="col-12 order-2 order-lg-3 mt-1 mt-lg-0">
                                <div class="text-start mobile-center">
                                    {!! app('translator')->getLocale() == 'ar' ? $blog->SUB_HIGHLIGHT_TITLE_AR : $blog->SUB_HIGHLIGHT_TITLE_EN !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tests-slider" class="splide">
                        <div class="splide__track">
                            <div class="splide__list">
                                @foreach($tests as $test)
                                    <div class="splide__slide" @if(app('translator')->getLocale() == 'ar') style="direction: rtl" @endif>
                                        <a
                                                @if(!empty($test->IS_PACKAGE))
                                                    href="/package/{{$test->ID}}/service{{!empty(app('translator')->getLocale()) ? '?lang='.app('translator')->getLocale().'&utm_source=Blogs&utm_medium=onpage' : '?utm_source=Blogs&utm_medium=onpage' }}"
                                                @else
                                                    href="/test/{{$test->ID}}/service{{!empty(app('translator')->getLocale()) ? '?lang='.app('translator')->getLocale().'&utm_source=Blogs&utm_medium=onpage' : '?utm_source=Blogs&utm_medium=onpage' }}"
                                                @endif
                                                class="anchor-single-box">
                                            {{--<a @if(!empty($test->IS_PACKAGE)) href="/package/{{$test->ID}}/service{{!empty(app('translator')->getLocale()) ? '?lang='.app('translator')->getLocale() : '' }}" @else href="/test/{{$test->ID}}/service{{!empty(app('translator')->getLocale()) ? '?lang='.app('translator')->getLocale() : '' }}" @endif class="anchor-single-box">--}}

                                            <div class="card single-box">
                                                <img class="card-img-top" src="@if(app('translator')->getLocale() == "ar") {{$test->IMAGE_URL_AR}} @else {{$test->IMAGE_URL}} @endif" alt="Test">
                                                <div class="card-body p-0">
                                                    <div class="d-flex align-items-center">
                                                        <h6 class="box-tag m-0"><span class="note done mb-1 d-flex align-items-baseline"><i class="fas fa-check-circle"></i> {{trans('web.home_visit')}}</span> <span class="package_tests_count">{{ $test->IS_PACKAGE ? $test->items->count() . ' '. trans('web.package_tests') : ''}}</span></h6>
                                                    </div>
                                                    <h5 class="card-title">@if(app('translator')->getLocale() == "ar"){{$test->NAME_AR}}@else{{$test->NAME_EN}}@endif</h5>
                                                    <div class="d-flex justify-content-start align-items-center price">
                                                        @if(!empty($test->PRICE))
                                                            @if(!empty($test->OLD_PRICE)) <span style="text-decoration: line-through; color: black" class="num">{{$test->OLD_PRICE}} {!! $currency_code !!}</span> @endif
                                                            <span class="num"  style="filter: invert(45%) sepia(87%) saturate(1624%) hue-rotate(307deg) brightness(97%) contrast(98%);">{{$test->PRICE}} {!! $currency_code !!}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="row arrow-row">
                            <div class="col-md-6 arrows-column">
                                <div class="splide__arrows">
                                    <button class="splide__arrow splide__arrow--prev">&#10229;</button>
                                    <button class="splide__arrow splide__arrow--next">&#10230;</button>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 d-flex justify-content-center">
                                @include('partials.tabby-tamara')
                            </div>
                        </div>
                    </div>
        </section>
    @endif
    <div class="container d-flex flex-column align-items-center text-center mb-5 blog-container">
        <div class="row py-md-5 py-4 px-4">
            <div class="col-md-12 blog-description">
                {!! app('translator')->getLocale() == 'ar' ? $blog->SECOND_DESCRIPTION_AR : $blog->SECOND_DESCRIPTION_EN !!}
            </div>
        </div>

        <div class="row w-100">
            <div class="col-md-12">
                @php
                    $tags = explode(',', app('translator')->getLocale() == 'ar' ? $blog->TAGS_AR : $blog->TAGS_EN);
                @endphp
                <div class="blog-description-tags d-flex">
                    @foreach ($tags as $tag)
                        @if(count($tags) == 1 && empty($tag))
                            @continue
                        @endif
                            <span class="tag">{{ $tag }}</span>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="row justify-content-between w-100 py-5 other-blogs">
            <div class="col-6">
                @if(!empty($previousBlog))
                    <a href="/blogs/{{$previousBlog->ID}}">
                        <h6 class="text-uppercase">{{trans('web.previous')}}</h6>
                        <h5>@if(app('translator')->getLocale() == "ar"){{$previousBlog->TITLE_AR}}@else{{$previousBlog->TITLE_EN}}@endif</h5>
                    </a>
                @endif
            </div>
            <div class="col-6">
                @if(!empty($nextBlog))
                    <a href="/blogs/{{$nextBlog->ID}}">
                        <h6 class="text-uppercase">{{trans('web.next')}}</h6>
                        <h5>@if(app('translator')->getLocale() == "ar"){{$nextBlog->TITLE_AR}}@else{{$nextBlog->TITLE_EN}}@endif</h5>
                    </a>
                @endif
            </div>
        </div>
    </div>


@include('still-have-question')
@endsection
@if(count($tests) > 0)
    @section('frontend_scripts')

    <script>
        $(document).ready(function() {

            var isRTL = lang == 'ar';
            var splideTestimonials = new Splide('#tests-slider', {
                //direction: isRTL ? 'rtl' : 'ltr',
                type: 'slide',
                perPage: 4.3,
                perMove: 1,
                //trimSpace: false,
                focus:0,
                trimSpace: 'move',
                pagination: false,
                arrows: true,
                padding: 0,
                breakpoints: {
                    767: {
                        perPage: 1.3,
                        padding: 0,
                    },
                    991: {
                        perPage: 2,
                        padding: 50,
                    },
                    1366: {
                        perPage: 4,
                        padding: 50,
                    }
                },
            });

            splideTestimonials.mount();

        })


        /*document.addEventListener('DOMContentLoaded', function() {
            new Splide('#tests-slider', {
                type: 'loop',
                perMove: 1,
                breakpoints: {
                    600: {
                        perPage: 3,
                    },
                    1000: {
                        perPage: 5,
                    },
                },
                arrows: true,
                pagination: true,
            }).mount();
        });*/
    </script>

@endsection
@endif