@extends('layouts.main',['title'=>'Lookup Page'])

@section('content')
<section class="mt-4">
      <div class="row g-4">
      @if(empty($settings))
                <div class="col-lg-12">
                <div class="main-card">
                    <div class="alert text-warning text-center" role="alert">
                        No matching records found.
                    </div></div>
                </div>
            @else
        <div class="col-md-2 ">
          <div class="main-card">
            <div class="d-flex flex-column justify-content-between h-100">
              <div>
                <div class="logo-img text-center">
                  <img class="img-fluid" src="{{ env('CB_MAIN_APP_URL') . '/' . $settings['web_logo'] }}" alt="logo">
                </div>
                <h4 class="font-16 text-center text-uppercase mt-3 mb-4">{{ $settings['lookup_welcome_label'] }}</h4>
                <hr class="m-0 light-gray-divider">
                <p class="font-12 mb-0 mt-4 text-center">
                    {{ @htmlspecialchars_decode($settings['lookup_welcome_text']) }}
                </p>
              </div>
              <div>
                <p class="font-10 text-center m-0">powered By Axencis</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-10 ">
          <div class="row g-4">
            <div class="col-lg-6">
              <div class="main-card">
                <div class="slider-wrapper d-flex justify-content-between">
                  <!-- Navigation Thumbnails -->
                  <div class="slider-nav main-brand-img col-2 pe-2">
                        @if(!$product_images->isEmpty())
                            @foreach($product_images as $val)
                                <div class="items">
                                    <img class="img-fluid w-100 mb-2" src="/{{ $val->cbpiUrl }}" alt="">
                                </div>
                            @endforeach
                        @endif
                  </div>

                  <!-- Main Slider -->
                  <div class="slider-for main-brand-img col-10 ">

                    @if(!$product_images->isEmpty())
                        @foreach($product_images as $key => $val)
                            <div class="items {{($key==0) ? 'position-relative' : ''}}">
                                <img class="img-fluid m-0" src="/{{ $val->cbpiUrl }}" alt="">
                                <div class="verify-btn">
                                        <a class="text-decoration-none d-flex align-items-center gap-2" href="#0">Verified <span>
                                            <img src="{{ asset('images/blue-star.svg') }}" alt="star">
                                        </span>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @endif                    
                  </div>
                </div>


              </div>
            </div>
            <div class="col-lg-6">
              <div class="main-card">
                <div class="row ">
                  <div class="col-md-7">
                    <h2>Welcome To {{ $settings['lookup_welcome_label'] }} Lookups</h2>
                  </div>
                  <div class="col-md-5">
                    <div class="d-flex flex-column justify-content-between align-items-end h-100">
                      <div>
                        <img src="{{ asset('images/blue-star.svg') }}" alt="star">
                      </div>

                      <div class="seller-btn ">

                        <a class=" text-decoration-none d-flex align-items-center gap-2 p-2 pe-3 bg-white " href="#0">
                          <span><svg width="12" height="12" viewBox="0 0 12 12" fill="none"
                              xmlns="http://www.w3.org/2000/svg">
                              <path
                                d="M5.54739 0.964187C5.72735 0.58081 6.27265 0.58081 6.45261 0.964188L7.74075 3.70828C7.81154 3.85907 7.95277 3.96471 8.11741 3.99001L11.0389 4.43903C11.441 4.50083 11.6049 4.99143 11.3207 5.28253L9.17637 7.47867C9.06546 7.59227 9.01508 7.75178 9.04064 7.90847L9.54222 10.9836C9.60941 11.3956 9.17206 11.7036 8.80678 11.5016L6.24196 10.0833C6.0914 10.0001 5.9086 10.0001 5.75804 10.0833L3.19322 11.5016C2.82794 11.7036 2.39059 11.3956 2.45778 10.9836L2.95936 7.90847C2.98492 7.75178 2.93454 7.59227 2.82363 7.47867L0.679347 5.28253C0.395121 4.99143 0.559019 4.50083 0.961143 4.43903L3.88259 3.99001C4.04723 3.96471 4.18846 3.85907 4.25925 3.70828L5.54739 0.964187Z"
                                fill="#262626" />
                            </svg>
                          </span>Best Seller</a>
                      </div>
                    </div>
                  </div>

                </div>
                <hr class=" my-4 soft-blue-divider">
                <div class="d-flex align-items-center gap-2 mb-4">
                  <div class="hand-shake-img">
                    <img src="{{ asset('images/handshake.png') }}" alt="handshake">
                  </div>
                  <p class="font-14 m-0 cgm-heading">CGM Fashion</p>

                </div>
                <div class="cgm-content">
                  <p class="font-12 m-0">
                    Welcome to CGM Monitors, your trusted source for advanced diabetes management solutions. We
                    specialize in reselling innovative products from Beta Bionics, including the iLet Bionic Pancreas
                    and iLet Cartridge 1.6mL. Our mission is to empower individuals with diabetes through cutting-edge
                    technology and exceptional service.
                    <br /><br />
                    Let us help you take control of your health with reliable and effective tools. Your well-being is
                    our priority! iLet Bionic Pancreas and iLet Cartridge 1.6mL. Our mission is to empower individuals
                    with diabetes through cutting-edge.
                  </p>
                </div>
              </div>
            </div>
          </div>


          <div class="row pt-4 g-4">
            <div class="col-lg-6">
              <div class="main-card feedback-card position-relative overflow-hidden">
                <p class="font-16 m-0 position-relative z-2">Customer Feedback</p>
                <hr class="my-4 soft-blue-divider">
                <div class="feedback-slider position-static">
                  <div>
                    <div class="feedback-slide-card mx-2 bg-white p-3">
                      <div class="d-flex align-items-center gap-2">
                        <div class="user-img">
                          <img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}" alt="user">
                        </div>
                        <div class="user-name">
                          <p class="font-10 m-0">Whitney Bowman</p>
                          <div class="rating d-flex align-items-center gap-1 mt-1">
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <p class="font-16 m-0 mt-2">It’s really great </p>
                      <p class="font-12 m-0 mt-1 line-height-16" >It’s really great , I’m really enjoying and surprised, amazing</p>
                      <div class="d-flex mt-4 pt-2 gap-2">
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/yellow-add.png') }}" alt="">
                        </div>
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/item2.png') }}" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="feedback-slide-card mx-2 bg-white p-3">
                      <div class="d-flex align-items-center gap-2">
                        <div class="user-img">
                          <img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}" alt="user">
                        </div>
                        <div class="user-name">
                          <p class="font-10 m-0">Whitney Bowman</p>
                          <div class="rating d-flex align-items-center gap-1 mt-1">
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <p class="font-16 m-0 mt-2">It’s really great </p>
                      <p class="font-12 m-0 mt-1 line-height-16" >It’s really great , I’m really enjoying and surprised, amazing</p>
                      <div class="d-flex mt-4 pt-2 gap-2">
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/yellow-add.png') }}" alt="">
                        </div>
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/item2.png') }}" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="feedback-slide-card mx-2 bg-white p-3">
                      <div class="d-flex align-items-center gap-2">
                        <div class="user-img">
                          <img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}" alt="user">
                        </div>
                        <div class="user-name">
                          <p class="font-10 m-0">Whitney Bowman</p>
                          <div class="rating d-flex align-items-center gap-1 mt-1">
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <p class="font-16 m-0 mt-2">It’s really great </p>
                      <p class="font-12 m-0 mt-1 line-height-16" >It’s really great , I’m really enjoying and surprised, amazing</p>
                      <div class="d-flex mt-4 pt-2 gap-2">
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/yellow-add.png') }}" alt="">
                        </div>
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/item2.png') }}" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="feedback-slide-card mx-2 bg-white p-3">
                      <div class="d-flex align-items-center gap-2">
                        <div class="user-img">
                          <img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}" alt="user">
                        </div>
                        <div class="user-name">
                          <p class="font-10 m-0">Whitney Bowman</p>
                          <div class="rating d-flex align-items-center gap-1 mt-1">
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <p class="font-16 m-0 mt-2">It’s really great </p>
                      <p class="font-12 m-0 mt-1 line-height-16" >It’s really great , I’m really enjoying and surprised, amazing</p>
                      <div class="d-flex mt-4 pt-2 gap-2">
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/yellow-add.png') }}" alt="">
                        </div>
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/item2.png') }}" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="feedback-slide-card mx-2 bg-white p-3">
                      <div class="d-flex align-items-center gap-2">
                        <div class="user-img">
                          <img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}" alt="user">
                        </div>
                        <div class="user-name">
                          <p class="font-10 m-0">Whitney Bowman</p>
                          <div class="rating d-flex align-items-center gap-1 mt-1">
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <p class="font-16 m-0 mt-2">It’s really great </p>
                      <p class="font-12 m-0 mt-1 line-height-16" >It’s really great , I’m really enjoying and surprised, amazing</p>
                      <div class="d-flex mt-4 pt-2 gap-2">
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/yellow-add.png') }}" alt="">
                        </div>
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/item2.png') }}" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="feedback-slide-card mx-2 bg-white p-3">
                      <div class="d-flex align-items-center gap-2">
                        <div class="user-img">
                          <img class="img-fluid rounded-circle" src="{{ asset('images/user.png') }}" alt="user">
                        </div>
                        <div class="user-name">
                          <p class="font-10 m-0">Whitney Bowman</p>
                          <div class="rating d-flex align-items-center gap-1 mt-1">
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                            <div class="yellow-star">
                              <img class="img-fluid" src="{{ asset('images/yellow-star.svg') }}" alt="">
                            </div>
                          </div>
                        </div>
                      </div>
                      <p class="font-16 m-0 mt-2">It’s really great </p>
                      <p class="font-12 m-0 mt-1 line-height-16" >It’s really great , I’m really enjoying and surprised, amazing</p>
                      <div class="d-flex mt-4 pt-2 gap-2">
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/yellow-add.png') }}" alt="">
                        </div>
                        <div class="feedback-img">
                          <img class="img-fluid" src="{{ asset('images/item2.png') }}" alt="">
                        </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="d-flex flex-column gap-4">
                <div class="main-card">
                  <div class="row g-3">
                    <div class="col-md-7">
                      <div class="d-flex gap-2 contact-card">
                        <div class="contact-icon">
                           <img class="img-fluid" src="{{ asset('images/email-icon.svg') }}" alt="">
                        </div>
                        <div class="contact-info">
                          <p class="font-12 m-0">Mail<span>*</span></p>
                          <p class="font-12 m-0 mt-1 line-height-16">jasonbay@gmail.com</p>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-5">
                      <div class="d-flex gap-2 contact-card">
                        <div class="contact-icon">
                           <img class="img-fluid" src="{{ asset('images/market-icon.svg') }}" alt="">
                        </div>
                        <div class="contact-info">
                          <p class="font-12 m-0">Marketplace<span>*</span></p>
                          <p class="font-12 m-0 mt-1 line-height-16">Amazon, eBay</p>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="d-flex gap-2 contact-card">
                        <div class="contact-icon">
                           <img class="img-fluid" src="{{ asset('images/store-icon.svg') }}" alt="">
                        </div>
                        <div class="contact-info">
                          <p class="font-12 m-0">Store Name(s)<span>*</span></p>
                          <p class="font-12 m-0 mt-1 line-height-16">Intel Core, Intel DDR</p>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="d-flex gap-2 contact-card">
                        <div class="contact-icon">
                           <img class="img-fluid" src="{{ asset('images/url-icon.svg') }}" alt="">
                        </div>
                        <div class="contact-info">
                          <p class="font-12 m-0">Store URLS(s)<span>*</span></p>
                          <p class="font-12 m-0 mt-1 line-height-16 text-break">https://www.store.com/6735fe8604d0c4d81ff90ea6</p>
                        </div>
                      </div>
                    </div>
                    
                  </div>
                </div>
                <div class="main-card disclaimer-card">
                  <div class="row align-items-center g-4">
                    <div class="col-md-8">
                      <p class="font-12 mb-1">
                        Disclaimer
                      </p>
                      <p class="disclaimer-card-desc m-0">
                        {{ $settings['lookup_disclaimer'] }}
                      </p>
                    </div>
                    <div class="col-md-4">
                      <div class="d-flex justify-content-end">
                        <a class="red-btn d-block text-decoration-none font-12" href="#0">Rate Seller</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          @endif
        </div>

    </section>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

    <script>
         $(document).ready(function () {
      // Main Slider Configuration
      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
      });

      // Thumbnail Navigation Configuration
      $('.slider-nav').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: false,
        arrows: false,
        draggable: false,
        focusOnSelect: true,
        vertical: true, // Optional for vertical layout
      });

    });
    $(".feedback-slider").slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      responsive: [
    
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    },
    
  ],
      prevArrow: '<button class="feedback-prev d-flex align-items-center justify-content-center" type="button"><svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.909L1.52767 4.28615L4 1.66329L3.23887 0.857574L-1.49868e-07 4.28615L3.23887 7.71472L4 6.909Z" fill="white"/></svg></button>',
      nextArrow: '<button class="feedback-next d-flex align-items-center justify-content-center" type="button"><svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M-2.64516e-07 1.37713L2.47233 3.99999L-3.52189e-08 6.62284L0.761134 7.42856L4 3.99999L0.761133 0.571416L-2.64516e-07 1.37713Z" fill="white"/></svg></button>'
      
    



    });
  </script>
@endsection