@extends('layout.mainlayout')

@section('content')
  <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;
    }

  </style>
  <style>
    /*.custom-modal-dialog {
      min-width: 540px;
      position: absolute;
      top: 261px;
      left: 690px;

    }*/
    .custom-modal-dialog .modal-content{
      min-height: 558px;
      border-radius: 25px;
      border: 1px solid #DADADA;
    }

    .custom-modal-dialog .modal-body{
      position: absolute;
      width: 400px;
      height: 378px;
      top: 90px;
      left: 70px;

    }
    .custom-modal-dialog h3{
      line-height: 50.4px;
      font-size: 36px;
      color: #1C2129;
    }
    .custom-modal-dialog h6{
      font-size: 14px;
      font-weight: 300;
      line-height: 24px;
      letter-spacing: 0.1em;

      color: #7C818A;

    }

    .city-content{
      width: fit-content;
      height: auto;
      gap: 20px;
      padding-top: 30px;
    }

    @media (max-width: 768px) {
      .custom-modal-dialog {
        min-width: 80%;
        top: 10%;
      }

      .custom-modal-dialog .modal-body {
        width: auto;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
      }
    }
  </style>
  <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 -->
    <!-- Start Provider info Sec -->
    <section class="new-sec visits-sec">
      <div class="container">
        <div class="banner-info">
          <div class="row">
            <div class="col-lg-7 clm">
              <div class="banner-content">
                <h5 class="subtitle">{{trans('web.home_visit')}}</h5>
                <h3 class="title">{{trans('web.home_visit_desc')}}</h3>
                <p class="desc">{{trans('web.home_visit_desc2')}}</p>
              </div>
            </div>
            <div class="col-lg-5 clm">
              <div class="sec-img">
                <img style="max-width: 500px;" src="/img/homevisit1.png" alt="Provider Name">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="modal fade" tabindex="-1" id="cityModal">
      <div class="modal-dialog custom-modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <h6>{{trans('web.your_city')}}</h6>
            <h3>{{trans('web.select_your_city')}}</h3>
            <div class="city-content">
              @foreach($regions as $region)
                  <p><img src="/img/location.png" style="width: 32px;height: 32px; @if(app('translator')->getLocale() == "ar") margin-left: 5px @else margin-right: 5px @endif"> <a style="font-size: 16px;color: #1C2129;line-height: 25.6px" href="/homevisit/region/{{$region->hospital_id}}" >@if(app('translator')->getLocale() == "ar"){{$region->NAME_AR}}@else{{$region->NAME_EN}}@endif</a></p>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>
    <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 -->
    <!-- End Tests Section -->
    <!-- Start CTA Section -->
    @include('still-have-question')
    <!-- End CTA Section -->
  </main>
@endsection


@section('frontend_scripts')
  <script>
    $(document).ready(function() {

      $('#cityModal').modal({
        backdrop: 'static', // Prevent clicking outside the modal to close
        keyboard: false // Prevent using the keyboard to close
      });
      // Prevent closing the modal by clicking outside or using the keyboard
      $('#cityModal').on('click', function(event) {
        if (event.target.id === 'myModal') {
          return false;
        }
      });

      // Close the modal when the specific link is clicked
      $('#closeModal').on('click', function() {
        $('#cityModal').modal('hide');
      });
    });
  </script>
@endsection