@extends('layouts.redesigned-user-dashboard-layout')
@section('user-dashboard-content')

     <!-- MAIN CONTENT -->
      <div class="col-lg-9">
        <div class="content-wrapper">

          <!-- TITLE -->
          <h2 class="page-title text-white">
            <i class="fa-regular fa-credit-card"></i> Payment Methods
          </h2>

          <!-- SAVED CARDS -->
          <div class="card-theme mb-5">
            <h5 class="fw-bold mb-2"><i class="fa-solid fa-wallet"></i> Saved Cards</h5>
            <p class="text-muted mb-3">Manage and delete your saved payment methods.</p>

            <div class="divider"></div>

            <div class="table-responsive">
              <table class="table table-bordered align-middle">
                <thead>
                  <tr>
                    <th style="width: 15%;">Default</th>
                    <th>Card Number</th>
                    <th style="width: 15%;">Delete</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td colspan="3" class="text-center text-muted py-4">
                      You currently have no saved cards.
                      <br> Add a card below to make future checkouts faster.
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>


          <!-- ADD NEW CARD -->
          <div class="card-theme">
            <h5 class="fw-bold mb-2"><i class="fa-solid fa-plus"></i> Add New Card</h5>
            <p class="text-muted mb-4">Save a card securely to speed up checkout.</p>


            <!-- FORM -->
            <form>
              <div class="row g-3">

                <!-- Card Number -->
                <div class="col-md-6">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="1234 1234 1234 1234">
                    <span class="input-group-text bg-white border-0 card-icons">
                      <img src="https://img.icons8.com/color/48/visa.png" />
                      <img src="https://img.icons8.com/color/48/mastercard.png" />
                      <img src="https://img.icons8.com/color/48/amex.png" />
                    </span>
                  </div>
                </div>

                <!-- Expiry -->
                <div class="col-md-3">
                  <input type="text" class="form-control" placeholder="MM / YY">
                </div>

                <!-- CVC -->
                <div class="col-md-3">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="CVC">
                    <span class="input-group-text bg-white border-0">
                      <i class="fa-solid fa-lock"></i>
                    </span>
                  </div>
                </div>

                <!-- Country -->
                <div class="col-md-6 mt-2">
                  <select class="form-select">
                    <option selected disabled>Select Country</option>
                    <option>Pakistan</option>
                    <option>India</option>
                    <option>United Kingdom</option>
                    <option>United States</option>
                    <option>Canada</option>
                  </select>
                </div>
              </div>

              <!-- LEGAL -->
              <p class="text-muted small mt-3">
                By adding your card, you authorize future charges in accordance with our payment terms.
              </p>

              <!-- BUTTON -->
              <button class="btn-mint mt-2">
                <i class="fa-solid fa-plus"></i> Save Card
              </button>
            </form>

          </div>

        </div>
      </div>

@endsection