@extends('layouts.front-layout')
@section('content')
<style>
  
    .form-box {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 20px;
    }
    .shipping-tab .nav-link {
      border: 1px solid #dee2e6;
      border-radius: 0;
      color: #333;
    }
    .shipping-tab .nav-link.active {
      background: #198754;
      color: #fff;
    }
    .continue-btn {
      background: #f97316;
      border: none;
      padding: 12px;
      font-size: 1.1rem;
    }
    .side-box {
      border: 1px solid #dee2e6;
      border-radius: 6px;
      padding: 15px;
      background: #fff;
      text-align: center;
    }
  </style>
    <div class="container my-5">
      <!-- Stepper -->
      <div class="stepper">
        <div class="step">
          <div class="circle"></div>
          <small>Consultation</small>
        </div>
        <div class="step">
          <div class="circle"></div>
          <small>Treatments</small>
        </div>
        <div class="step">
          <div class="circle active"></div>
          <small>Delivery</small>
        </div>
        <div class="step">
          <div class="circle"></div>
          <small>Payment</small>
        </div>
      </div>
    </div>

  <div class="container my-4">
    <div class="row">
      <!-- Left Column -->
      <div class="col-lg-8">
        <div class="form-box mb-4">
          <h5 class="mb-3"><i class="bi bi-person"></i> Patient Details</h5>
          <form>
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">First Name:</label>
                <input type="text" class="form-control" placeholder="Enter first name">
              </div>
              <div class="col-md-6">
                <label class="form-label">Last Name:</label>
                <input type="text" class="form-control" placeholder="Enter last name">
              </div>
              <div class="col-md-6">
                <label class="form-label">Email:</label>
                <input type="email" class="form-control" value="luckyzone864@gmail.com">
              </div>
              <div class="col-md-6">
                <label class="form-label">Phone:</label>
                <input type="tel" class="form-control" placeholder="Enter phone number">
              </div>
              <div class="col-md-6">
                <label class="form-label">Sex:</label>
                <select class="form-select">
                  <option>Male</option>
                  <option>Female</option>
                  <option>Other</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">Date of Birth:</label>
                <input type="date" class="form-control">
              </div>
            </div>

            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" id="gpInfo">
              <label class="form-check-label" for="gpInfo">
                Inform my GP of my treatment (Optional)
              </label>
              <div class="form-text">
                Sharing enables your GP to have a full record of your medical history. This step is optional but highly recommended.
              </div>
            </div>

            <div class="form-check mt-2">
              <input class="form-check-input" type="checkbox" id="newsletter">
              <label class="form-check-label" for="newsletter">
                I want to receive discounts, special offers and newsletters via Email
              </label>
            </div>

            <div class="form-check mt-2">
              <input class="form-check-input" type="checkbox" id="smsAlert">
              <label class="form-check-label" for="smsAlert">
                Alert me via SMS (please enter a mobile phone number)
              </label>
            </div>

            <div class="form-check mt-2">
              <input class="form-check-input" type="checkbox" id="terms">
              <label class="form-check-label" for="terms">
                I have read and agree with the <a class="blue" href="#">terms & conditions</a> and I confirm that I am over 18.
              </label>
            </div>
          </form>
        </div>

        <!-- Shipping Address -->
        <div class="form-box mb-4">
          <h6><i class="bi bi-truck"></i> Shipping Address</h6>
          <ul class="nav nav-tabs shipping-tab mt-3" id="shippingTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button">
                Home / Office Delivery
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="collect-tab" data-bs-toggle="tab" data-bs-target="#collect" type="button">
                Collect Near You
              </button>
            </li>
          </ul>
          <div class="tab-content p-3 border border-top-0">
            <div class="tab-pane fade show active" id="home" role="tabpanel">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Postcode">
                <button class="btn btn-outline-secondary">Find Address</button>
              </div>
            </div>
            <div class="tab-pane fade" id="collect" role="tabpanel">
              <p>Enter postcode to find collection points near you.</p>
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Postcode">
                <button class="btn btn-outline-secondary">Find Collection</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Continue Button -->
        <div class="text-end">
          <a href="/cart.html" class="btn btn-primary button-blue text-white ">
            <i class="bi bi-lock-fill"></i> Continue to Payment
          </a>
        </div>
      </div>

      <!-- Right Column -->
      <div class="col-lg-4">
        <div class="side-box mb-3">
          <h6 class="text-success"><i class="bi bi-check-circle-fill"></i> We’re a safe and regulated UK service</h6>
          <img src="{{asset('assets/Assets/google.png')}}" alt="Logo" class="img-fluid mt-2">
        </div>
        <div class="side-box">
          <h6>100% discreet packaging</h6>
          <p>Your medication will arrive in our discreet plain packaging, so only you will know what’s inside.</p>
          <img src="{{asset('assets/Assets/package.jpg')}}" class="img-fluid mb-2" alt="package">
          <a class="blue" href="#">Find out more</a>
        </div>
      </div>
    </div>
  </div>

@endsection