<!DOCTYPE html>
<html lang="en">
    <%- include('../head'); %>

        <body style="background-color: #eeeeee;">
            <%- include('./header-logon'); %>
                <!--Main layout-->
                <main>
                    <div class="container col-lg-12" style="margin-top: 150px">
                        <div class="px-3 py-4 my-4 text-center">
                            <h1 data-aos="flip-right" class="display-5  text-primary lead">Customer Portal</h1>
                            <div class="col-lg-6 mx-auto">
                                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                                </div>
                            </div>
                        </div>


                        <section>
                            <div class="row m-4">
                                <div class="col-lg-3">
                                    <div data-aos="fade-right" class="card text-center">
                                        <div class="card-header text-primary bg-light border-0">
                                            Current Pakages
                                        </div>

                                        <div class="card-body">

                                            <h2>20 mbps</h2>

                                            <div class="d-flex justify-content-between">
                                                <table class="table table-borderless">
                                                    <thead>
                                                        <tr>
                                                            <th>Expair at</th>
                                                            <th>Balance</th>


                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td><span class="mb-2 text-danger">${date}</span></td>
                                                            <td><span class="mb-2 text-success">${bill}</span></td>

                                                        </tr>
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div data-aos="fade-down-right" class="card text-center">
                                        <div class="card-header text-primary bg-light border-0">
                                            Bill Pay
                                        </div>

                                        <div class="card-body">
                                            <h4>20 mbps</h4>
                                            <hr>
                                            <h6>Buy Now</h6>
                                            <div class="input-group mb-3">
                                                <button class="btn btn-primary dropdown-toggle" type="button"
                                                    data-mdb-toggle="dropdown" aria-expanded="false">
                                                    Pakages
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                                    <li><a class="dropdown-item" href="#">Something else here</a>
                                                    </li>
                                                    <li>
                                                        <hr class="dropdown-divider" />
                                                    </li>
                                                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                                                </ul>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with dropdown button" />
                                            </div>
                                            <button type="button" class="btn btn-success">Buy Now</button>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-5  mb-3">
                                    <div data-aos="fade-up-left" class="card text-center">
                                        <div class="card-header text-primary bg-light border-0">
                                            Useage
                                        </div>
                                        <div class="card-body">
                                            <div class="col-lg-12">
                                                <canvas data-mdb-chart="line" data-mdb-dataset-label="Traffic"
                                                    data-mdb-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
                                                    data-mdb-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
                                                    class="chart chartjs-render-monitor" width="476" height="238"
                                                    style="display: block; width: 476px; height: 238px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        </section>
                        <section>
                            <div class="col-lg-12 m-4">
                                <div data-aos="fade-right" class="card text-center">
                                    <div class="card-header bg-light border-0">
                                        Payment History
                                    </div>
                                    <div class="card-body">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Amount</th>
                                                    <th>Tr no</th>
                                                    <th>Status</th>
                                                    <th>Pakage</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>

                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                        </section>

                        <section>
                            <div class="col-lg-12 m-4">
                                <div data-aos="fade-left" class="card text-center">
                                    <div class="card-header bg-light border-0">
                                        Tricket
                                    </div>
                                    <div class="card-body">

                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Tricket No</th>
                                                    <th>Issue</th>
                                                    <th>Status</th>
                                                    <th>Update</th>
                                                    <th>Update Time</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>
                                                    <td>null</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="card-footer">
                                        <h5 class="text-danger">Report Issue</h5>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="Issue" />
                                            <button class="btn btn-outline-danger" type="button" id="button-addon1"
                                                data-mdb-ripple-color="dark">
                                                Open Tricket
                                            </button>
                                        </div>
                                    </div>
                                </div>
                        </section>
                    </div>
                    </div>
                </main>
                <%- include('../footer'); %>
        </body>

</html>