@extends('layout.mainlayout')

@section('content')
  <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;
    }
    .card-selected{
      background: #e35a80;
      color: white;
      border-radius: 25px;
    }

    .owl-nav {
      display: flex;
      justify-content: space-between;
    }

    .owl-prev {
      order: 2;
    }

    .owl-next {
      order: 1;
    }

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

    html[dir="rtl"] .owl-carousel .owl-nav button.owl-prev {
      right: -30px;
      rotate: 180deg;
      left: auto;
      top: 0;
    }

    html[dir="rtl"] .owl-carousel .owl-nav button.owl-next {
      left: -30px;
      rotate: 180deg;
      right: auto;
      top: 0;
    }

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

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

    .owl-carousel .owl-nav button.owl-next {
      right: -30px;
    }
    .owl-carousel .owl-item{
      min-width: 120px;
    }

    .owl-item .card{
      border: none;
      box-shadow: 0px 4px 20px 0px #0000000D;
      padding: 5px 20px 5px 20px;
      border-radius: 25px;
      white-space: nowrap;
    }
    .box-content .box-tag{
      color: #1C2129;
      font-size: 14px;
      text-transform: uppercase;
      margin-bottom: 0.7rem;
    }
    .box-tag{
      display: flex;
      justify-content: space-between;
      /*margin: 0 10px 10px 0;*/
    }
    .note i{
      font-size: 16px;
    }
    .tests-sec .single-box{
      min-height: 277px;
    }
    .tests-sec .single-box{
      border-radius: 25px;
    }
    .tests-sec .single-box:hover{
      border: 1px solid #DADADA;
    }
    .sec-footer{
      justify-content: center;
    }
    .tests-sec .single-box img{
      border-radius: 25px;
    }
  </style>
  <style>
    #module {
      /*width: 500px;*/
      width: 96%;
    }

    #module div.collapse[aria-expanded="false"] {
      display: block ;
      height: 50px !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;
    }
    .anchor-single-box:hover{
      text-decoration: none;
    }

    @media (max-width: 768px) {
      .owl-carousel .owl-item{
        min-width: 0;
      }
    }

  </style>

  @php
    $whatsappNumber = config('services.WHATSAPP_NUMBER') ?? $profile->WHATSAPP_NUMBER ?? null;
    $whatsappLink = $whatsappNumber ? "https://api.whatsapp.com/send?phone={$whatsappNumber}" : '#';
     $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
  <main class="page-main">
    <!-- Start Breadcrubms Section -->
    <section class="new-sec breadcrumbs-sec">
      <div class="container">
        <h3 class="page-title">{{trans('web.home_visit')}}</h3>
        <i class="ri-arrow-down-s-line icon"></i>
      </div>
    </section>
    <!-- End Breadcrubms Section -->

    <section class="new-sec homevisit-sec">
      <div class="row no-gutters">
        <div class="col-md-6 home-visit-content" >
          <span class="home-visit-title-main">{!! trans('web.home_visit_main_title') !!}</span>
          <small class="home-visit-desc-main">{{trans('web.home_visit_main_desc')}}</small>
          {{--<div class="book-btns">

          </div>--}}

          @include('partials.tabby-whatsapp-wrapper')
          {{--<div class="row" style="width: 65%; white-space: nowrap;">
            <div class="col-md-12">
              <a href="{{ $whatsappLink }}" class="btn call_us_mobile whats_up_reservation_header">
                <span class="icon"><img src="/img/whatsapp-logo.png" width="24" alt="WhatsApp"></span>
                <b>
                  <span class="text-long">{{ trans('web.whats_up_reservation') }}</span>
                  <span class="text-short">{{ trans('web.whats_up_us') }}</span>
                </b>
              </a>
            </div>
          </div>--}}
        </div>
        <div class="col-md-6"><img src="/img/home-visit/main-right.png" width="100%" height="100%" alt=""></div>
      </div>
    </section>

    {{--<section class="new-sec visits-sec">
      <div class="container">
        <div class="banner-info">
          <div class="row">
            <div class="col-lg-12 clm">
              <div class="sec-img">
                <img @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == 'ar') src="img/homevisit3.png" @else src="img/homevisit2.png" @endif alt="Provider Name">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>--}}
    <!-- End Provider info Sec -->
    <!-- Start Tests Section -->
    <section class="new-sec tests-sec p-0" id="tests">
      <div class="container">
        <div class="sec-header">
          <h5 class="subtitle" style="font-size: 14px">{{trans('web.tests')}}</h5>
          <h3 class="page-title font-weight-bold mt-3">{{trans('web.choose_the_tests')}}</h3>
        </div>

        <div class="row justify-content-center"  id="booking-header">
          <a href="/homevisit?package_type=1{{!empty(app('translator')->getLocale()) ? '&lang='.app('translator')->getLocale() : '' }}#booking-header" class="col-md-6 col-lg-3 home-visit-type-card mr-lg-5 @if(!empty($package_type) && $package_type == 1) active @endif mb-4 mb-md-0">
            <img src="/img/Calque-1.png">
            <p>{{trans('web.itests')}}</p>
          </a>
          <a href="/homevisit?package_type=2{{!empty(app('translator')->getLocale()) ? '&lang='.app('translator')->getLocale() : '' }}#booking-header" class="col-md-6 col-lg-3 home-visit-type-card mr-lg-5 @if(!empty($package_type) && $package_type == 2) active @endif">
            <img src="/img/Calque-2.png">
            <p>{{trans('web.packages')}}</p>
          </a>

        </div>

        @if(!empty($categories) && count($categories) > 0)
          <div class="row m-5">
            <div class="col">
              <div class="date-side">
                <div class="category-slider owl-carousel" style="margin-top:20px;">
                  <a style="color: #1F3E61" href="?{{!empty(app('translator')->getLocale()) ? 'lang='.app('translator')->getLocale() : '' }}#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}}&package_type={{$package_type}}{{!empty(app('translator')->getLocale()) ? '&lang='.app('translator')->getLocale() : '' }}#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

        <hr>
        <div class="tests-header mb-5">
          {{--<h5 class="subtitle">
            @if(app('translator')->getLocale() == "ar"){{$packages->NAME_AR}}@else{{$packages->NAME_EN}}@endif
          </h5>--}}
          <h5 class="subtitle">Showing {{($tests->currentpage()-1)*$tests->perpage()+1}} to {{$tests->currentpage()*$tests->perpage()}}
            of  {{$tests->total()}} entries
          </h5>
          <div class="sec-form m-0">
            <form class="form home-visit-search-form" action="#tests" style="width: 385px;">
                <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>
            </form>
          </div>

        </div>
        <div class="tests">
          <div class="row">
              @foreach($tests as $test)
              <div class="col-sm-6 col-lg-4 clm">
                <a @if(!empty($test->IS_PACKAGE)) href="/{{$packages->ID}}/packages/{{$test->ID}}?type=2{{!empty(app('translator')->getLocale()) ? '&category_id='.$category_id.'&lang='.app('translator')->getLocale() : '' }}" @else href="{{$packages->ID}}/home-visit/tests/{{$test->ID}}{{!empty(app('translator')->getLocale()) ? '?category_id='.$category_id.'&lang='.app('translator')->getLocale() : '' }}" @endif class="anchor-single-box">
                <div class="single-box">
                  <div class="box-image">
                    <img src="@if(app('translator')->getLocale() == "ar") {{$test->IMAGE_URL_AR}} @else {{$test->IMAGE_URL}} @endif" alt="Test">
                  </div>
                  <div class="box-content">
                    <h6 class="box-tag"><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>
                    <h3 class="box-title">@if(app('translator')->getLocale() == "ar") @if(empty($test->IS_PACKAGE)) {{trans('web.test_count')}} @endif {{$test->NAME_AR}}@else{{$test->NAME_EN}}  @if(empty($test->IS_PACKAGE)) {{trans('web.test_count')}} @endif @endif</h3>
                    {{--<p class="box-desc">
                      @if($test->TEST_CATEGORY == 10)
                        @if(app('translator')->getLocale() == "ar"){!! mb_substr($test->SMART_DESC_AR,0,55,"UTF-8")."..." !!}@else{!! mb_substr($test->SMART_DESC_EN,0,55,"UTF-8")."..." !!}@endif
                      @else
                        @if(app('translator')->getLocale() == "ar"){!! mb_substr($test->DESC_AR,0,55,"UTF-8")."..." !!}@else{!! mb_substr($test->DESC_EN,0,55,"UTF-8")."..." !!}@endif
                      @endif
                    </p>--}}
                  </div>
                  <div class="box-footer home-visit-item-footer">
                    <p class="price">@if(!empty($test->pivot->OLD_PRICE)) <span style="text-decoration: line-through; color: black" class="num" >{{$test->pivot->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->pivot->PRICE}} {!! $currency_code !!}</span></p>
                    {{--@if(empty(config('services.PROFILE_ID')))<h5 class="price">@if(!empty($test->PRICE)){{$test->PRICE}} {{trans("web.sar")}}@endif</h5>@endif--}}

                      {{--<a @if(!empty($test->IS_PACKAGE)) href="/{{$packages->ID}}/packages/{{$test->ID}}?type=2{{!empty(app('translator')->getLocale()) ? '&lang='.app('translator')->getLocale() : '' }}" @else href="/cart?test={{$test->ID}}&hospitalId={{$packages->ID}}&type=2{{!empty(app('translator')->getLocale()) ? '&lang='.app('translator')->getLocale() : '' }}" @endif class="btn @if(empty($test->IS_PACKAGE))send-btn @endif cta-btn">
                        <span class="icon">&#10230;</span> {{trans("web.book_now")}}
                      </a>--}}
                  </div>
                </div>
                </a>
              </div>
            @endforeach
          </div>
          <div class="sec-footer">
            <div class="pagination">
              {{ $tests->appends(array("category_id" => $category_id, "package_type" => $package_type, "q" => $q))->fragment('booking-header')->links("pagination-v2") }}
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Tests Section -->
    <!-- Start CTA Section -->
    @include('still-have-question')
    <!-- End CTA Section -->
  </main>
@endsection

@section('frontend_scripts')
  <script>
    $(document).ready(function() {
      @if(!empty($regions))
      var regions = @json($regions);
      $('#home-visit-city-dropdown .dropdown-menu, #home-visit-city-dropdown img').css('display', '');
      var dropdownMenu = $('#home-visit-city-dropdown .dropdown-menu');
      dropdownMenu.empty();
      $.each(regions, function(index, region) {
        dropdownMenu.append(
                $('<a>', {
                  'class': 'dropdown-item',
                  'href': '/homevisit/region/' + region.hospital_id,
                  'text': @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "en")region.NAME_EN @else region.NAME_AR @endif
                })
        );
      });

      $('#home-visit-city-dropdown .dropdown-item').on('click', function() {
        window.location.href = $(this).attr('href');
      });
      
      @endif
    });
  </script>
@endsection