{% extends 'castle_tours/base.html' %}
<!-- title block-->
{% block title %}Dashboard - Analytics  {% endblock title %}

<!-- content block-->
{%block content %} {% load static %}

<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
        <div class="app-brand demo">
          <a href="" class="app-brand-link">
            <span class="app-brand-logo demo">
              <svg
                width="26px"
                height="26px"
                viewBox="0 0 26 26"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>icon</title>
                <defs>
                  <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
                    <stop stop-color="#5A8DEE" offset="0%"></stop>
                    <stop stop-color="#699AF9" offset="100%"></stop>
                  </linearGradient>
                  <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-2">
                    <stop stop-color="#FDAC41" offset="0%"></stop>
                    <stop stop-color="#E38100" offset="100%"></stop>
                  </linearGradient>
                </defs>
                <g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="Login---V2" transform="translate(-667.000000, -290.000000)">
                    <g id="Login" transform="translate(519.000000, 244.000000)">
                      <g id="Logo" transform="translate(148.000000, 42.000000)">
                        <g id="icon" transform="translate(0.000000, 4.000000)">
                          <path
                            d="M13.8863636,4.72727273 C18.9447899,4.72727273 23.0454545,8.82793741 23.0454545,13.8863636 C23.0454545,18.9447899 18.9447899,23.0454545 13.8863636,23.0454545 C8.82793741,23.0454545 4.72727273,18.9447899 4.72727273,13.8863636 C4.72727273,13.5423509 4.74623858,13.2027679 4.78318172,12.8686032 L8.54810407,12.8689442 C8.48567157,13.19852 8.45300462,13.5386269 8.45300462,13.8863636 C8.45300462,16.887125 10.8856023,19.3197227 13.8863636,19.3197227 C16.887125,19.3197227 19.3197227,16.887125 19.3197227,13.8863636 C19.3197227,10.8856023 16.887125,8.45300462 13.8863636,8.45300462 C13.5386269,8.45300462 13.19852,8.48567157 12.8689442,8.54810407 L12.8686032,4.78318172 C13.2027679,4.74623858 13.5423509,4.72727273 13.8863636,4.72727273 Z"
                            id="Combined-Shape"
                            fill="#4880EA"></path>
                          <path
                            d="M13.5909091,1.77272727 C20.4442608,1.77272727 26,7.19618701 26,13.8863636 C26,20.5765403 20.4442608,26 13.5909091,26 C6.73755742,26 1.18181818,20.5765403 1.18181818,13.8863636 C1.18181818,13.540626 1.19665566,13.1982714 1.22574292,12.8598734 L6.30410592,12.859962 C6.25499466,13.1951893 6.22958398,13.5378796 6.22958398,13.8863636 C6.22958398,17.8551125 9.52536149,21.0724191 13.5909091,21.0724191 C17.6564567,21.0724191 20.9522342,17.8551125 20.9522342,13.8863636 C20.9522342,9.91761479 17.6564567,6.70030817 13.5909091,6.70030817 C13.2336969,6.70030817 12.8824272,6.72514561 12.5388136,6.77314791 L12.5392575,1.81561642 C12.8859498,1.78721495 13.2366963,1.77272727 13.5909091,1.77272727 Z"
                            id="Combined-Shape2"
                            fill="url(#linearGradient-1)"></path>
                          <rect
                            id="Rectangle"
                            fill="url(#linearGradient-2)"
                            x="0"
                            y="0"
                            width="7.68181818"
                            height="7.68181818"></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </svg>
            </span>
            <span class="app-brand-text demo menu-text fw-bold ms-2">Frest</span>
          </a>

          <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
            <i class="bx menu-toggle-icon d-none d-xl-block fs-4 align-middle"></i>
            <i class="bx bx-x d-block d-xl-none bx-sm align-middle"></i>
          </a>
        </div>

        <div class="menu-divider mt-0"></div>

        <div class="menu-inner-shadow"></div>

        <ul class="menu-inner py-1">
          <!-- Dashboards -->
          <li class="menu-item active open">
            <a href="javascript:void(0);" class="menu-link ">
              <i class="menu-icon tf-icons bx bx-home-circle"></i>
              <div data-i18n="Dashboards">Dashboards</div>
            </a>
          </li>
          <li class="menu-item">
            <a href="/castle_tours_guides/tours" class="menu-link menu-toggle">
              <i class="menu-icon tf-icons bx bx-current-location"></i>
              <div data-i18n="Tours">Tours</div>
            </a>
            <ul class="menu-sub">
              <li class="menu-item">
                <a href="/castle_tours_guides/tours" class="menu-link">
                  <div data-i18n="Tours">Upload New Schedule</div>
                </a>
              </li>

              <li class="menu-item">
                <a href="/castle_tours_guides/extract-datatables-from-guide" class="menu-link">
                  <div data-i18n="Extracted Data from Guides">Extracted Data from Guides</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="/castle_tours_guides/assign-tours-guide" class="menu-link">
                  <div data-i18n="Assign tours to Guides">Assign tours to Guides</div>
                </a>
              </li>
              <li class="menu-item">
                <a href="/castle_tours_guides/proposed-tours" class="menu-link">
                  <div data-i18n="Proposed Tours">Proposed Tours</div>
                </a>
              </li>
            </ul>
          </li>
          <li class="menu-item">
            <a href="/castle_tours_guides/master-list-guide" class="menu-link">
              <i class="menu-icon tf-icons bx bx-check-shield"></i>
              <div data-i18n="Guides">Guides</div>
            </a>
          </li>
          <li class="menu-item">
            <a href="/castle_tours_guides/tageszettel" class="menu-link">
              <i class="menu-icon tf-icons bx bx-dock-top"></i>
              <div data-i18n="Tageszettel">Tageszettel</div>
            </a>
          </li>
          
          <li class="menu-item">
            <a href="/castle_tours_guides/type-of-tour" class="menu-link">
              <i class="menu-icon tf-icons bx bx-window-open"></i>
              <div data-i18n="Type of tour">Type of tour</div>
            </a>
          </li>
        </ul>
      </aside>
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        <nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
          <div class="container-fluid">
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
              <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                <i class="bx bx-menu bx-sm"></i>
              </a>
            </div>

            <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
              <!-- Search -->
              <div class="navbar-nav align-items-center">
                <div class="nav-item navbar-search-wrapper mb-0">
                  <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
                    <i class="bx bx-search-alt bx-sm"></i>
                    <span class="d-none d-md-inline-block text-muted">Search (Ctrl+/)</span>
                  </a>
                </div>
              </div>
              <!-- /Search -->

              <ul class="navbar-nav flex-row align-items-center ms-auto">
                <!-- Language -->
                <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
                  <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                    <i class="fi fi-us fis rounded-circle fs-3 me-1"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a class="dropdown-item" href="javascript:void(0);" data-language="en">
                        <i class="fi fi-us fis rounded-circle fs-4 me-1"></i>
                        <span class="align-middle">English</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="javascript:void(0);" data-language="fr">
                        <i class="fi fi-fr fis rounded-circle fs-4 me-1"></i>
                        <span class="align-middle">French</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="javascript:void(0);" data-language="de">
                        <i class="fi fi-de fis rounded-circle fs-4 me-1"></i>
                        <span class="align-middle">German</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="javascript:void(0);" data-language="pt">
                        <i class="fi fi-pt fis rounded-circle fs-4 me-1"></i>
                        <span class="align-middle">Portuguese</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <!--/ Language -->

                <!-- Style Switcher -->
                <li class="nav-item me-2 me-xl-0">
                  <a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
                    <i class="bx bx-sm"></i>
                  </a>
                </li>
                <!--/ Style Switcher -->


                <!-- User -->
                <li class="nav-item navbar-dropdown dropdown-user dropdown">
                  <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                      <img src="{% static 'castle_tours/assets/img/avatars/1.png' %}" alt class="rounded-circle" />
                    </div>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <a class="dropdown-item" href="castle_tours/pages-account-settings-account.html">
                        <div class="d-flex">
                          <div class="flex-shrink-0 me-3">
                            <div class="avatar avatar-online">
                              <img src="{% static 'castle_tours/assets/img/avatars/1.png' %}" alt class="rounded-circle" />
                            </div>
                          </div>
                          <div class="flex-grow-1">
                            <span class="fw-semibold d-block lh-1">John Doe</span>
                            <small>Admin</small>
                          </div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <div class="dropdown-divider"></div>
                    </li>
                    <li>
                      <a class="dropdown-item" href="castle_tours/pages-profile-user.html">
                        <i class="bx bx-user me-2"></i>
                        <span class="align-middle">My Profile</span>
                      </a>
                    </li>
                    <li>
                      <a class="dropdown-item" href="castle_tours/pages-account-settings-account.html">
                        <i class="bx bx-cog me-2"></i>
                        <span class="align-middle">Settings</span>
                      </a>
                    </li>
                    
                   
                    
                      <div class="dropdown-divider"></div>
                    </li>
                    <li>
                      <a class="dropdown-item" href="castle_tours/auth-login-cover.html" target="_blank">
                        <i class="bx bx-power-off me-2"></i>
                        <span class="align-middle">Log Out</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <!--/ User -->
              </ul>
            </div>

            <!-- Search Small Screens -->
            <div class="navbar-search-wrapper search-input-wrapper d-none">
              <input
                type="text"
                class="form-control search-input container-fluid border-0"
                placeholder="Search..."
                aria-label="Search..." />
              <i class="bx bx-x bx-sm search-toggler cursor-pointer"></i>
            </div>
          </div>
        </nav>

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
          <!-- Content -->

          <div class="container-xxl flex-grow-1 container-p-y">
            <div class="row">
              <!-- Website Analytics-->
              <div class="col-lg-6 col-md-12 mb-4">
                <div class="card">
                  <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Website Analytics</h5>
                    <div class="dropdown">
                      <button
                        class="btn p-0"
                        type="button"
                        id="analyticsOptions"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                        <i class="bx bx-dots-vertical-rounded"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="analyticsOptions">
                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
                      </div>
                    </div>
                  </div>
                  <div class="card-body pb-2">
                    <div class="d-flex justify-content-around align-items-center flex-wrap mb-4">
                      <div class="user-analytics text-center me-2">
                        <i class="bx bx-user me-1"></i>
                        <span>Users</span>
                        <div class="d-flex align-items-center mt-2">
                          <div class="chart-report" data-color="success" data-series="35"></div>
                          <h3 class="mb-0">61K</h3>
                        </div>
                      </div>
                      <div class="sessions-analytics text-center me-2">
                        <i class="bx bx-pie-chart-alt me-1"></i>
                        <span>Sessions</span>
                        <div class="d-flex align-items-center mt-2">
                          <div class="chart-report" data-color="warning" data-series="76"></div>
                          <h3 class="mb-0">92K</h3>
                        </div>
                      </div>
                      <div class="bounce-rate-analytics text-center">
                        <i class="bx bx-trending-up me-1"></i>
                        <span>Bounce Rate</span>
                        <div class="d-flex align-items-center mt-2">
                          <div class="chart-report" data-color="danger" data-series="65"></div>
                          <h3 class="mb-0">72.6%</h3>
                        </div>
                      </div>
                    </div>
                    <div id="analyticsBarChart"></div>
                  </div>
                </div>
              </div>

              <!-- Referral, conversion, impression & income charts -->
              <div class="col-lg-6 col-md-12">
                <div class="row">
                  <!-- Referral Chart-->
                  <div class="col-sm-6 col-12 mb-4">
                    <div class="card">
                      <div class="card-body text-center">
                        <h2 class="mb-1">$32,690</h2>
                        <span class="text-muted">Referral 40%</span>
                        <div id="referralLineChart"></div>
                      </div>
                    </div>
                  </div>
                  <!-- Conversion Chart-->
                  <div class="col-sm-6 col-12 mb-4">
                    <div class="card">
                      <div class="card-header d-flex justify-content-between pb-3">
                        <div class="conversion-title">
                          <h5 class="card-title mb-1">Conversion</h5>
                          <p class="mb-0 text-muted">
                            60%
                            <i class="bx bx-chevron-up text-success"></i>
                          </p>
                        </div>
                        <h2 class="mb-0">89k</h2>
                      </div>
                      <div class="card-body">
                        <div id="conversionBarchart"></div>
                      </div>
                    </div>
                  </div>
                  <!-- Impression Radial Chart-->
                  <div class="col-sm-6 col-12 mb-4">
                    <div class="card">
                      <div class="card-body text-center">
                        <div id="impressionDonutChart"></div>
                      </div>
                    </div>
                  </div>
                  <!-- Growth Chart-->
                  <div class="col-sm-6 col-12">
                    <div class="row">
                      <div class="col-12 mb-4">
                        <div class="card">
                          <div class="card-body">
                            <div class="d-flex justify-content-between">
                              <div class="d-flex align-items-center gap-3">
                                <div class="avatar">
                                  <span class="avatar-initial bg-label-primary rounded-circle"
                                    ><i class="bx bx-user fs-4"></i
                                  ></span>
                                </div>
                                <div class="card-info">
                                  <h5 class="card-title mb-0 me-2">$38,566</h5>
                                  <small class="text-muted">Conversion</small>
                                </div>
                              </div>
                              <div id="conversationChart"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12 mb-4">
                        <div class="card">
                          <div class="card-body">
                            <div class="d-flex justify-content-between">
                              <div class="d-flex align-items-center gap-3">
                                <div class="avatar">
                                  <span class="avatar-initial bg-label-warning rounded-circle"
                                    ><i class="bx bx-dollar fs-4"></i
                                  ></span>
                                </div>
                                <div class="card-info">
                                  <h5 class="card-title mb-0 me-2">$53,659</h5>
                                  <small class="text-muted">Income</small>
                                </div>
                              </div>
                              <div id="incomeChart"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--/ Referral, conversion, impression & income charts -->

              <!-- Activity -->
              <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-4">
                <div class="card">
                  <div class="card-header">
                    <h5 class="card-title mb-0">Activity</h5>
                  </div>
                  <div class="card-body">
                    <ul class="p-0 m-0">
                      <li class="d-flex mb-4 pb-2">
                        <div class="avatar avatar-sm flex-shrink-0 me-3">
                          <span class="avatar-initial rounded-circle bg-label-primary"
                            ><i class="bx bx-cube"></i
                          ></span>
                        </div>
                        <div class="d-flex flex-column w-100">
                          <div class="d-flex justify-content-between mb-1">
                            <span>Total Sales</span>
                            <span class="text-muted">$2,459</span>
                          </div>
                          <div class="progress" style="height: 6px">
                            <div
                              class="progress-bar bg-primary"
                              style="width: 40%"
                              role="progressbar"
                              aria-valuenow="40"
                              aria-valuemin="0"
                              aria-valuemax="100"></div>
                          </div>
                        </div>
                      </li>
                      <li class="d-flex mb-4 pb-2">
                        <div class="avatar avatar-sm flex-shrink-0 me-3">
                          <span class="avatar-initial rounded-circle bg-label-success"
                            ><i class="bx bx-dollar"></i
                          ></span>
                        </div>
                        <div class="d-flex flex-column w-100">
                          <div class="d-flex justify-content-between mb-1">
                            <span>Income</span>
                            <span class="text-muted">$8,478</span>
                          </div>
                          <div class="progress" style="height: 6px">
                            <div
                              class="progress-bar bg-success"
                              style="width: 80%"
                              role="progressbar"
                              aria-valuenow="80"
                              aria-valuemin="0"
                              aria-valuemax="100"></div>
                          </div>
                        </div>
                      </li>
                      <li class="d-flex mb-4 pb-2">
                        <div class="avatar avatar-sm flex-shrink-0 me-3">
                          <span class="avatar-initial rounded-circle bg-label-warning"
                            ><i class="bx bx-trending-up"></i
                          ></span>
                        </div>
                        <div class="d-flex flex-column w-100">
                          <div class="d-flex justify-content-between mb-1">
                            <span>Budget</span>
                            <span class="text-muted">$12,490</span>
                          </div>
                          <div class="progress" style="height: 6px">
                            <div
                              class="progress-bar bg-warning"
                              style="width: 80%"
                              role="progressbar"
                              aria-valuenow="80"
                              aria-valuemin="0"
                              aria-valuemax="100"></div>
                          </div>
                        </div>
                      </li>
                      <li class="d-flex mb-2">
                        <div class="avatar avatar-sm flex-shrink-0 me-3">
                          <span class="avatar-initial rounded-circle bg-label-danger"
                            ><i class="bx bx-check"></i
                          ></span>
                        </div>
                        <div class="d-flex flex-column w-100">
                          <div class="d-flex justify-content-between mb-1">
                            <span>Tasks</span>
                            <span class="text-muted">$184</span>
                          </div>
                          <div class="progress" style="height: 6px">
                            <div
                              class="progress-bar bg-danger"
                              style="width: 25%"
                              role="progressbar"
                              aria-valuenow="25"
                              aria-valuemin="0"
                              aria-valuemax="100"></div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!--/ Activity -->

              <!-- Profit Report & Registration -->
              <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3">
                <div class="row">
                  <div class="col-12 col-sm-6 col-md-12 mb-4">
                    <div class="card h-100">
                      <div class="card-header">
                        <h5 class="card-title mb-0">Profit Report</h5>
                      </div>
                      <div class="card-body d-flex align-items-end justify-content-between">
                        <div class="d-flex justify-content-between align-items-center gap-3 w-100">
                          <div class="d-flex align-content-center">
                            <div class="chart-report" data-color="danger" data-series="25"></div>
                            <div class="chart-info">
                              <h5 class="mb-0">$12k</h5>
                              <small class="text-muted">2020</small>
                            </div>
                          </div>
                          <div class="d-flex align-content-center">
                            <div class="chart-report" data-color="info" data-series="50"></div>
                            <div class="chart-info">
                              <h5 class="mb-0">$64k</h5>
                              <small class="text-muted">2021</small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-sm-6 col-md-12 mb-4">
                    <div class="card">
                      <div class="card-header pb-2">
                        <h5 class="card-title mb-0">Registration</h5>
                      </div>
                      <div class="card-body pb-2">
                        <div class="d-flex justify-content-between align-items-end gap-3">
                          <div class="mb-3">
                            <div class="d-flex align-content-center">
                              <h5 class="mb-1">58.4k</h5>
                              <i class="bx bx-chevron-up text-success"></i>
                            </div>
                            <small class="text-success">12.8%</small>
                          </div>
                          <div id="registrationsBarChart"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--/ Profit Report & Registration -->

              <!-- Sales -->
              <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-4">
                <div class="card">
                  <div class="card-header d-flex align-items-start justify-content-between">
                    <div class="card-title mb-0">
                      <h5 class="m-0 me-2">Sales</h5>
                      <small class="card-subtitle text-muted">Calculated in last 7 days</small>
                    </div>
                    <div class="dropdown">
                      <button
                        class="btn p-0"
                        type="button"
                        id="salesReport"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                        <i class="bx bx-dots-vertical-rounded"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="salesReport">
                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <div id="salesChart"></div>
                    <ul class="p-0 m-0">
                      <li class="d-flex mb-3">
                        <span class="text-primary me-2"><i class="bx bx-up-arrow-alt bx-sm"></i></span>
                        <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                          <div class="me-2">
                            <h6 class="mb-0 lh-1">Best Selling</h6>
                            <small class="text-muted">Saturday</small>
                          </div>
                          <div class="item-progress">28.6k</div>
                        </div>
                      </li>
                      <li class="d-flex">
                        <span class="text-secondary me-2"><i class="bx bx-down-arrow-alt bx-sm"></i></span>
                        <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                          <div class="me-2">
                            <h6 class="mb-0 lh-1">Lowest Selling</h6>
                            <small class="text-muted">Thursday</small>
                          </div>
                          <div class="item-progress">7.9k</div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!--/ Sales -->

              <!-- Growth Chart-->
              <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-3 mb-4">
                <div class="card">
                  <div class="card-body text-center">
                    <div class="dropdown mb-4">
                      <button
                        class="btn btn-sm btn-outline-secondary dropdown-toggle"
                        type="button"
                        id="dropdownMenuButtonSec"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                        2020
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButtonSec">
                        <a class="dropdown-item" href="javascript:void(0);">2022</a>
                        <a class="dropdown-item" href="javascript:void(0);">2021</a>
                        <a class="dropdown-item" href="javascript:void(0);">2020</a>
                      </div>
                    </div>
                    <div id="growthRadialChart"></div>
                    <h6 class="mb-0 mt-5">62% Growth in 2022</h6>
                  </div>
                </div>
              </div>
              <!-- Growth Chart-->
              
              <!-- Finance Summary -->
              <div class="col-md-7 col-lg-7 mb-4 mb-md-0">
                <div class="card h-100">
                  <div class="card-header d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center me-3">
                      <img src="{% static 'castle_tours/assets/img/avatars/4.png' %}" alt="Avatar" class="rounded-circle me-3" width="54" />
                      <div class="card-title mb-0">
                        <h5 class="mb-0">Financial Report for Kiara Cruiser</h5>
                        <small class="text-muted">Awesome App for Project Management</small>
                      </div>
                    </div>
                    <div class="dropdown btn-pinned">
                      <button
                        class="btn p-0"
                        type="button"
                        id="financoalReport"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                        <i class="bx bx-dots-vertical-rounded"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="financoalReport">
                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="d-flex flex-wrap gap-4 mb-5 mt-4">
                      <div class="d-flex flex-column me-2">
                        <h6>Start Date</h6>
                        <span class="badge bg-label-success">02 APR 22</span>
                      </div>
                      <div class="d-flex flex-column me-2">
                        <h6>End Date</h6>
                        <span class="badge bg-label-danger">06 MAY 22</span>
                      </div>
                      <div class="d-flex flex-column me-2">
                        <h6>Members</h6>
                        <ul class="list-unstyled me-2 d-flex align-items-center avatar-group mb-0">
                          <li
                            data-bs-toggle="tooltip"
                            data-popup="tooltip-custom"
                            data-bs-placement="top"
                            title="Vinnie Mostowy"
                            class="avatar avatar-xs pull-up">
                            <img class="rounded-circle" src="{% static 'castle_tours/assets/img/avatars/5.png' %}" alt="Avatar" />
                          </li>
                          <li
                            data-bs-toggle="tooltip"
                            data-popup="tooltip-custom"
                            data-bs-placement="top"
                            title="Allen Rieske"
                            class="avatar avatar-xs pull-up">
                            <img class="rounded-circle" src="{% static 'castle_tours/assets/img/avatars/12.png' %}" alt="Avatar" />
                          </li>
                          <li
                            data-bs-toggle="tooltip"
                            data-popup="tooltip-custom"
                            data-bs-placement="top"
                            title="Julee Rossignol"
                            class="avatar avatar-xs pull-up">
                            <img class="rounded-circle" src="{% static 'castle_tours/assets/img/avatars/6.png' %}" alt="Avatar" />
                          </li>
                          <li
                            data-bs-toggle="tooltip"
                            data-popup="tooltip-custom"
                            data-bs-placement="top"
                            title="Ellen Wagner"
                            class="avatar avatar-xs pull-up">
                            <img class="rounded-circle" src="{% static 'castle_tours/assets/img/avatars/14.png' %}" alt="Avatar" />
                          </li>
                          <li
                            data-bs-toggle="tooltip"
                            data-popup="tooltip-custom"
                            data-bs-placement="top"
                            title="Darcey Nooner"
                            class="avatar avatar-xs pull-up">
                            <img class="rounded-circle" src="{% static 'castle_tours/assets/img/avatars/10.png' %}" alt="Avatar" />
                          </li>
                        </ul>
                      </div>
                      <div class="d-flex flex-column me-2">
                        <h6>Budget</h6>
                        <span>$249k</span>
                      </div>
                      <div class="d-flex flex-column me-2">
                        <h6>Expenses</h6>
                        <span>$82k</span>
                      </div>
                    </div>
                    <div class="d-flex flex-column flex-grow-1">
                      <span class="text-nowrap d-block mb-1">Kiara Cruiser Progress</span>
                      <div class="progress w-100 mb-3" style="height: 8px">
                        <div
                          class="progress-bar bg-primary"
                          role="progressbar"
                          style="width: 80%"
                          aria-valuenow="80"
                          aria-valuemin="0"
                          aria-valuemax="100"></div>
                      </div>
                    </div>
                    <span
                      >I distinguish three main text objectives. First, your objective could be merely to inform
                      people. A second be to persuade people.</span
                    >
                  </div>
                  <div class="card-footer border-top">
                    <ul class="list-inline mb-0">
                      <li class="list-inline-item"><i class="bx bx-check"></i> 74 Tasks</li>
                      <li class="list-inline-item"><i class="bx bx-chat"></i> 678 Comments</li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- Finance Summary -->

              <!-- Activity Timeline -->
              <div class="col-md-5 col-lg-5 mb-0">
                <div class="card">
                  <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="card-title m-0 me-2">Activity Timeline</h5>
                    <div class="dropdown">
                      <button
                        class="btn p-0"
                        type="button"
                        id="timelineWapper"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                        <i class="bx bx-dots-vertical-rounded"></i>
                      </button>
                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <!-- Activity Timeline -->
                    <ul class="timeline">
                      <li class="timeline-item timeline-item-transparent ps-4">
                        <span class="timeline-point timeline-point-primary"></span>
                        <div class="timeline-event pb-2">
                          <div class="timeline-header mb-1">
                            <h6 class="mb-0">12 Invoices have been paid</h6>
                            <small class="text-muted">12 min ago</small>
                          </div>
                          <p class="mb-2">Invoices have been paid to the company</p>
                          <div class="d-flex">
                            <a href="javascript:void(0)" class="me-3">
                              <img
                                src="{% static 'castle_tours/assets/img/icons/misc/pdf.png' %}"
                                alt="PDF image"
                                width="23"
                                class="me-2" />
                              <span class="fw-bold text-body">Invoices.pdf</span>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="timeline-item timeline-item-transparent ps-4">
                        <span class="timeline-point timeline-point-warning"></span>
                        <div class="timeline-event pb-2">
                          <div class="timeline-header mb-1">
                            <h6 class="mb-0">Client Meeting</h6>
                            <small class="text-muted">45 min ago</small>
                          </div>
                          <p class="mb-2">Project meeting with john @10:15am</p>
                          <div class="d-flex flex-wrap">
                            <div class="avatar me-3">
                              <img src="{% static 'castle_tours/assets/img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
                            </div>
                            <div>
                              <h6 class="mb-0">John Doe (Client)</h6>
                              <span class="text-muted">CEO of Pixinvent</span>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="timeline-item timeline-item-transparent ps-4">
                        <span class="timeline-point timeline-point-info"></span>
                        <div class="timeline-event pb-0">
                          <div class="timeline-header mb-1">
                            <h6 class="mb-0">Create a new project for client</h6>
                            <small class="text-muted">2 Day Ago</small>
                          </div>
                          <p class="mb-2">5 team members in a project</p>
                          <div class="d-flex align-items-center avatar-group">
                            <div
                              class="avatar avatar-sm pull-up"
                              data-bs-toggle="tooltip"
                              data-popup="tooltip-custom"
                              data-bs-placement="top"
                              title="Vinnie Mostowy">
                              <img src="{% static 'castle_tours/assets/img/avatars/5.png' %}" alt="Avatar" class="rounded-circle" />
                            </div>
                            <div
                              class="avatar avatar-sm pull-up"
                              data-bs-toggle="tooltip"
                              data-popup="tooltip-custom"
                              data-bs-placement="top"
                              title="Marrie Patty">
                              <img src="{% static 'castle_tours/assets/img/avatars/12.png' %}" alt="Avatar" class="rounded-circle" />
                            </div>
                            <div
                              class="avatar avatar-sm pull-up"
                              data-bs-toggle="tooltip"
                              data-popup="tooltip-custom"
                              data-bs-placement="top"
                              title="Jimmy Jackson">
                              <img src="{% static 'castle_tours/assets/img/avatars/9.png' %}" alt="Avatar" class="rounded-circle" />
                            </div>
                            <div
                              class="avatar avatar-sm pull-up"
                              data-bs-toggle="tooltip"
                              data-popup="tooltip-custom"
                              data-bs-placement="top"
                              title="Kristine Gill">
                              <img src="{% static 'castle_tours/assets/img/avatars/6.png' %}" alt="Avatar" class="rounded-circle" />
                            </div>
                            <div
                              class="avatar avatar-sm pull-up"
                              data-bs-toggle="tooltip"
                              data-popup="tooltip-custom"
                              data-bs-placement="top"
                              title="Nelson Wilson">
                              <img src="{% static 'castle_tours/assets/img/avatars/14.png' %}" alt="Avatar" class="rounded-circle" />
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="timeline-end-indicator">
                        <i class="bx bx-check-circle"></i>
                      </li>
                    </ul>
                    <!-- /Activity Timeline -->
                  </div>
                </div>
              </div>
              <!--/ Activity Timeline -->
            </div>
          </div>
          <!-- / Content -->

          <!-- Footer -->
          <footer class="content-footer footer bg-footer-theme">
            <div class="container-fluid d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
              <div class="mb-2 mb-md-0">
                ©
                <script>
                  document.write(new Date().getFullYear());
                </script>
                , made with ❤️ by
                <a href="#" target="_blank" class="footer-link fw-semibold">N'Liven Technologies</a>
              </div>
              <!-- <div>
                <a href="https://themeforest.net/licenses/standard" class="footer-link me-4" target="_blank"
                  >License</a
                >
                <a href="https://1.envato.market/pixinvent_portfolio" target="_blank" class="footer-link me-4"
                  >More Themes</a
                >

                <a
                  href="https://demos.pixinvent.com/frest-html-admin-template/documentation/"
                  target="_blank"
                  class="footer-link me-4"
                  >Documentation</a
                >

                <a href="https://pixinvent.ticksy.com/" target="_blank" class="footer-link d-none d-sm-inline-block"
                  >Support</a
                >
              </div> -->
            </div>
          </footer>
          <!-- / Footer -->

          <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>

    <!-- Drag Target Area To SlideIn Menu On Small Screens -->
    <div class="drag-target"></div>
  </div>
{% endblock content %}