@extends('layouts.user-dashboard-layout')
@section('user-dashboard-content')
    <style>
        .section-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .section-divider {
            margin: 1.5rem 0;
            border-top: 1px solid #cfcfcf;
        }

        .card-icons img {
            height: 22px;
            margin-left: 5px;
        }
    </style>

    <div class="container bg-white p-4 my-4 ">


        <div class="mb-4">
            <h5 class="section-title"><i class="fa-regular fa-credit-card"></i> Saved Cards</h5>
            <div class="section-divider"></div>
            <p class="text-muted">Manage and delete your saved cards here.</p>

            <div class="table-responsive">
                <table class="table table-bordered align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Default</th>
                            <th>Card Number</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="3" class="text-center text-muted">
                                You currently have no saved cards. To save a new card, simply fill in the card details
                                below.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

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


        <div>
            <h5 class="section-title"><i class="fa-solid fa-pen"></i> Add a New Card</h5>
            <p class="text-muted">You can save your new cards here to make future purchases quicker and easier.</p>

            <form>
                <div class="row g-3 align-items-center">
                    <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 card-icons bg-white border-0">
                                <img src="https://img.icons8.com/color/48/000000/mastercard-logo.png" />
                                <img src="https://img.icons8.com/color/48/000000/visa.png" />
                                <img src="https://img.icons8.com/color/48/000000/amex.png" />
                                <img src="https://img.icons8.com/color/48/000000/rupay.png" />
                            </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" placeholder="MM / YY">
                    </div>
                    <div class="col-md-3">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="CVC">
                            <span class="input-group-text bg-white">
                                <i class="fa-regular fa-credit-card"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="mt-3 col-md-6">
                    <select class="form-select">
                        <option selected>Pakistan</option>
                        <option>India</option>
                        <option>United Kingdom</option>
                        <option>United States</option>
                        <option>Canada</option>
                    </select>
                </div>

                <p class="text-muted small mt-3">
                    By providing your card information, you allow Pharmica Ltd to charge your card for future payments
                    in accordance with their terms.
                </p>

                <button class="btn button-blue mt-2">
                    <i class="fa-solid fa-lock"></i> Add Card
                </button>
            </form>
        </div>

    </div>
@endsection