@extends('layouts.company')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">Dashboard</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Hadify</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Staff</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +16.24 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4">
                                <span class="counter-value" data-target="50">0</span>
                            </h4>
                            <a href="users.php" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-success-subtle rounded fs-3">
                                        <i class="bx bx-user-circle text-success"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Active Staff</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-danger fs-14 mb-0">
                                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -3.57 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="120">0</span></h4>
                            <a href="users.php" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-info-subtle rounded fs-3">
                                        <i class="bx bx-user-pin text-info"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->

        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Challenges</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-success fs-14 mb-0">
                                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +16.24 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="52">0</span>k</h4>
                            <a href="#" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-success-subtle rounded fs-3">
                                        <i class="ri-honour-line text-success"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
        <div class="col-lg-4 col-md-6">
            <!-- card -->
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Active Challenges</p>
                        </div>
                        <!-- <div class="flex-shrink-0">
                                            <h5 class="text-danger fs-14 mb-0">
                                                <i class="ri-arrow-right-down-line fs-13 align-middle"></i> -3.57 %
                                            </h5>
                                        </div> -->
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" data-target="27">0</span></h4>
                            <a href="#" class="text-decoration-underline">View all</a>
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                                    <span class="avatar-title bg-info-subtle rounded fs-3">
                                        <i class="ri-honour-fill text-info"></i>
                                    </span>
                        </div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>

    <div class="row">
        <div class="col-xxl-3 col-md-6 d-none">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Sales Forecast</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Nov 2024<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Oct 2024</a>
                                <a class="dropdown-item" href="#">Nov 2023</a>
                                <a class="dropdown-item" href="#">Dec 2023</a>
                                <a class="dropdown-item" href="#">Jan 2024</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->
                <div class="card-body pb-0">
                    <div
                        id="sales-forecast-chart"
                        data-colors='["--vz-primary", "--vz-success", "--vz-warning"]'
                        data-colors-minimal='["--vz-primary-rgb, 0.75", "--vz-primary", "--vz-primary-rgb, 0.55"]'
                        data-colors-creative='["--vz-primary", "--vz-secondary", "--vz-info"]'
                        data-colors-corporate='["--vz-primary", "--vz-success", "--vz-secondary"]'
                        data-colors-galaxy='["--vz-primary", "--vz-secondary", "--vz-info"]'
                        data-colors-classic='["--vz-primary", "--vz-warning", "--vz-secondary"]'
                        class="apex-charts"
                        dir="ltr"
                    ></div>
                </div>
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->

        <div class="col-xxl-3 col-md-6 d-none">
            <div class="card card-height-100">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Most Active Places</h4>
                    <div>
                        <button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
                            ALL
                        </button>
                        <button type="button" class="btn btn-soft-primary btn-sm material-shadow-none">
                            1M
                        </button>
                        <button type="button" class="btn btn-soft-secondary btn-sm material-shadow-none">
                            6M
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div>
                        <div
                            id="countries_charts"
                            data-colors='["--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-danger", "--vz-info", "--vz-info", "--vz-info", "--vz-info", "--vz-info"]'
                            data-colors-minimal='["--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary-rgb, 0.45", "--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary"]'
                            data-colors-material='["--vz-primary", "--vz-primary", "--vz-info", "--vz-info", "--vz-danger", "--vz-primary", "--vz-primary", "--vz-warning", "--vz-primary", "--vz-primary"]'
                            data-colors-galaxy='["--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4", "--vz-primary", "--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4", "--vz-primary-rgb, 0.4"]'
                            data-colors-classic='["--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary-rgb, 0.45", "--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary", "--vz-primary"]'
                            class="apex-charts"
                            dir="ltr"
                        ></div>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->

        <div class="col-12">
            <div class="card card-height-100">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Users Overview</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="fw-semibold text-uppercase fs-12">Sort by: </span><span class="text-muted">Current Year<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">Current Year</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->
                <div class="card-body px-0">
                    <div
                        id="revenue-expenses-charts"
                        data-colors='["--vz-success", "--vz-danger"]'
                        data-colors-minimal='["--vz-primary", "--vz-info"]'
                        data-colors-interactive='["--vz-info", "--vz-primary"]'
                        data-colors-galaxy='["--vz-primary", "--vz-secondary"]'
                        data-colors-classic='["--vz-primary", "--vz-secondary"]'
                        class="apex-charts"
                        dir="ltr"
                    ></div>
                </div>
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Active Challenges</h4>
                    <div class="flex-shrink-0">
                        <div class="dropdown card-header-dropdown">
                            <a class="text-reset dropdown-btn" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="text-muted">02 Nov 2024 to 31 Dec 2024<i class="mdi mdi-chevron-down ms-1"></i></span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <a class="dropdown-item" href="#">Today</a>
                                <a class="dropdown-item" href="#">Last Week</a>
                                <a class="dropdown-item" href="#">Last Month</a>
                                <a class="dropdown-item" href="#">Current Year</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end card header -->

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table class="table table-bordered table-hover table-nowrap align-middle mb-0">
                            <thead class="table-light">
                            <tr class="text-muted">
                                <th scope="col" style="width: 40px;">Sl. No</th>
                                <th scope="col">Challenge Name</th>
                                <th scope="col">Target</th>
                                <th scope="col">Start Date</th>
                                <th scope="col">End Date</th>
                                <th scope="col">Progress</th>
                                <th scope="col">Status</th>
                                <th scope="col">Actions</th>
                                <!-- <th scope="col" style="width: 20%;">Booking Date and time</th> -->
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>Running</td>
                                <td>50KM</td>
                                <td>Sep 20, 2024</td>
                                <td>Dec 20, 2024</td>
                                <!-- <td class="customer_name"><span class="badge bg-secondary-subtle text-secondary text-uppercase">In Progress</span></td> -->
                                <td class="customer_name">
                                    <div class="progress animated-progress custom-progress progress-label">
                                        <div class="progress-bar bg-dark" role="progressbar" style="width: 26%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
                                            <div class="label">26%</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="status">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked />
                                            <!-- <label class="form-check-label" for="SwitchCheck1">Active</label> -->
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>

                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                            <li><a class="dropdown-item" href="create-challenge.php">Edit</a></li>
                                            <li><a class="dropdown-item" href="#">Delete</a></li>
                                            <li><a class="dropdown-item" href="view-challengers.php">View Challengers</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Walking</td>
                                <td>20KM</td>
                                <td>Sep 20, 2024</td>
                                <td>Dec 20, 2024</td>
                                <!-- <td class="customer_name"><span class="badge bg-secondary-subtle text-secondary text-uppercase">In Progress</span></td> -->
                                <td class="customer_name">
                                    <div class="progress animated-progress custom-progress progress-label">
                                        <div class="progress-bar bg-dark" role="progressbar" style="width: 80%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
                                            <div class="label">80%</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="status">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked />
                                            <!-- <label class="form-check-label" for="SwitchCheck1">Active</label> -->
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>

                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                            <li><a class="dropdown-item" href="create-challenge.php">Edit</a></li>
                                            <li><a class="dropdown-item" href="#">Delete</a></li>
                                            <li><a class="dropdown-item" href="view-challengers.php">View Challengers</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Floors</td>
                                <td>50Floors</td>
                                <td>Sep 20, 2024</td>
                                <td>Dec 20, 2024</td>
                                <!-- <td class="customer_name"><span class="badge bg-secondary-subtle text-secondary text-uppercase">In Progress</span></td> -->
                                <td class="customer_name">
                                    <div class="progress animated-progress custom-progress progress-label">
                                        <div class="progress-bar bg-dark" role="progressbar" style="width: 30%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
                                            <div class="label">30%</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="status">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked />
                                            <!-- <label class="form-check-label" for="SwitchCheck1">Active</label> -->
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>

                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                            <li><a class="dropdown-item" href="create-challenge.php">Edit</a></li>
                                            <li><a class="dropdown-item" href="#">Delete</a></li>
                                            <li><a class="dropdown-item" href="view-challengers.php">View Challengers</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Walking</td>
                                <td>20KM</td>
                                <td>Sep 20, 2024</td>
                                <td>Dec 20, 2024</td>
                                <td class="customer_name">
                                    <div class="progress animated-progress custom-progress progress-label">
                                        <div class="progress-bar bg-dark" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
                                            <div class="label">15%</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="status">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked />
                                            <!-- <label class="form-check-label" for="SwitchCheck1">Active</label> -->
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>

                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                            <li><a class="dropdown-item" href="create-challenge.php">Edit</a></li>
                                            <li><a class="dropdown-item" href="#">Delete</a></li>
                                            <li><a class="dropdown-item" href="view-challengers.php">View Challengers</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>Running</td>
                                <td>10KM</td>
                                <td>Sep 20, 2024</td>
                                <td>Dec 20, 2024</td>
                                <!-- <td class="customer_name"><span class="badge bg-secondary-subtle text-secondary text-uppercase">In Progress</span></td> -->
                                <td>
                                    <div class="progress animated-progress custom-progress progress-label">
                                        <div class="progress-bar bg-dark" role="progressbar" style="width: 30%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
                                            <div class="label">30%</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="status">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" role="switch" id="SwitchCheck4" checked />
                                            <!-- <label class="form-check-label" for="SwitchCheck1">Active</label> -->
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <a href="#" class="btn btn-soft-secondary btn-sm" role="button" id="dropdownMenuLink5" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-2-fill"></i>
                                        </a>

                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                                            <li><a class="dropdown-item" href="create-challenge.php">Edit</a></li>
                                            <li><a class="dropdown-item" href="#">Delete</a></li>
                                            <li><a class="dropdown-item" href="view-challengers.php">View Challengers</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                            <!-- end tbody -->
                        </table>
                        <!-- end table -->
                    </div>
                    <!-- end table responsive -->
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <!-- end col -->
    </div>
@endsection