@extends('layout.simpleapp')
@section('content')
@include('include.simplenav')
    <style>
        .hovertext {
  position: relative;
  border-bottom: 1px dotted black;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  opacity: 0;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  top: 110%;
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px){
.choose-plan{ 
    padding-right: 3rem;
}}


/*@media (max-width: 767px){*/
/*.choose-plan{ */
/*    padding-right: 2rem;*/
/*}}*/
.choose-plan{
    bottom: 5%;
    position: absolute
}


.custom-tooltip {
    display: inline-block;
    margin: 10px 0px;
    opacity: 1;
    position: relative;
    bottom: 5rem;
}

.custom-tooltip .tooltip-inner {
	background: #25cfe1;
}

.custom-tooltip.top .tooltip-arrow {
	border-top-color: #25cfe1;
}

.tooltip .tooltip-inner::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #25cfe1 transparent transparent transparent;
}

.tooltip-inner {
    width: 200px !important;
    padding: 0.65rem 0.9rem !important;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0.25rem;
    font-size: 20px;
}
.btncolor{
    background-color:#fff !important;
}
    </style>

    <section style="background-color: #FAFAFA; ">

        <div class="container-fluid sec1" style="margin-top: -2.5em;">
            
            @if(session()->get('locale')=='ar')
            <div class="row">
                <div class="col-md-4"></div>
                <div class=" col-md-4">
                    <h2 class="text-capitalize text-center">{{__('start saving time today and choose your best plan')}}</h2>
                </div>
                <div class="col-md-4"></div>

            </div>


            <div class="row" style="background-color: #FAFAFA; padding-top: 2em;">
                <div class="col-12 text-center">
                    <h5 style="color:#D7D8D8;">{{__('Your journey start with a click check out our services and choose the right plan')}}</h5>
                </div>
                 </div>
              
                 <div class="row" style="background-color: #FAFAFA;">
                <div class="col-md-6 mx-auto pt-2">
                   
                    @if (Session::has('status'))
                        <div class="alert alert-success pt-4">
                            <ul>
                                <li>{{ Session::get('status') }}</li>
                            </ul>
                        </div>
                    @endif
                </div>
              
          
              </div>

        </div> <!--  <........................> -->

        <div class="container mt-5 pb-4">
            <div class="row">


                <div class="col-md-4 mb-3 cardpadding">
                    <div class="card py-4 px-lg-2  planscard1" style="height: 35rem; width:auto">
                        <div class="card-body d-flex flex-column ">
                            <!-- <div class="text-center">
                      <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                    </div> -->

                            <div class="card-title fs-2 font-weight-bold pricing">
                                <h5 class="">KWD {{$plan[0]['price']}} / {{$plan[0]['duration']}}</h5>
                                <h5 class="">{{$plan[0]['ar_title']}}</h5>
                                <span class="hovertext" data-hover="{{$plan[0]['ar_description']}}"> <h6 class="text-capitalize">{{substr($plan[0]['ar_description'], 0, 40)}} @if (strlen($plan[0]['ar_description'])>40)
                                    {{__('read more')}}...
                                @endif</h6></span>
                            </div>

                            <div class="pricing">
                                <ul class="list-unstyled">
                                    @if ($plan[0]['line1'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[0]['ar_line1']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line2'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[0]['ar_line2']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line3'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[0]['ar_line3']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line4'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[0]['ar_line4']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line5'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3 ">{{$plan[0]['ar_line5']}}</span>
                                    </li>
                                    @endif
                                </ul>


                            </div>
                            <!-- <div class="text-center mt-auto mb-4">
                      <span class="fw-bold fs-2 ">$11</span>/month
                    </div> --> 
                    <div class="row">
                            <div class=" col text-center choose-plan">
                      
                                <a href="choose-plan/{{$plan[0]['id']}}"><button type="button"
                                        class="btn btn-lg btncolor2 btnsize">{{__('Choose Plan')}}</button></a>
                                        </div>

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



                <div class="col-md-4 mb-3 ">
                 
                    <div class="card py-4 px-lg-2 planscard2 shadow" style="height: 43rem; width:auto;">
                           <div class="text-center">
               <div role="tooltip" class="tooltip top custom-tooltip">
	<div class="tooltip-arrow"></div>
	<div class="tooltip-inner">{{__('Recommend')}}</div>
</div>
</div>
                        <div class="card-body d-flex flex-column" style="">
                            <!-- <div class="text-center">
                      <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                    </div> -->

                            <div class="card-title fs-2 font-weight-bold pricing">
                                <!--<h4 class="text-white text-center">Recommended</h4>-->
                                <h5 class="text-white">KWD {{$plan[1]['price']}} / {{$plan[1]['duration']}}</h5>
                                <h5 class="text-white">{{$plan[1]['ar_title']}}</h5>
                                <span class="hovertext" data-hover="{{$plan[1]['ar_description']}}"> <h6 class="text-capitalize">{{substr($plan[1]['ar_description'], 0, 40)}} @if (strlen($plan[1]['ar_description'])>40)
                                    {{__('read more')}}...
                                @endif</h6></span>
                            </div>

                            <div class="pricing">
                                <ul class="list-unstyled">
                                    @if ($plan[1]['line1'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class=" ms-3 pl-3 text-white">{{$plan[1]['ar_line1']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line2'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class=" ms-3 pl-3 text-white">{{$plan[1]['ar_line2']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line3'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class="ms-3 pl-3 text-white">{{$plan[1]['ar_line3']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line4'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class="ms-3 pl-3 text-white">{{$plan[1]['ar_line4']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line5'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class="ms-3 pl-3 text-white">{{$plan[1]['ar_line5']}}</span>
                                    </li>
                                    @endif
                                </ul>


                            </div>
                            <!-- <div class="text-center mt-auto mb-4">
                      <span class="fw-bold fs-2 ">$11</span>/month
                    </div> -->
                     <div class="row">
                            <div class=" col text-center choose-plan">
                      
                                <a href="choose-plan/{{$plan[1]['id']}}"><button type="button"
                                        class="btn btn-lg btncolor btnsize">{{__('Choose Plan')}}</button></a></div>  

                        </div>
                    
                    
                       

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

                <div class="col-md-4 mb-3 cardpadding ">
                    <div class="card py-4 px-lg-2  planscard1" style="height: 35rem; width:auto;">
                        <div class="card-body d-flex flex-column ">
                            <!-- <div class="text-center">
                      <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                    </div> -->

                            <div class="card-title fs-2 font-weight-bold pricing">
                                <h5 class="">KWD {{$plan[2]['price']}} / {{$plan[2]['duration']}}</h5>
                                <h5 class="">{{$plan[2]['ar_title']}}</h5>
                                <span class="hovertext" data-hover="{{$plan[2]['ar_description']}}"> <h6 class="text-capitalize">{{substr($plan[2]['ar_description'], 0, 40)}} @if (strlen($plan[2]['ar_description'])>40)
                                    {{__('read more')}}...
                                @endif</h6></span>
                            </div>

                            <div class="pricing">
                                <ul class="list-unstyled">
                                    @if ($plan[2]['line1'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[2]['ar_line1']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line2'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[2]['ar_line2']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line3'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[2]['ar_line3']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line4'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[2]['ar_line4']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line5'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[2]['ar_line5']}}</span>
                                    </li>
                                    @endif
                                </ul>


                            </div>
                            <!-- <div class="text-center mt-auto mb-4">
                      <span class="fw-bold fs-2 ">$11</span>/month
                    </div> -->
                     <div class="row">
                            <div class=" col text-center choose-plan">
                            <a class="btn btn-lg btncolor2 btnsize" href="choose-plan/{{$plan[2]['id']}}">{{__('Choose Plan')}}</a></div>
 </div>
                        </div>
                    </div>
                </div>

            </div>
            @else
            <div class="row">
                <div class="col-md-4"></div>
                <div class=" col-md-4">
                    <h2 class="text-capitalize text-center">{{__('start saving time today and choose your best plan')}}</h2>
                </div>
                <div class="col-md-4"></div>

            </div>


            <div class="row" style="background-color: #FAFAFA; padding-top: 2em;">
                <div class="col-12 text-center">
                    <h5 style="color:#909090;">{{__('Your journey start with a click check out our services and choose the right plan')}}</h5>
                </div>
                 </div>
              
                 <div class="row" style="background-color: #FAFAFA;">
                <div class="col-md-6 mx-auto pt-2">
                   
                    @if (Session::has('status'))
                        <div class="alert alert-success pt-4">
                            <ul>
                                <li>{{ Session::get('status') }}</li>
                            </ul>
                        </div>
                    @endif
                </div>
              
          
              </div>

        </div> <!--  <........................> -->

        <div class="container mt-5 pb-4">
            <div class="row">


                <div class="col-md-4 mb-3 cardpadding">
                    <div class="card py-4 px-lg-2  planscard1" style="height: 35rem; width:auto">
                        <div class="card-body d-flex flex-column ">
                            <!-- <div class="text-center">
                      <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                    </div> -->

                            <div class="card-title fs-2 font-weight-bold pricing">
                                <h5 class="">KWD {{$plan[0]['price']}} / {{$plan[0]['duration']}}</h5>
                                <h5 class="">{{$plan[0]['title']}}</h5>
                                <span class="hovertext" data-hover="{{$plan[0]['description']}}"> <h6 class="text-capitalize">{{substr($plan[0]['description'], 0, 40)}} @if (strlen($plan[0]['description'])>40)
                                    read more...
                                @endif</h6></span>
                            </div>

                            <div class="pricing">
                                <ul class="list-unstyled">
                                    @if ($plan[0]['line1'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[0]['line1']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line2'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[0]['line2']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line3'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[0]['line3']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line4'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[0]['line4']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[0]['line5'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3 ">{{$plan[0]['line5']}}</span>
                                    </li>
                                    @endif
                                </ul>


                            </div>
                            <!-- <div class="text-center mt-auto mb-4">
                      <span class="fw-bold fs-2 ">$11</span>/month
                    </div> --> 
                    <div class="row">
                            <div class=" col text-center choose-plan">
                      
                                <a href="choose-plan/{{$plan[0]['id']}}"><button type="button"
                                        class="btn btn-lg btncolor2 btnsize">{{__('Choose Plan')}}</button></a>
                                        </div>

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



                <div class="col-md-4 mb-3 ">
                 
                    <div class="card py-4 px-lg-2 planscard2 shadow" style="height: 43rem; width:auto;">
                           <div class="text-center">
               <div role="tooltip" class="tooltip top custom-tooltip">
	<div class="tooltip-arrow"></div>
	<div class="tooltip-inner">{{__('Recommend')}}</div>
</div>
</div>
                        <div class="card-body d-flex flex-column" style="">
                            <!-- <div class="text-center">
                      <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                    </div> -->

                            <div class="card-title fs-2 font-weight-bold pricing">
                                <!--<h4 class="text-white text-center">Recommended</h4>-->
                                <h5 class="text-white">KWD {{$plan[1]['price']}} / {{$plan[1]['duration']}}</h5>
                                <h5 class="text-white">{{$plan[1]['title']}}</h5>
                                <span class="hovertext" data-hover="{{$plan[1]['description']}}"> <h6 class="text-capitalize">{{substr($plan[1]['description'], 0, 40)}} @if (strlen($plan[1]['description'])>40)
                                    read more...
                                @endif</h6></span>
                            </div>

                            <div class="pricing">
                                <ul class="list-unstyled">
                                    @if ($plan[1]['line1'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class=" ms-3 pl-3 text-white">{{$plan[1]['line1']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line2'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class=" ms-3 pl-3 text-white">{{$plan[1]['line2']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line3'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class="ms-3 pl-3 text-white">{{$plan[1]['line3']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line4'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class="ms-3 pl-3 text-white">{{$plan[1]['line4']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[1]['line5'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check"></i>
                                        <span class="ms-3 pl-3 text-white">{{$plan[1]['line5']}}</span>
                                    </li>
                                    @endif
                                </ul>


                            </div>
                            <!-- <div class="text-center mt-auto mb-4">
                      <span class="fw-bold fs-2 ">$11</span>/month
                    </div> -->
                     <div class="row">
                            <div class=" col text-center choose-plan">
                      
                                <a href="choose-plan/{{$plan[1]['id']}}"><button type="button"
                                        class="btn btn-lg btncolor btnsize">{{__('Choose Plan')}}</button></a></div>  

                        </div>
                    
                    
                       

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

                <div class="col-md-4 mb-3 cardpadding ">
                    <div class="card py-4 px-lg-2  planscard1" style="height: 35rem; width:auto;">
                        <div class="card-body d-flex flex-column ">
                            <!-- <div class="text-center">
                      <img src="https://drive.google.com/uc?export=view&id=1HswgEjS9kRoAKUDOMmDhnhUyyah7wBW9" class="img-fluid  mb-5" alt="Websearch">
                    </div> -->

                            <div class="card-title fs-2 font-weight-bold pricing">
                                <h5 class="">KWD {{$plan[2]['price']}} / {{$plan[2]['duration']}}</h5>
                                <h5 class="">{{$plan[2]['title']}}</h5>
                                <span class="hovertext" data-hover="{{$plan[2]['description']}}"> <h6 class="text-capitalize">{{substr($plan[2]['description'], 0, 40)}} @if (strlen($plan[2]['description'])>40)
                                    read more...
                                @endif</h6></span>
                            </div>

                            <div class="pricing">
                                <ul class="list-unstyled">
                                    @if ($plan[2]['line1'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[2]['line1']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line2'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class=" ms-3 pl-3">{{$plan[2]['line2']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line3'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[2]['line3']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line4'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[2]['line4']}}</span>
                                    </li>
                                    @endif
                                    @if ($plan[2]['line5'])
                                    <li class="mb-3">
                                        <i class=" iconbg fa-solid fa-check text-white"></i>
                                        <span class="ms-3 pl-3">{{$plan[2]['line5']}}</span>
                                    </li>
                                    @endif
                                </ul>


                            </div>
                            <!-- <div class="text-center mt-auto mb-4">
                      <span class="fw-bold fs-2 ">$11</span>/month
                    </div> -->
                     <div class="row">
                            <div class=" col text-center choose-plan">
                            <a class="btn btn-lg btncolor2 btnsize" href="choose-plan/{{$plan[2]['id']}}">{{__('Choose Plan')}}</a></div>
 </div>
                        </div>
                    </div>
                </div>

            </div>
            @endif
        </div>
    </section>
@endsection