@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>
        .owl-nav {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .owl-prev {
            order: 2;
        }

        .owl-next {
            order: 1;
        }
        .card-selected .content{
            background: #e35a80;
            color: white;
        }

        .owl-carousel .owl-nav button.owl-next,
        .owl-carousel .owl-nav button.owl-prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .owl-carousel .owl-nav button.owl-prev {
            left: -30px;
        }

        .owl-carousel .owl-nav button.owl-next {
            right: -30px;
        }

    </style>
    <main class="page-main">
        <!-- Start Breadcrubms Section -->
        <section class="new-sec breadcrumbs-sec">
            <div class="container">
                <h3 class="page-title">{{trans("web.offers")}}</h3>
                <i class="ri-arrow-down-s-line icon"></i>
            </div>
        </section>
            <section class="new-sec filter-sec" style="padding: 2rem 0;">
                <div class="container">
                    <div class="sec-form">
                        <form class="form" action="#tests">
                            <div>
                                <div class="form-group">
                                    <input type="text" id="search-input" class="form-control" placeholder="{{trans("web.search_in")}}" name="q" value="{{$q}}">
                                    <button id="search" class="btn search-btn" type="submit">
                                        <i class="ri-search-line"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    @if(!empty($categories) && count($categories) > 0)
                        <div class="row" style="margin-bottom: 20px">
                            <div class="col">
                                <div class="date-side">
                                    <div class="category-slider owl-carousel" style="margin-top:20px;">
                                        <a style="color: #1F3E61" href="?#booking-header" >
                                            <div class="card item @if(empty($category_id)) card-selected @endif">
                                                <div class="content" style="">
                                                    <p style="text-align: center;margin: 10px 0;">{{trans("web.all")}}</p>

                                                </div>
                                            </div>
                                        </a>
                                        @foreach($categories as $category)
                                            <a style="color: #1F3E61" href="?q={{$q}}&category_id={{$category->ID}}#booking-header" >
                                                <div id="{{$category->ID}}" class="card item @if(!empty($category_id) && $category_id == $category->ID) card-selected @endif">
                                                    <div class="content" style="">
                                                        <p style="text-align: center;margin: 10px 0;">@if(app('translator')->getLocale() == "ar"){{$category->NAME_AR}}@else{{$category->NAME_EN}}@endif</p>

                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach

                                    </div>
                                </div>
                            </div> <!-- End Single Column (Date Side) -->
                        </div>
                    @endif
                </div>
            </section>
        <section class="new-sec tests-sec">
            <div class="container">
                <div class="tests">
                    <div class="row">
                        @foreach($offers as $package)
                            <div class="col-sm-6 col-lg-4 clm">
                                <div class="single-box">
                                <a @if(empty($package->IS_PACKAGE) && $package->TEST_CATEGORY != 10) href="/{{$package->ID}}/package-providers?type=1" @else href="/{{$package->ID}}/package-details" @endif >
                                    <div class="box-image">
                                        <img src="@if(app('translator')->getLocale() == "ar") {{$package->IMAGE_URL_AR}} @else {{$package->IMAGE_URL}} @endif" alt="Test">
                                    </div>
                                    <div class="box-content">
                                    @if(!empty($package->labs->first()))
                                        <div class="d-flex align-items-center justify-content-between" style="margin-bottom: 1rem;">
                                            <div class="d-flex align-items-center">
                                                <img style="width:25px;height:25px;object-fit:cover;" src="{{!empty($package->labs->first()) ? $package->labs->first()->WEBSITE_LOGO : ''}}"></img>
                                                <p style="font-size:13px;color:black;margin-bottom: 0;">{{!empty($package->labs->first()) ? !empty(app('translator')->getLocale()) && app('translator')->getLocale() == "ar" ? $package->labs->first()->NAME_AR : $package->labs->first()->NAME_EN : ''}}</p>
                                            </div>
                                            <div>
                                                <p style="font-size:13px;color:black;margin-bottom: 0;">{{!empty($package->labs->first()) ? round($package->labs->first()->distance): ''}} {{!empty(app('translator')->getLocale() && app('translator')->getLocale() == "ar") ?'كم':'KM'}}</p>
                                            </div>
                                        </div>
                                    @endif
                                        {{--<h6 class="box-tag">{{ $package->IS_PACKAGE ? trans('web.packages') : trans('web.test')}}</h6>--}}
                                        <p style="color: #E35A80">{{$package->TEST_COUNT}} {{trans('web.test')}}</p>
                                        <h3 class="box-title">@if(app('translator')->getLocale() == "ar"){{$package->NAME_AR}}@else{{$package->NAME_EN}}@endif</h3>
                                        <p class="box-desc">
                                            @if($package->TEST_CATEGORY == 10)
                                                @if(app('translator')->getLocale() == "ar"){{$package->SMART_DESC_AR}}@else{{$package->SMART_DESC_EN}}@endif
                                            @else
                                                @if(app('translator')->getLocale() == "ar"){!!$package->DESC_AR!!}@else{!!$package->DESC_EN!!}@endif
                                            @endif
                                        </p>
                                    </div>
                                    <div class="box-footer">
                                        @if(empty(config('services.PROFILE_ID')))<h5 @if(app('translator')->getLocale() == "ar")style="direction: rtl;"@endif class="price">@if(!empty($package->PRICE)) @if(!empty($package->OLD_PRICE))<span class="mr-1" style="text-decoration-line: line-through;">{{$package->OLD_PRICE}} {!! $currency_code !!}</span>@endif {{$package->PRICE}} {!! $currency_code !!}@endif</h5>@endif
                                        <a @if(empty($package->IS_PACKAGE) && $package->TEST_CATEGORY != 10) href="/{{$package->ID}}/package-providers?type=1" @else href="/{{$package->ID}}/package-details" @endif class="btn cta-btn">
                                            <span class="icon">&#10230;</span> {{trans("web.book_now")}}
                                        </a>
                                    </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        <!-- End Tests Section -->
        <!-- Start CTA Section -->
        @include('still-have-question')
        <!-- End CTA Section -->
    </main>
@endsection