@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>
        .splide__track--draggable{
            padding: 0 !important;
        }
        #module {
            /*width: 500px;*/
            width: 96%;
        }

        #module div.collapse[aria-expanded="false"] {
            display: block ;
            height: 120px !important;
            overflow: hidden ;
        }
        #module div.collapse.show{
            height: 100% !important;
        }
        #module div.collapsing[aria-expanded="false"] {
            height: 50px ;
        }

        #module a.collapsed:after  {
            content: '+ More';
        }

        #module a:not(.collapsed):after {
            content: '- Less';
        }
        .page-link{
            background-color: unset !important;
            border: none !important;
            color: black !important;
        }
        .page-item:last-child .page-link{
            margin-top: -0.5rem !important;
            font-size: 2.3rem !important;
        }
        .page-item:first-child .page-link{
            margin-top: -0.5rem !important;
            font-size: 2.3rem !important;
        }

        .btn-link.focus, .btn-link:focus,.btn-link:hover{
            text-decoration: none !important;
        }
        .contain-div .accordions-all .card{
            border-bottom: none !important;
        }
    </style>
    @if(app('translator')->getLocale() == 'ar')
        <style>
            #module a.collapsed:after  {
                content: 'المزيد +' !important;
            }

            #module a:not(.collapsed):after {
                content: 'أقل -'!important;
            }
        </style>
    @endif
    <main class="page-main">
        <!-- Start Provider info Sec -->
        <section class="new-sec test-sec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="test-img">
                            <img src="@if(app('translator')->getLocale() == "ar") {{$package->IMAGE_URL_AR}} @else {{$package->IMAGE_URL}} @endif" alt="Provider Name">
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="test-content">
                            <h5 class="steps">
                                <a href="/" class="step">{{trans('web.home')}}</a>
                                <i class="ri-arrow-right-s-line"></i>
                                @if($package->IS_PACKAGE)
                                    <a href="/apackages" class="step">{{trans('web.packages')}}</a>
                                @else
                                    <a href="/itest" class="step">{{trans('web.test')}}</a>
                                @endif
                                <i class="ri-arrow-right-s-line"></i>
                                <a href="javascript:void(0)" @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif class="step">@if(app('translator')->getLocale() == "ar"){{$package->NAME_AR}}@else{{$package->NAME_EN}}@endif</a>
                            </h5>
                            <h2 class="title">
                                    @if(app('translator')->getLocale() == "ar"){{$package->NAME_AR}}@else{{$package->NAME_EN}}@endif

                            </h2>
                            @if(!empty($package->HOURS))
                                <div class="notes">
                                    <p class="note"><i class="ri-time-line"></i> {{trans('web.results_in')}} {{$package->HOURS}} {{trans('web.hours')}}</p>
                                </div>
                            @endif
                            <p class="desc">
                                    @if(app('translator')->getLocale() == "ar"){!! $package->DESC_AR !!}@else{!! $package->DESC_EN !!}@endif
                            </p>
                        </div>
                        <div class="test-form ml-n4">
                            @if(!empty($package->items) && count($package->items) > 0)
                                <div id="module" class="container" @if(!empty(session('qr')) || !empty(config('services.PROFILE_ID'))) style="display: none;"  @endif>
                                    <h5 class="contain-title">{{trans("web.package_contains")}}</h5>
                                    <div class="collapsed mt-3" id="about-lab-collapse" aria-expanded="false">
                                        <div class="contain-div">
                                            <div class="container">
                                                <div class="accordions-all">
                                                    <div class="accordion" id="accordionExample">
                                                        @php $c=1 @endphp
                                                        @foreach($package->items as $item)
                                                            <div class="card">
                                                                <div class="card-header" id="accordOne">
                                                                    <button class="btn-link btn-block btn-open" style=".btn-link:hover:" type="button" data-toggle="collapse" data-target="#a{{$c}}_about" aria-expanded="true">
                                                                        <div class="main-accordion">
                                                                            <span class="num"></span><span class="acc-name">
                                                                    @if(app('translator')->getLocale() == "ar")
                                                                                    {{$item->NAME_AR}}
                                                                                @else
                                                                                    {{$item->NAME_EN}}
                                                                                @endif
                                                                </span>
                                                                        </div>
                                                                        <span class="bi bi-chevron-down arrow-icon"></span>
                                                                    </button>
                                                                </div>
                                                                <div id="a{{$c}}_about" class="collapse" aria-labelledby="accordOne" data-parent="#accordionExample">
                                                                    <div class="card-body">
                                                                        @if(app('translator')->getLocale() == "ar")
                                                                            {{$item->SMART_DESC_AR}}
                                                                        @else
                                                                            {{$item->SMART_DESC_EN}}
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div> <!-- End Single Card -->
                                                            @php $c++; @endphp
                                                        @endforeach
                                                    </div> <!-- End Accordion Div -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                  
                                </div>

                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Provider info Sec -->

        <section class="new-sec companies-sec" style="background-color: #FAFAFC;">
            <div class="container">
                <div class="sec-header" style="text-align: center;">
                    <h2 class="sec-title">{{trans('web.labs')}} </h2>
                </div>
                <div class="sec-tabs">
                </div>
                <div class="companies">
                    <div class="row">
                        @foreach($package->labs as $lab)
                            <div class="col-sm-6 col-lg-4">
                                <div class="single-box">
                                    <div class="box-image">
                                        <img src="{{$lab->WEBSITE_LOGO}}" alt="Cmpany Name">
                                    </div>
                                    <div class="box-info">
                                        <h3><a class="company-name" style="color: black" @if(empty($lab->EXTERNAL_LINK)) href="/{{$lab->ID}}/lab?type=1" @else href="{{$lab->EXTERNAL_LINK}}" @endif>@if(app('translator')->getLocale() == "ar"){{$lab->WEBSITE_NAME_AR}}@else{{$lab->WEBSITE_NAME_EN}}@endif</a></h3>
                                        <div class="company-rate" style="display: none">
                                            <i class="ri-star-fill icon"></i>
                                            <i class="ri-star-fill icon"></i>
                                            <i class="ri-star-fill icon"></i>
                                            <i class="ri-star-fill icon"></i>
                                            <i class="ri-star-line icon"></i>
                                        </div>
                                        <p class="location" style="display: flow-root;">
                                            <span class="value"><i class="ri-map-pin-line icon"></i>@if(app('translator')->getLocale() == "ar"){{$lab->CITYSTATE->ARABIC_NAME}}@else{{$lab->CITYSTATE->ENG_NAME}}@endif<br></span>
                                            <span lat="{{$lab->GPS_LATITUDE}}" long="{{$lab->GPS_LONGITUDE}}" class="km location-info">145KM</span>
                                        </p>

                                        <div class="box-footer">
                                            <a style="border: none; color:white;" @if(empty($lab->EXTERNAL_LINK)) href="/{{$lab->ID}}/packages/{{ $package->ID }}" @else href="{{$lab->EXTERNAL_LINK}}" @endif class="btn mt-1">
                                                <span class="icon">&#10230;</span>
                                                {{trans("web.book_now")}}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        @endforeach

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


        @include('still-have-question')
    </main>
@endsection