@extends('layouts.redesigned-front-layout')
@section('content')
<div class="container mt-5">

 <!-- STEP NAVIGATION -->
      <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 class="row mt-4 g-4">

        <!-- LEFT SIDE -->
        <div class="col-lg-8">
            <div class="glass-panel mb-4">

                <h5 class="mb-3"><i class="fa-solid fa-user me-2"></i>Patient Details</h5>

                <div class="row g-3">

                    <div class="col-md-6">
                        <label>First Name</label>
                        <input class="form-control" placeholder="Enter first name">
                    </div>

                    <div class="col-md-6">
                        <label>Last Name</label>
                        <input class="form-control" placeholder="Enter last name">
                    </div>

                    <div class="col-md-6">
                        <label>Email</label>
                        <input class="form-control" placeholder="Enter email">
                    </div>

                    <div class="col-md-6">
                        <label>Phone</label>
                        <input class="form-control" placeholder="Enter phone number">
                    </div>

                    <div class="col-md-6">
                        <label>Sex</label>
                        <select class="form-select">
                            <option>Male</option>
                            <option>Female</option>
                            <option>Other</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label>Date of Birth</label>
                        <input type="date" class="form-control">
                    </div>
                </div>

                <div class="mt-4">
                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input">
                        <label class="form-check-label">Inform my GP of my treatment (Optional)</label>
                    </div>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input">
                        <label class="form-check-label">Receive offers and newsletters via Email</label>
                    </div>

                    <div class="form-check mb-2">
                        <input type="checkbox" class="form-check-input">
                        <label class="form-check-label">Alert me via SMS</label>
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input">
                        <label class="form-check-label">
                            I agree with the <a href="#" class="text-mint">terms & conditions</a>
                        </label>
                    </div>
                </div>
            </div>

            <!-- SHIPPING -->
            <div class="glass-panel">
                <h5><i class="fa-solid fa-truck me-2"></i>Shipping Address</h5>

                <ul class="nav nav-tabs tabs-custom mt-4" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#homeDelivery">
                            Home / Office Delivery
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pickup">
                            Collect Near You
                        </button>
                    </li>
                </ul>

                <div class="tab-content tabs-custom-content">
                    <div class="tab-pane fade show active" id="homeDelivery">
                        <div class="input-group">
                            <input class="form-control" placeholder="Postcode">
                            <button class="btn btn-outline-secondary">Find Address</button>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pickup">
                        <p>Enter postcode to find collection points near you.</p>
                        <div class="input-group">
                            <input class="form-control" placeholder="Postcode">
                            <button class="btn btn-outline-secondary">Search</button>
                        </div>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button class="btn-mint">Continue to Payment</button>
                </div>
            </div>
        </div>

        <!-- RIGHT SIDE -->
        <div class="col-lg-4">

            <div class="side-box mb-4 text-center">
                <h6 class="text-success fw-bold"><i class="fa-solid fa-shield-check me-2"></i>We’re a regulated UK service</h6>
                <img src="{{ asset('redesigned-assets/images/registered_pharmacy.png') }}" class="img-fluid mt-3 rounded">
            </div>

            <div class="side-box text-center">
                <h6 class="fw-bold">100% Discreet Packaging</h6>
                <p>Your order arrives in completely plain packaging. Only you will know what’s inside.</p>
                <img src="{{ asset('redesigned-assets/images/package.jpg') }}" class="img-fluid mb-2 rounded">
                <a href="#" class="text-dark fw-semibold">Learn more</a>
            </div>

        </div>
    </div>

</div>

@endsection