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

        .owl-prev {
            order: 2;
        }

        .owl-next {
            order: 1;
        }
        .card-selected {
            background: var(--blazma-primary);
            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;
        }

        .owl-item {
            margin: 5px !important; /* Adjust spacing */
        }

        .owl-item .card {
            padding: 5px 10px;
        }

        .owl-stage {
            width:2700px !important;
        }

    </style>
    <main class="page-main">
        <!-- Start Breadcrubms Section -->
        <section class="new-sec breadcrumbs-sec">
            <div class="container">
                <h3 class="page-title">{{$title}}</h3>
                <i class="ri-arrow-down-s-line icon"></i>
            </div>
        </section>
        <!-- End Breadcrubms Section -->
        <!-- Start Filter 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>
        <!-- End Filter Section -->
        <!-- Start Tests Section -->
        <section class="new-sec tests-sec" id="tests">
            <div class="container">
                <div class="tests-header">
                    <h5 class="subtitle">Showing {{($packages->currentpage()-1)*$packages->perpage()+1}} to {{$packages->currentpage()*$packages->perpage()}}
                        of  {{$packages->total()}} entries
                    </h5>
                </div>
                <div class="tests">
                    <div class="row">
                        @foreach($packages as $package)
                        <div class="col-sm-6 col-lg-4 clm">
                            <div class="single-box">
                            <a  href="/{{$package->ID}}/package-providers">
                                <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">
                                    <h6 class="box-tag">{{ $package->IS_PACKAGE ? trans('web.packages') : trans('web.test')}}</h6>
                                    <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">
                                    <a href="/{{$package->ID}}/package-providers" class="btn cta-btn">
                                        <span class="icon">&#10230;</span> {{trans("web.book_now")}}
                                    </a>
                                </div>
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="sec-footer">
                        <div class="pagination">
                            {{--{{ $packages->appends(array("category_id" => $category_id, "q" => $q))->links("pagination-v2") }}--}}
                            {{ $packages->appends(array("category_id" => $category_id, "q" => $q))->links("pagination-v2") }}
                            {{--<a href="#" class="btn active">1</a>
                            <a href="#" class="btn">2</a>
                            <span class="dots">...</span>
                            <a href="#" class="btn">10</a>
                            <button class="btn next-btn">
                                <i class="ri-arrow-right-s-line"></i>
                            </button>--}}
                        </div>
                        {{--<div class="btns">
                            <a href="#" class="btn more-btn">
                                Load more
                                <i class="ri-restart-line icon"></i>
                            </a>
                        </div>--}}
                    </div>
                </div>
            </div>
        </section>
        <!-- End Tests Section -->
        <!-- Start CTA Section -->
        @include('still-have-question')
        <!-- End CTA Section -->
    </main>
@endsection