@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">
                <form class="" action="{{ route('checkout.order') }}"method="post">
                    <h5 class="mb-3"><i class="bi bi-person"></i> Patient Details</h5>
                    <div class="form-box mb-4" >
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">First Name:</label>

                                <input type="text"
                                    class="form-control"value="{{ Auth::check() ? Auth::user()->first_name : '' }}"
                                    name="first_name">
                                @error('first_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Last Name:</label>
                                <input type="text"
                                    class="form-control"value="{{ Auth::check() ? Auth::user()->last_name : '' }}"
                                    name="last_name">
                                @error('last_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Email:</label>
                                <input type="text"
                                    class="form-control"value="{{ Auth::check() ? Auth::user()->email : '' }}"
                                    name="email">
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Phone:</label>
                                <input type="text"
                                    class="form-control"value="{{ Auth::check() ? Auth::user()->phone_number : '' }}"
                                    name="phone_number" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                @error('phone_number')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Sex:</label>
                                <select class="form-select" name="gender">
                                    <option value="Male" {{ Auth::check() && Auth::user()->gender === 'Male' ? 'selected' : '' }}>Male</option>
                                    <option value="Female" {{ Auth::check() && Auth::user()->gender === 'Female' ? 'selected' : '' }}>Female</option>
                                    <option value="Other" {{ Auth::check() && Auth::user()->gender === 'Other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Date of Birth:</label>
                                <input type="date"
                                       class="form-control"
                                       name="date_of_birth"
                                       value="{{ Auth::check() ? Auth::user()->date_of_birth : '' }}">
                            </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>

                        <div class="col-md-6 mt-5">
                            <span>Subtotal ({{ $total_item ?: '' }} items)</span>
                        </div>
                        <div class="col-md-6 text-right">
                            USD {{ $total ?: '' }}
                        </div>


                    </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 mt-4">
                            <input type="submit" class="btn btn-primary button-blue text-white"
                                   value=" Continue to Payment">
                        </div>
                </form>

            </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