@extends('layouts.app')

@section('content')

    @if(Auth::user()->status == 0)
    <style>
        // Table colors
        table-bg:#eeeeee;
        $plan-header-bg:#34495E;
        $single-table-bg:#fff;
        $table-header:#fff;
        $table-border-color:lighten($plan-header-bg, 60%);
        $plan-price-color: #fff;
        $plan-price-month-color: #8394AE;
        $plan-price-border: lighten($plan-header-bg, 20%);
        #pricing-tables {
            background-color: $table-bg;
            padding: 30px 0;
        }

        .single-table {
            background: #fff;
            -webkit-transition: all 0.20s linear;
            transition: all 0.20s linear;
            &:hover {
                box-shadow: 0px 3px 3px 0px #888888;
                -webkit-transition: all 0.20s linear;
                transition: all 0.20s linear;
            }
            & .plan-header {
                background: #34495E;
                color: #fff;
                text-transform: capitalize;
                padding: 2px 0;
                & h3 {
                    margin: 0;
                    padding: 20px 0 5px 0;
                    text-transform: uppercase;
                }
            }
            & .plan-price {
                color: #fff;
                padding: 10px 0;
                margin: 0;
                font-size: 30px;
                border-top: 2px solid lighten(#34495E, 20%);
                font-weight: bold;
                & span {
                    font-size: 18px;
                    font-weight: normal;
                }
            }
            & ul {
                margin: 0;
                padding: 20px 0;
                list-style: none;
                & li {
                    padding: 8px 0;
                    margin: 0 20px;
                    border-bottom: 1px solid lighten(#34495E, 60%);
                    font-size: 15px;
                }
            }
            & .plan-submit {
                display: inline-block;
                text-decoration: none;
                margin: 20px 0 30px 0;
                padding: 10px 40px;
                border: 1px solid #34495E;
                color: #34495E;
                font-size: 15px;
                text-transform: uppercase;
            }
            /* Bounce To Right */
            .hvr-bounce-to-right {
                display: inline-block;
                vertical-align: middle;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                box-shadow: 0 0 1px transparent;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                -moz-osx-font-smoothing: grayscale;
                position: relative;
                transition-property: color;
                transition-duration: 0.5s;
            }
            .hvr-bounce-to-right:before {
                content: "";
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: #34495E;
                -webkit-transform: scaleX(0);
                -ms-transform: scaleX(0);
                transform: scaleX(0);
                -webkit-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                transform-origin: 0 50%;
                transition-property: -webkit-transform;
                transition-property: transform;
                transition-property: transform, -webkit-transform;
                transition-duration: 0.5s;
                transition-timing-function: ease-out;
            }
            .hvr-bounce-to-right:hover,
            .hvr-bounce-to-right:focus,
            .hvr-bounce-to-right:active {
                color: white;
            }
            .hvr-bounce-to-right:hover:before,
            .hvr-bounce-to-right:focus:before,
            .hvr-bounce-to-right:active:before {
                -webkit-transform: scaleX(1);
                -ms-transform: scaleX(1);
                transform: scaleX(1);
                transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
            }
        }

    </style>

    <section id="pricing-tables">
        <div class="row">

            @if(count($packages) > 0)
                @foreach ($packages as $package)
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="single-table text-center">
                            <div class="plan-header">
                                <h3>{{ $package->name??'' }}</h3>
                                <p>Up to 60% Offer</p>
                                <h4 class="plan-price">৳ {{ $package->price??0 }}<span>/Year</span></h4>
                            </div>


                            <ul class="plan-features" style="text-align: left;">
                               {!! $package->description??'' !!}
                            </ul>
                            <a type="button" data-id="{{ $package->id }}" amount="{{ $package->price ?? 0}}" class="plan-submit buyNow hvr-bounce-to-right">buy now</a>
                        </div>
                    </div>
                @endforeach
            @endif



            <!-- Modal -->
            <div class="modal fade" id="buyNowModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Payment Info</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background: #fff; border: none;">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="{{ url('package-payment') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-719">
                                <div class="mb-3">
                                    <label class="form-label" for="payment_method">Payment Method</label>
                                    <select name="payment_method" class="form-control">
                                        <option value="bKash">bKash</option>
                                        <option value="Nagod">Nagod</option>
                                        <option value="Rocket">Rocket</option>
                                        <option value="Upay">Upay</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="phone">Phone</label>
                                    <input class="form-control form-control-sm" name="package_id" id="package_id" type="hidden" placeholder="Required">
                                    <input class="form-control form-control-sm" name="amount" id="amount" type="hidden" placeholder="Required">
                                    <input class="form-control form-control-sm" name="phone" id="phone" type="text" placeholder="Required">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="transaction_no">Transaction No</label>
                                    <input class="form-control form-control-sm" name="transaction_no" id="transaction_no" type="text" placeholder="Required">
                                </div>

                                <div class="mb-3">
                                    <button type="submit" class="btn btn-info text-light btn-sm m-1" style="float: right">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-task') }}">
                                            </use>
                                        </svg>
                                        Submit
                                    </button>

                                    <a type="button" class="btn btn-warning text-light btn-sm m-1 close"  style="float: right">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-x') }}">
                                            </use>
                                        </svg>
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @else
        <div class="container-lg">
            <div class="row">
                <div class="col-sm-6 col-lg-3">
                    <div class="card mb-4 text-white bg-primary">
                        <div class="card-body pb-0 d-flex justify-content-between align-items-start">
                            <div>
                                <div class="fs-4 fw-semibold">26K <span class="fs-6 fw-normal">(-12.4%
                                        <svg class="icon">
                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-arrow-bottom')}}"></use>
                                        </svg>)</span></div>
                                <div>Users</div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-transparent text-white p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                    </svg>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
                            </div>
                        </div>
                        <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                            <canvas class="chart" id="card-chart1" height="70"></canvas>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                    <div class="card mb-4 text-white bg-info">
                        <div class="card-body pb-0 d-flex justify-content-between align-items-start">
                            <div>
                                <div class="fs-4 fw-semibold">$6.200 <span class="fs-6 fw-normal">(40.9%
                                        <svg class="icon">
                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-arrow-top')}}"></use>
                                        </svg>)</span></div>
                                <div>Income</div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-transparent text-white p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                    </svg>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
                            </div>
                        </div>
                        <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                            <canvas class="chart" id="card-chart2" height="70"></canvas>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                    <div class="card mb-4 text-white bg-warning">
                        <div class="card-body pb-0 d-flex justify-content-between align-items-start">
                            <div>
                                <div class="fs-4 fw-semibold">2.49% <span class="fs-6 fw-normal">(84.7%
                                        <svg class="icon">
                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-arrow-top')}}"></use>
                                        </svg>)</span></div>
                                <div>Conversion Rate</div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-transparent text-white p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                    </svg>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
                            </div>
                        </div>
                        <div class="c-chart-wrapper mt-3" style="height:70px;">
                            <canvas class="chart" id="card-chart3" height="70"></canvas>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-3">
                    <div class="card mb-4 text-white bg-danger">
                        <div class="card-body pb-0 d-flex justify-content-between align-items-start">
                            <div>
                                <div class="fs-4 fw-semibold">44K <span class="fs-6 fw-normal">(-23.6%
                                        <svg class="icon">
                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-arrow-bottom')}}"></use>
                                        </svg>)</span></div>
                                <div>Sessions</div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-transparent text-white p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <svg class="icon">
                                        <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                    </svg>
                                </button>
                                <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div>
                            </div>
                        </div>
                        <div class="c-chart-wrapper mt-3 mx-3" style="height:70px;">
                            <canvas class="chart" id="card-chart4" height="70"></canvas>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
            </div>
            <!-- /.row-->
            <div class="card mb-12">
                <div class="card-body p-4">
                    <figure class="highcharts-figure" style="max-width: 100%;">
                        <div id="container"></div>
                    </figure>
                </div>
            </div>
            <!-- /.card.mb-4-->
            {{-- <div class="row">
                <div class="col-sm-6 col-lg-4">
                    <div class="card mb-4" style="--cui-card-cap-bg: #3b5998">
                        <div class="card-header position-relative d-flex justify-content-center align-items-center">
                            <svg class="icon icon-3xl text-white my-4">
                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-facebook-f')}}"></use>
                            </svg>
                            <div class="chart-wrapper position-absolute top-0 start-0 w-100 h-100">
                                <canvas id="social-box-chart-1" height="90"></canvas>
                            </div>
                        </div>
                        <div class="card-body row text-center">
                            <div class="col">
                                <div class="fs-5 fw-semibold">89k</div>
                                <div class="text-uppercase text-medium-emphasis small">friends</div>
                            </div>
                            <div class="vr"></div>
                            <div class="col">
                                <div class="fs-5 fw-semibold">459</div>
                                <div class="text-uppercase text-medium-emphasis small">feeds</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-4">
                    <div class="card mb-4" style="--cui-card-cap-bg: #00aced">
                        <div class="card-header position-relative d-flex justify-content-center align-items-center">
                            <svg class="icon icon-3xl text-white my-4">
                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-twitter')}}"></use>
                            </svg>
                            <div class="chart-wrapper position-absolute top-0 start-0 w-100 h-100">
                                <canvas id="social-box-chart-2" height="90"></canvas>
                            </div>
                        </div>
                        <div class="card-body row text-center">
                            <div class="col">
                                <div class="fs-5 fw-semibold">973k</div>
                                <div class="text-uppercase text-medium-emphasis small">followers</div>
                            </div>
                            <div class="vr"></div>
                            <div class="col">
                                <div class="fs-5 fw-semibold">1.792</div>
                                <div class="text-uppercase text-medium-emphasis small">tweets</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
                <div class="col-sm-6 col-lg-4">
                    <div class="card mb-4" style="--cui-card-cap-bg: #4875b4">
                        <div class="card-header position-relative d-flex justify-content-center align-items-center">
                            <svg class="icon icon-3xl text-white my-4">
                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-linkedin')}}"></use>
                            </svg>
                            <div class="chart-wrapper position-absolute top-0 start-0 w-100 h-100">
                                <canvas id="social-box-chart-3" height="90"></canvas>
                            </div>
                        </div>
                        <div class="card-body row text-center">
                            <div class="col">
                                <div class="fs-5 fw-semibold">500+</div>
                                <div class="text-uppercase text-medium-emphasis small">contacts</div>
                            </div>
                            <div class="vr"></div>
                            <div class="col">
                                <div class="fs-5 fw-semibold">292</div>
                                <div class="text-uppercase text-medium-emphasis small">feeds</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
            </div> --}}
            <!-- /.row-->
            {{-- <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <div class="card-header">Traffic &amp; Sales</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="border-start border-start-4 border-start-info px-3 mb-3"><small class="text-medium-emphasis">New Clients</small>
                                                <div class="fs-5 fw-semibold">9.123</div>
                                            </div>
                                        </div>
                                        <!-- /.col-->
                                        <div class="col-6">
                                            <div class="border-start border-start-4 border-start-danger px-3 mb-3"><small class="text-medium-emphasis">Recuring Clients</small>
                                                <div class="fs-5 fw-semibold">22.643</div>
                                            </div>
                                        </div>
                                        <!-- /.col-->
                                    </div>
                                    <!-- /.row-->
                                    <hr class="mt-0">
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Monday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 34%" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Tuesday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 94%" aria-valuenow="94" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Wednesday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Thursday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 91%" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Friday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Saturday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 53%" aria-valuenow="53" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-4">
                                        <div class="progress-group-prepend"><span class="text-medium-emphasis small">Sunday</span></div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-info" role="progressbar" style="width: 9%" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.col-->
                                <div class="col-sm-6">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="border-start border-start-4 border-start-warning px-3 mb-3"><small class="text-medium-emphasis">Pageviews</small>
                                                <div class="fs-5 fw-semibold">78.623</div>
                                            </div>
                                        </div>
                                        <!-- /.col-->
                                        <div class="col-6">
                                            <div class="border-start border-start-4 border-start-success px-3 mb-3"><small class="text-medium-emphasis">Organic</small>
                                                <div class="fs-5 fw-semibold">49.123</div>
                                            </div>
                                        </div>
                                        <!-- /.col-->
                                    </div>
                                    <!-- /.row-->
                                    <hr class="mt-0">
                                    <div class="progress-group">
                                        <div class="progress-group-header">
                                            <svg class="icon icon-lg me-2">
                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-user')}}"></use>
                                            </svg>
                                            <div>Male</div>
                                            <div class="ms-auto fw-semibold">43%</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group mb-5">
                                        <div class="progress-group-header">
                                            <svg class="icon icon-lg me-2">
                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-user-female')}}"></use>
                                            </svg>
                                            <div>Female</div>
                                            <div class="ms-auto fw-semibold">37%</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group">
                                        <div class="progress-group-header">
                                            <svg class="icon icon-lg me-2">
                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-google')}}"></use>
                                            </svg>
                                            <div>Organic Search</div>
                                            <div class="ms-auto fw-semibold me-2">191.235</div>
                                            <div class="text-medium-emphasis small">(56%)</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 56%" aria-valuenow="56" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group">
                                        <div class="progress-group-header">
                                            <svg class="icon icon-lg me-2">
                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-facebook-f')}}"></use>
                                            </svg>
                                            <div>Facebook</div>
                                            <div class="ms-auto fw-semibold me-2">51.223</div>
                                            <div class="text-medium-emphasis small">(15%)</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group">
                                        <div class="progress-group-header">
                                            <svg class="icon icon-lg me-2">
                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-twitter')}}"></use>
                                            </svg>
                                            <div>Twitter</div>
                                            <div class="ms-auto fw-semibold me-2">37.564</div>
                                            <div class="text-medium-emphasis small">(11%)</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 11%" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress-group">
                                        <div class="progress-group-header">
                                            <svg class="icon icon-lg me-2">
                                                <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-linkedin')}}"></use>
                                            </svg>
                                            <div>LinkedIn</div>
                                            <div class="ms-auto fw-semibold me-2">27.319</div>
                                            <div class="text-medium-emphasis small">(8%)</div>
                                        </div>
                                        <div class="progress-group-bars">
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 8%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.col-->
                            </div>
                            <!-- /.row--><br>
                            <div class="table-responsive">
                                <table class="table border mb-0">
                                    <thead class="table-light fw-semibold">
                                        <tr class="align-middle">
                                            <th class="text-center">
                                                <svg class="icon">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-people')}}"></use>
                                                </svg>
                                            </th>
                                            <th>User</th>
                                            <th class="text-center">Country</th>
                                            <th>Usage</th>
                                            <th class="text-center">Payment Method</th>
                                            <th>Activity</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="align-middle">
                                            <td class="text-center">
                                                <div class="avatar avatar-md"><img class="avatar-img" src="{{ asset('backend/assets/img/avatars/1.jpg')}}" alt="user@email.com"><span class="avatar-status bg-success"></span></div>
                                            </td>
                                            <td>
                                                <div>Yiorgos Avraamu</div>
                                                <div class="small text-medium-emphasis"><span>New</span> | Registered: Jan 1, 2020</div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/flag.svg#cif-us')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="clearfix">
                                                    <div class="float-start">
                                                        <div class="fw-semibold">50%</div>
                                                    </div>
                                                    <div class="float-end"><small class="text-medium-emphasis">Jun 11, 2020 - Jul 10, 2020</small></div>
                                                </div>
                                                <div class="progress progress-thin">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-cc-mastercard')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="small text-medium-emphasis">Last login</div>
                                                <div class="fw-semibold">10 sec ago</div>
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-transparent p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <svg class="icon">
                                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                                        </svg>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Info</a><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item text-danger" href="#">Delete</a></div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="align-middle">
                                            <td class="text-center">
                                                <div class="avatar avatar-md"><img class="avatar-img" src="{{ asset('backend/assets/img/avatars/2.jpg')}}" alt="user@email.com"><span class="avatar-status bg-danger"></span></div>
                                            </td>
                                            <td>
                                                <div>Avram Tarasios</div>
                                                <div class="small text-medium-emphasis"><span>Recurring</span> | Registered: Jan 1, 2020</div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/flag.svg#cif-br')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="clearfix">
                                                    <div class="float-start">
                                                        <div class="fw-semibold">10%</div>
                                                    </div>
                                                    <div class="float-end"><small class="text-medium-emphasis">Jun 11, 2020 - Jul 10, 2020</small></div>
                                                </div>
                                                <div class="progress progress-thin">
                                                    <div class="progress-bar bg-info" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-cc-visa')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="small text-medium-emphasis">Last login</div>
                                                <div class="fw-semibold">5 minutes ago</div>
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-transparent p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <svg class="icon">
                                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                                        </svg>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Info</a><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item text-danger" href="#">Delete</a></div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="align-middle">
                                            <td class="text-center">
                                                <div class="avatar avatar-md"><img class="avatar-img" src="{{ asset('backend/assets/img/avatars/3.jpg')}}" alt="user@email.com"><span class="avatar-status bg-warning"></span></div>
                                            </td>
                                            <td>
                                                <div>Quintin Ed</div>
                                                <div class="small text-medium-emphasis"><span>New</span> | Registered: Jan 1, 2020</div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/flag.svg#cif-in')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="clearfix">
                                                    <div class="float-start">
                                                        <div class="fw-semibold">74%</div>
                                                    </div>
                                                    <div class="float-end"><small class="text-medium-emphasis">Jun 11, 2020 - Jul 10, 2020</small></div>
                                                </div>
                                                <div class="progress progress-thin">
                                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 74%" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-cc-stripe')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="small text-medium-emphasis">Last login</div>
                                                <div class="fw-semibold">1 hour ago</div>
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-transparent p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <svg class="icon">
                                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                                        </svg>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Info</a><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item text-danger" href="#">Delete</a></div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="align-middle">
                                            <td class="text-center">
                                                <div class="avatar avatar-md"><img class="avatar-img" src="{{ asset('backend/assets/img/avatars/4.jpg')}}" alt="user@email.com"><span class="avatar-status bg-secondary"></span></div>
                                            </td>
                                            <td>
                                                <div>Enéas Kwadwo</div>
                                                <div class="small text-medium-emphasis"><span>New</span> | Registered: Jan 1, 2020</div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/flag.svg#cif-fr')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="clearfix">
                                                    <div class="float-start">
                                                        <div class="fw-semibold">98%</div>
                                                    </div>
                                                    <div class="float-end"><small class="text-medium-emphasis">Jun 11, 2020 - Jul 10, 2020</small></div>
                                                </div>
                                                <div class="progress progress-thin">
                                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 98%" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-cc-paypal')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="small text-medium-emphasis">Last login</div>
                                                <div class="fw-semibold">Last month</div>
                                            </td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-transparent p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <svg class="icon">
                                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                                        </svg>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Info</a><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item text-danger" href="#">Delete</a></div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="align-middle">
                                            <td class="text-center">
                                                <div class="avatar avatar-md"><img class="avatar-img" src="{{ asset('backend/assets/img/avatars/5.jpg')}}" alt="user@email.com"><span class="avatar-status bg-success"></span></div>
                                            </td>
                                            <td>
                                                <div>Agapetus Tadeáš</div>
                                                <div class="small text-medium-emphasis"><span>New</span> | Registered: Jan 1, 2020</div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/flag.svg#cif-es')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="clearfix">
                                                    <div class="float-start">
                                                        <div class="fw-semibold">22%</div>
                                                    </div>
                                                    <div class="float-end"><small class="text-medium-emphasis">Jun 11, 2020 - Jul 10, 2020</small></div>
                                                </div>
                                                <div class="progress progress-thin">
                                                    <div class="progress-bar bg-info" role="progressbar" style="width: 22%" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-cc-apple-pay')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="small text-medium-emphasis">Last login</div>
                                                <div class="fw-semibold">Last week</div>
                                            </td>
                                            <td>
                                                <div class="dropdown dropup">
                                                    <button class="btn btn-transparent p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <svg class="icon">
                                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                                        </svg>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Info</a><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item text-danger" href="#">Delete</a></div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="align-middle">
                                            <td class="text-center">
                                                <div class="avatar avatar-md"><img class="avatar-img" src="{{ asset('backend/assets/img/avatars/6.jpg')}}" alt="user@email.com"><span class="avatar-status bg-danger"></span></div>
                                            </td>
                                            <td>
                                                <div>Friderik Dávid</div>
                                                <div class="small text-medium-emphasis"><span>New</span> | Registered: Jan 1, 2020</div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/flag.svg#cif-pl')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="clearfix">
                                                    <div class="float-start">
                                                        <div class="fw-semibold">43%</div>
                                                    </div>
                                                    <div class="float-end"><small class="text-medium-emphasis">Jun 11, 2020 - Jul 10, 2020</small></div>
                                                </div>
                                                <div class="progress progress-thin">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <svg class="icon icon-xl">
                                                    <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/brand.svg#cib-cc-amex')}}"></use>
                                                </svg>
                                            </td>
                                            <td>
                                                <div class="small text-medium-emphasis">Last login</div>
                                                <div class="fw-semibold">Yesterday</div>
                                            </td>
                                            <td>
                                                <div class="dropdown dropup">
                                                    <button class="btn btn-transparent p-0" type="button" data-coreui-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <svg class="icon">
                                                            <use xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-options')}}"></use>
                                                        </svg>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Info</a><a class="dropdown-item" href="#">Edit</a><a class="dropdown-item text-danger" href="#">Delete</a></div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.col-->
            </div> --}}
            <!-- /.row-->
        </div>
    @endif
@endsection



@section('script')
    <script>
        let url = "{{ url('/') }}"
        $.ajax({
            type: "GET",
            url: url+"/chart",
            success: function(datas){
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Monthly Average Statistics'
                    },
                    subtitle: {
                        text: ''
                    },
                    xAxis: {
                        categories: [
                            'Jan',
                            'Feb',
                            'Mar',
                            'Apr',
                            'May',
                            'Jun',
                            'Jul',
                            'Aug',
                            'Sep',
                            'Oct',
                            'Nov',
                            'Dec'
                        ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Ratio'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0
                        }
                    },
                    series: [{
                        name: 'Booking',
                        data: [datas]

                    }, {
                        name: 'Hotel',
                        data: []

                    }]
                });

            }
        });

        $('.buyNow').on('click', function(){
            let data_id = $(this).attr('data-id');
            let amount = $(this).attr('amount');
            $('#package_id').val(data_id);
            $('#amount').val(amount);
            $('#buyNowModal').modal('show');
        });

        $('.close').on('click', function(){
            $('#buyNowModal').modal('hide');
        });
    </script>
@endsection