@include('inc.header')
<style>

  .price-wrapper{
    position: relative; 
    display: inline-block;
  }

  .price-slash{
    position: relative;
    width: 100%;
    height: 0;
    border-top: 4px solid red;
    transform: rotate(-0deg);
    top: 17px;
  }

  .price{ font-size: 30px;}


  .tab {
    cursor: pointer;
    padding: 10px;
    background: #f1f1f1;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
  }
  .tab img {
    max-width: 50px;
    width: 100%;
    max-height: 50px;
    height: auto;
  }
  .tab.active {
    background: #ccc;
  }
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
            /*max-height: 450px;
            height: auto;*/
            text-align: center;
          }
          .bike-image {
            width: 100%;
            height: auto;
            max-width: 430px;
            max-height: 430px;
          }

        /*.circle
        {
      float: left
      width: 60px;
      height: 60px;
      margin: 5px;
      margin-right: 1em;
      border-radius: 50%;
      border:1px solid #000;
      }*/
      .circle-badge {
        width: 30px;             /* Width of the circle */
        height: 30px;            /* Height of the circle */
        border-radius: 50%;  
        border:2px solid grey;    /* Makes the element a circle */
        display: inline-block;
        text-align: center;
        line-height: 50px;       /* Vertically centers the text/icon */
        margin: 5px; 
        box-shadow: 0 0 0 8px white;            /* Optional: spacing between badges */
      }
    </style>

    <style>

      /** * Overlay * -- only show for tablet and up */
      @media only screen and (min-width: 40em) {
       .modal-overlay {
         display: flex;
         align-items: center;
         justify-content: center;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         margin-top:7%;
         z-index: 5;
         background-color: rgba(0, 0, 0, 0.6);
         opacity: 0;
         visibility: hidden;
         backface-visibility: hidden;
         transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
       }
       .modal-overlay.active {
         opacity: 1;
         /*visibility: visible;*/
       }
     }
     /** * Modal */
     .modal {
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       margin: 0 auto;
       background-color: #fff;
       width: 600px;
       max-width: 75rem;
       min-height: 20rem;
       padding: 1rem;
       border-radius: 3px;
       opacity: 0;
       overflow-y: auto;
       visibility: hidden;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       backface-visibility: hidden;
       transform: scale(1.2);
       transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
     }
     .modal .close-modal {
       position: absolute;
       cursor: pointer;
       top: 5px;
       right: 15px;
       opacity: 0;
       backface-visibility: hidden;
       transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
       transition-delay: 0.3s;
     }
     .modal .close-modal svg {
       width: 1.75em;
       height: 1.75em;
     }
     .modal .modal-content {
       opacity: 0;
       backface-visibility: hidden;
       transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
       transition-delay: 0.3s;
     }
     .modal.active {
       visibility: visible;
       opacity: 1;
       transform: scale(1);
     }
     .modal.active .modal-content {
       opacity: 1;
     }
     .modal.active .close-modal {
       transform: translateY(10px);
       opacity: 1;
     }
     /** * Mobile styling */
     @media only screen and (max-width: 39.9375em) {
       h1 {
         font-size: 1.5rem;
       }
       .modal {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: auto!important;
         -webkit-overflow-scrolling: touch;
         border-radius: 0;
         transform: scale(1.1);
         padding: 0 !important;
       }
       .close-modal {
         right: 20px !important;
       }
     }

   </style>

   <!-- content begin -->
   <!-- content begin -->
   <div class="no-bottom no-top" id="content">

    <div id="top"></div>

    <section>
      <div class="container">
        <form action="{{ route('vehicle.book_now') }}" method="POST">
          @csrf
          <div class="row g-4">
           @foreach($cartproducts as $data)
           <div class="col-md-7">


            <div id="tab-contents">
              <!-- Tab contents will be rendered here -->
            </div>
            <div class="spacer-single"></div>
            <div id="tabs">
              <!-- Tabs will be rendered here -->
            </div>
            <div class="spacer-single"></div>
            <div class="col-12 text-center">
              <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
              <script>
                $(document).ready(function() {
                  var elements = $('.modal-overlay, .modal');

                  $('#open-modal').click(function(event){
        event.preventDefault(); // Prevent default anchor behavior
        elements.addClass('active');
      });

                  $('.close-modal').click(function(){
                    elements.removeClass('active');
                  });
                });
              </script>


              <a class="btn-main" href="#" id="open-modal">view Deatail</a>

              <!-- modal -->
              <div class="modal-overlay">
                <div class="modal" style="height: auto!important;">

                  <a class="close-modal">
                    <svg viewBox="0 0 20 20">
                      <path fill="#000000" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
                    </svg>
                  </a><!-- close modal -->

                  <div class="modal-content">
                    <h5 class="text-left"><textarea readonly style="height: 226px;width: 100%;">{{$data->description }}</textarea></h5>
                  </div><!-- content -->

                </div><!-- modal -->
              </div><!-- overlay -->




            </div>
          </div>
          <div class="col-md-5" style="-webkit-box-shadow: -1px 2px 16px -9px rgba(0,0,0,0.75);
          -moz-box-shadow: -1px 2px 16px -9px rgba(0,0,0,0.75);
          box-shadow: -1px 2px 16px -9px rgba(0,0,0,0.75);">
          <h3 class="text-center pt-1  mb-0">{{$data->name }}-({{$data->color }})</h3>
          
          @foreach($availablecolors as $availcolor)
          <div class="text-center inline-block"> <a style="font-size: 10px;" href="{{ route('buy_now', [Crypt::encrypt($availcolor->id)]) }}">
            <span class="badge circle-badge p-3" style="background-color: {{ $availcolor->color }};">

            </span>
          </a>
        </div>
       
        @endforeach
       <div class="vehicle-details">
    <div class="row">
        <div class="col-sm-12 col-md-6 mt-0">
            <label for="p_type" class="control-label">
                <b>Select<i class="required">*</i></b>
            </label>

          <select id="p_type" class="form-control" name="p_type" onchange="fetchPowers()">
            <option value="">--Select--</option>
            <option value="lead">
            lead
            </option>
            <option value="lith" selected="">
            lith
            </option>
          </select>