@extends('layouts.redesigned-user-dashboard-layout')
@section('user-dashboard-content')
 <!-- MAIN CONTENT -->
      <div class="col-lg-9">
        <div class="content-wrapper">

          <h2 class="page-title text-white"><i class="fa-solid fa-user"></i> Account Details</h2>

          <!-- PERSONAL INFO -->
          <div class="form-card">
            <h5 class="section-heading">Personal Information</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="First Name" />
                </div>

                <div class="col-md-6">
                  <label class="form-label">Last Name</label>
                  <input type="text" class="form-control" placeholder="Last Name" />
                </div>

                <div class="col-md-6">
                  <label class="form-label">Email</label>
                  <input type="email" readonly class="form-control" value="alex@example.com" />
                </div>

                <div class="col-md-6">
                  <label class="form-label">Phone Number</label>
                  <input type="text" class="form-control" placeholder="Phone Number" />
                </div>

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

                <div class="col-md-2">
                  <label class="form-label">Day</label>
                  <select class="form-select">
                    <option>1</option>
                    <option>2</option>
                    <!-- etc -->
                  </select>
                </div>

                <div class="col-md-3">
                  <label class="form-label">Month</label>
                  <select class="form-select">
                    <option>January</option>
                    <option>February</option>
                  </select>
                </div>

                <div class="col-md-3">
                  <label class="form-label">Year</label>
                  <select class="form-select">
                    <option>2024</option>
                    <option>2023</option>
                  </select>
                </div>

                <div class="col-12 mt-3">
                  <button type="submit" class="btn btn-mint">Save Changes</button>
                </div>

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

          <!-- DELIVERY ADDRESS -->
          <div class="form-card">
            <h5 class="section-heading"><i class="fa-solid fa-house"></i> Delivery Address</h5>

            <p class="text-muted mb-3">Manage saved delivery addresses.</p>

            <div class="table-responsive">
              <table class="table text-center">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Visible</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Alex Johnson</td>
                    <td>123 Oxford Street, London</td>
                    <td><i class="fa-solid fa-eye text-success"></i></td>
                  </tr>
                </tbody>
              </table>
            </div>

            <button class="btn btn-mint mt-3">Add New Address</button>
          </div>

          <!-- GP DETAILS -->
          <div class="form-card">
            <h5 class="section-heading"><i class="fa-solid fa-briefcase-medical"></i> GP Details</h5>

            <form>
              <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="gpCheck">
                <label class="form-check-label text-black" for="gpCheck">
                  Inform my GP of my treatments
                </label>
              </div>

              <button class="btn btn-mint">Save GP Preferences</button>
            </form>
          </div>

        </div>
      </div>
@endsection