@extends('front.layout.master')


@section('content')
    <!-- Page content-->
    <div class="container py-5 mt-4 mt-lg-5 mb-lg-4 my-xl-5">
        <div class="row pt-sm-2 pt-lg-0">
            <aside class="col-lg-3 pe-lg-4 pe-xl-5 mt-n3">
                <div class="position-lg-sticky top-0">
                  <div class="d-none d-lg-block" style="padding-top: 105px;"></div>
                  <div class="offcanvas-lg offcanvas-start" id="sidebarAccount">
                    <button class="btn-close position-absolute top-0 end-0 mt-3 me-3 d-lg-none" type="button" data-bs-dismiss="offcanvas" data-bs-target="#sidebarAccount"></button>
                    <div class="offcanvas-body">
                      <div class="pb-2 pb-lg-0 mb-4 mb-lg-5"><img class="d-block rounded-circle mb-2" src="assets/img/avatar/02.jpg" width="80" alt="Isabella Bocouse">
                        <h3 class="h5 mb-1">{{ $customer->account_name }}</h3>
                        <p class="fs-sm text-muted mb-0">{{ $customer->email }}</p>
                      </div>
                      <x-front.sidebar />
                    </div>
                  </div>
                </div>
              </aside>
            <!-- Page content-->
            <div class="col-lg-9 pt-4 pb-2 pb-sm-4">
                <h1 class="h2 mb-4">Digital Card</h1>
                <!-- Basic info-->
                <section class="card border-0 py-1 p-md-2 p-xl-3 p-xxl-4 mb-4">
                    <div class="card-body">
                        <style>
                            .center-container {
                                height: 100vh;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            .white-container {
                                background-color: rgba(255, 255, 255, 0.95);
                                max-width: 484px;
                                height: auto;
                                border-radius: 3px;
                                text-align: center;
                            }

                            .avatar {
                                background-image: url("https://image.ibb.co/cAfBr5/Edmund.jpg");
                                background-size: cover;
                                border-radius: 100%;
                                width: 150px;
                                height: 150px;
                                border: 1px solid darkgrey;
                                margin: auto;
                                position: relative;
                                top: -100px;
                            }

                            .description {
                                font-family: Source Sans Pro, Helvatica, sans-serif;
                                color: #313f47;
                                line-height: 2;
                                text-transform: uppercase;
                                letter-spacing: 0.2em;
                            }

                            .icon-circle {
                                width: 45px;
                                height: 45px;
                                border-radius: 100%;
                                border: solid 1px #c8cccf;
                                margin: auto;
                                position: relative;
                            }

                            a .icon {
                                color: #3999ac;
                                opacity: 0.5;
                                position: absolute;
                                left: 8px;
                                top: 4px;
                            }


                            a .icon:hover {
                                opacity: 1;
                            }
                        </style>

                        <div class="center-container">
                            <div class="container">
                                <div class="row">
                                    <div class="col-xs-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                                        <div class="white-container"
                                            style="  border: 2px solid #071e5c;  border-radius: 5%;    padding: 20px 0px 20px 0px;">

                                            <div class="card-header">
                                                <img src="https://med-right.com/wp-content/uploads/2020/06/Med-Right-Logo.png"
                                                    width="150px" />
                                                <br />
                                                <strong>Discount Card</strong>
                                            </div>

                                            <div
                                                style="Background:#071e5c;padding:20px 0px 20px 0px;margin-top: 100px;height:150px;margin-bottom:20px">
                                                <div class="avatar"></div>
                                                <h6 style="color:#fff;position: relative; top: -75px; ">{{ $customer->account_name }}</h6>
                                            </div>

                                            <div class="description">
                                                <table
                                                    style="width: 75%;text-align: left;font-size: 10pt;letter-spacing: normal;text-transform: none;margin: auto;    margin-bottom: 20px;s">
                                                    <tr>
                                                        <th>Company : </th>
                                                        <td>Contact</td>
                                                    </tr>
                                                    <tr>
                                                        <th>DOB :</th>
                                                        <td>Maria Anders</td>
                                                    </tr>
                                                    <tr>
                                                        <th> Disscount ID :</th>
                                                        <td>3245235</td>
                                                    </tr>
                                                    <tr>
                                                        <th> Expire Date :</th>
                                                        <td>{{ $customer->clientAccount->end_date }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th> Package Name :</th>
                                                        <td> {{ $customer->clientAccount->customerPackage->name }} </td>
                                                    </tr>
                                                </table>
                                                <strong> يمنح المشترك خصما خاصا<br /> مع السداد نقدا </strong>
                                            </div>
                                            <div class="card-footer">
                                                <img src="https://carelite.app/front/assets/img/Carelite_logos.png"
                                                    width="150px" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </section>




            </div>
        </div>
    </div>
    <!-- Divider for dark mode only-->
    <hr class="d-none d-dark-mode-block">
    <!-- Sidebar toggle button-->
    <button class="d-lg-none btn btn-sm fs-sm btn-primary w-100 rounded-0 fixed-bottom" data-bs-toggle="offcanvas"
        data-bs-target="#sidebarAccount"><i class="ai-menu me-2"></i>Account menu</button>
@endsection