@extends('layout.app')
@section('title', 'Dashboard')
@section('style')
    <style>
        /* Line 1 - Red */
        .ct-series-a .ct-line,
        .ct-series-a .ct-point,
        .ct-series-a .ct-area {
            stroke: #e74c3c;
            fill: rgba(231, 76, 60, 0.1);
        }

        /* Line 2 - Blue */
        .ct-series-b .ct-line,
        .ct-series-b .ct-point,
        .ct-series-b .ct-area {
            stroke: #3498db;
            fill: rgba(52, 152, 219, 0.1);
        }

        /* Line 3 - Green */
        .ct-series-c .ct-line,
        .ct-series-c .ct-point,
        .ct-series-c .ct-area {
            stroke: #2ecc71;
            fill: rgba(46, 204, 113, 0.1);
        }

        /* Line 4 - Purple */
        .ct-series-d .ct-line,
        .ct-series-d .ct-point,
        .ct-series-d .ct-area {
            stroke: #9b59b6;
            fill: rgba(155, 89, 182, 0.1);
        }
    </style>
    <style>
        /* Skeleton shimmer animation */
        @keyframes placeholderShimmer {
            0% {
                background-position: -200px 0;
            }

            100% {
                background-position: 200px 0;
            }
        }

        .placeholder-glow span.placeholder {
            display: inline-block;
            height: 1em;
            border-radius: 0.25rem;
            background-color: #e0e0e0;
            background-image: linear-gradient(90deg,
            #e0e0e0 0px,
            #f0f0f0 40px,
            #e0e0e0 80px);
            background-size: 200px 100%;
            animation: placeholderShimmer 1.5s infinite linear;
        }

        /* Optional: different widths for title/count placeholders */
        .placeholder-glow .col-6 {
            width: 60%;
        }

        .placeholder-glow .col-4 {
            width: 40%;
        }

        .ct-label.ct-horizontal.ct-end {
            transform: rotate(0deg);  /* horizontal labels */
            font-size: 10px;
            text-anchor: middle;
        }
        .line-chart-filled,
        .line-chart-filled2 {
            height: 150px;     /* fixed height */
            min-height: 200px; /* ensure it doesn't shrink */
        }
        @media (max-width: 768px) {
            .line-chart-filled,
            .line-chart-filled2 {
                height: 150px;
                min-height: 200px;
            }
        }
    </style>

@endsection
@section('main')
    <div class="row mt-2" id="count-cards-container"></div>
    <div class="row">
        <div class="card border-0 shadow">
            <div class="card-header">
                <h6>Checkbill Process</h6>
                <div class="col-md-12">
                    <div class="line-chart-filled"></div>
                </div>
            </div>

            <div class="card-header">
                <h6>Paybill Process</h6>
                <div class="col-md-12">
                    <div class="line-chart-filled2"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-12 col-xl-8">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="card border-0 shadow">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h2 class="fs-5 fw-bold mb-0">Page visits</h2>
                                </div>
                                <div class="col text-end">
                                    <a href="#" class="btn btn-sm btn-primary">See all</a>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table align-items-center table-flush">
                                <thead class="thead-light">
                                <tr>
                                    <th class="border-bottom" scope="col">Page name</th>
                                    <th class="border-bottom" scope="col">Page Views</th>
                                    <th class="border-bottom" scope="col">Bounce rate</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xxl-6 mb-4">
                    <div class="card border-0 shadow">
                        <div class="p-2 border-bottom d-flex align-items-center justify-content-between">
                            <h6 class="">Team members</h6>
                            <a href="{{url('team-members-view')}}" class="btn btn-sm btn-primary">See all</a>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush list my--3" id="team-members-list">
                                <!-- AJAX-filled content -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="col-12 px-0 mb-4">
                <div class="card border-0 shadow">
                    <div class="card-header d-flex flex-row align-items-center flex-0 border-bottom">
                        <div class="d-block">
                            <div class="h6 fw-normal text-gray mb-2">Last 7 Days Summary</div>
                            <h2 class="h3 fw-extrabold">
                                <span id="total-orders">0</span>
                            </h2>
                            <div class="small mt-2">
                                <span id="trend-icon" class="fas fa-angle-up text-success"></span>
                                <span id="trend-percent" class="text-success fw-bold">0%</span>
                            </div>
                        </div>
                        <div class="d-block ms-auto">
                            <div class="d-flex align-items-center text-end mb-2">
                                <span class="dot rounded-circle bg-gray-800 me-2"></span>
                                <span class="fw-normal small">CHACKBILL</span>
                            </div>
                            <div class="d-flex align-items-center text-end">
                                <span class="dot rounded-circle bg-secondary me-2"></span>
                                <span class="fw-normal small">PAYBILL</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-2">
                        <div class="bar-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-12 px-0 mb-4">
                <div class="card border-0 shadow">
                    <div class="card-body">
                        <div>Request Summary</div>
                        <div class="card-body">
                            <div class="pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="theme-settings card bg-gray-800 pt-2 collapse" id="theme-settings">
        <div class="card-body bg-gray-800 text-white pt-4">
            <button type="button" class="btn-close theme-settings-close" aria-label="Close" data-bs-toggle="collapse"
                    href="#theme-settings" role="button" aria-expanded="false" aria-controls="theme-settings"></button>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <p class="m-0 mb-1 me-4 fs-7">Open source <span role="img" aria-label="gratitude">💛</span></p>
                <a class="github-button" href="https://github.com/themesberg/volt-bootstrap-5-dashboard"
                   data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star"
                   data-size="large" data-show-count="true"
                   aria-label="Star themesberg/volt-bootstrap-5-dashboard on GitHub">Star</a>
            </div>
            <a href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard" target="_blank"
               class="btn btn-secondary d-inline-flex align-items-center justify-content-center mb-3 w-100">
                Download
                <svg class="icon icon-xs ms-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                          d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
                          clip-rule="evenodd"></path>
                </svg>
            </a>
            <p class="fs-7 text-gray-300 text-center">Available in the following technologies:</p>
            <div class="d-flex justify-content-center">
                <a class="me-3" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"
                   target="_blank">
                    <img src="{{ asset('assets//img/technologies/bootstrap-5-logo.svg') }}" class="image image-xs">
                </a>
                <a href="https://demo.themesberg.com/volt-react-dashboard/#/" target="_blank">
                    <img src="{{ asset('assets//img/technologies/react-logo.svg') }}" class="image image-xs">
                </a>
            </div>
        </div>
    </div>
    <div class="card theme-settings bg-gray-800 theme-settings-expand" id="theme-settings-expand">
        <div class="card-body bg-gray-800 text-white rounded-top p-3 py-2">
        <span class="fw-bold d-inline-flex align-items-center h6">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
            </svg>
            Settings
        </span>
        </div>
    </div>
@endsection
@section('script')

@endsection