@extends('layouts.front-layout')
@section('content')
  <style>
    body {
      background-color: white !important;

    }


    .card-consult .card-title {
      font-weight: 600;
    }

    .card-consult {
      border: none;
      box-shadow: none;
      position: relative;
      transition: box-shadow 0.3s ease;
    }

    .card-consult::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      height: 2px;
      width: 0;
      background-color: #30bfac;
      transform: translateX(-50%);
      transition: width 0.3s ease;
    }

    .card-consult:hover::before {
      width: 30%;
    }

    .card-consult:hover {
      box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
    }
  </style>
  <div class="container my-5">
    <h2 class="mb-4"> Add to Cart</h2>



    @php
      $dummy_cart_data = [
        [
          'item_id' => 1,
          'item_name' => 'Test Product 1',
          'item_image' => 'https://via.placeholder.com/100',
          'item_quantity' => 2,
          'item_price' => 15,
          'stock' => 10,
        ],
        [
          'item_id' => 2,
          'item_name' => 'Test Product 2',
          'item_image' => 'https://via.placeholder.com/100',
          'item_quantity' => 1,
          'item_price' => 30,
          'stock' => 5,
        ],
      ];
    @endphp

    <div class="row">
      <!-- Cart Items -->
      @include('front.cart.cart-list', ['cart_data' => $dummy_cart_data])
    </div>




    <section class="work-section bg-white">
      <div class="container">
        <div class="row align-items-center">
          <!-- Text Content -->
          <div class="mb-4 text-center">
            <div class="heading">How Does It Work?</div>
            <div class="text-details text-center">
              <p>
                Our platform connects you with licensed healthcare professionals
                who can provide personalized consultations and treatment
                options.
              </p>
              <p>
                Simply choose a treatment area, book a consultation, and receive
                expert guidance tailored to your needs.
              </p>
            </div>
          </div>

          <!-- Video Content -->

          <div class="video">
            <video controls>
              <source src="{{asset('assets/Assets/How it works.mp4')}}" type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          </div>
        </div>
      </div>
    </section>

    <div class="container my-5">
      <div class="container my-3">
        <div class="row g-4 justify-content-center">

          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card card-consult shadow-small h-100">
              <img src="{{ asset('assets/Assets/home1.png') }}" class="card-img-top" alt="Related Product 1" />
              <div class="card-body text-center">
                <h5 class="card-title">Online Consultation</h5>
                <p class="card-text">Complete a free online medical consultation to check your eligibility</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card card-consult shadow-small h-100">
              <img style="max-height: 180px; width: auto; object-fit: contain;"
                src="{{ asset('assets/Assets/home2.png') }}" class="card-img-top" alt="Related Product 1" />
              <div class="card-body text-center">
                <h5 class="card-title">Choose a Treatment</h5>
                <p class="card-text">Select from a choice of suitable treatments from leading brands</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card card-consult shadow-small h-100">
              <img src="{{ asset('assets/Assets/home3.png') }}" class="card-img-top" alt="Related Product 1" />
              <div class="card-body text-center">
                <h5 class="card-title">Express Delivery</h5>
                <p class="card-text">Medication is dispensed and delivered to your home or work</p>
              </div>
            </div>
          </div>

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


  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const creditRadio = document.getElementById("creditcard");
    const creditForm = document.getElementById("creditCardForm");

    document.querySelectorAll("input[name='payment']").forEach((radio) => {
      radio.addEventListener("change", function () {
        if (creditRadio.checked) {
          creditForm.classList.remove("d-none");
        } else {
          creditForm.classList.add("d-none");
        }
      });
    });

    // document.addEventListener("DOMContentLoaded", function () {
    //   // Increment button
    //   document.querySelectorAll(".btn-plus").forEach(function (btn) {
    //     btn.addEventListener("click", function () {
    //       let qtyInput = this.closest(".input-group").querySelector("input[type='text']");
    //       let currentVal = parseInt(qtyInput.value) || 0;
    //       qtyInput.value = currentVal + 1;
    //       qtyInput.dispatchEvent(new Event("change"));
    //     });
    //   });
    //
    //   // Decrement button
    //   document.querySelectorAll(".btn-minus").forEach(function (btn) {
    //     btn.addEventListener("click", function () {
    //       let qtyInput = this.closest(".input-group").querySelector("input[type='text']");
    //       let currentVal = parseInt(qtyInput.value) || 0;
    //       if (currentVal > 1) {
    //         qtyInput.value = currentVal - 1;
    //         qtyInput.dispatchEvent(new Event("change"));
    //       }
    //     });
    //   });
    // });


  </script>

@endsection