{% extends "layouts/base.html" %}
{% load static %}

{% block title %}Home{% endblock title %}

{% block content %}

  <div class="pc-container">
    <div class="pc-content">
      <!-- [ breadcrumb ] start -->
      <div class="page-header">
        <div class="page-block">
          <div class="row align-items-center">
            <div class="col-md-12">
              <div class="page-header-title">
                <h5 class="mb-0">Home</h5>
              </div>
            </div>
            <div class="col-md-12">
              <ul class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{% url "index" %}">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript: void(0)">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Home</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- [ breadcrumb ] end -->
      <!-- [ Main Content ] start -->
      <div class="row">
        <!-- [ daily sales section ] start -->
        <div class="col-md-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="mb-4">Daily Sales</h6>
                    <div class="row d-flex align-items-center">
                        <div class="col-9">
                            <h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-success f-30 m-r-10"></i>$249.95</h3>
                        </div>

                        <div class="col-3 text-end">
                            <p class="m-b-0">67%</p>
                        </div>
                    </div>
                    <div class="progress m-t-30" style="height: 7px;">
                        <div class="progress-bar bg-brand-color-1" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ daily sales section ] end -->

        <!-- [ Monthly  sales section ] start -->
        <div class="col-md-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="mb-4">Monthly Sales</h6>
                    <div class="row d-flex align-items-center">
                        <div class="col-9">
                            <h3 class="f-w-300 d-flex align-items-center  m-b-0"><i class="feather icon-arrow-down text-danger f-30 m-r-10"></i>$2.942.32</h3>
                        </div>
                        <div class="col-3 text-end">
                            <p class="m-b-0">36%</p>
                        </div>
                    </div>
                    <div class="progress m-t-30" style="height: 7px;">
                        <div class="progress-bar bg-brand-color-2" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ Monthly  sales section ] end -->

        <!-- [ year  sales section ] start -->
        <div class="col-md-12 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h6 class="mb-4">Yearly Sales</h6>
                    <div class="row d-flex align-items-center">
                        <div class="col-9">
                            <h3 class="f-w-300 d-flex align-items-center  m-b-0"><i class="feather icon-arrow-up text-success f-30 m-r-10"></i>$8.638.32</h3>
                        </div>
                        <div class="col-3 text-end">
                            <p class="m-b-0">80%</p>
                        </div>
                    </div>
                    <div class="progress m-t-30" style="height: 7px;">
                        <div class="progress-bar bg-brand-color-1" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ year  sales section ] end -->

        <!-- [ worldLow section ] start -->
        <div class="col-xl-8 col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Users From United States</h5>
                </div>
                <div class="card-body">
                    <div id="world-low" style="height:450px;"></div>
                </div>
            </div>
        </div>
        <!-- [ worldLow section ] end -->

        <!-- [ statistics year chart ] start -->
        <div class="col-xl-4 col-md-6">
            <div class="card bg-primary">
                <div class="card-header border-0">
                    <h5 class="text-white">Earnings</h5>
                </div>
                <div class="card-body" style="padding:0 25px;">
                    <div class="earning-text mb-0">
                        <h3 class="mb-2 text-white f-w-300">$4295.36 <i class="feather icon-arrow-up teal accent-3"></i></h3>
                        <span class="text-uppercase text-white d-block">Total Earnings</span>
                    </div>
                    <div id="Widget-line-chart" class="WidgetlineChart2 ChartShadow" style="height:180px;"></div>
                </div>
            </div>
            <div class="card">
                <div class="card-body border-bottom">
                    <div class="row d-flex align-items-center">
                        <div class="col-auto">
                            <i class="feather icon-zap f-30 text-success"></i>
                        </div>
                        <div class="col">
                            <h3 class="f-w-300">235</h3>
                            <span class="d-block text-uppercase">TOTAL IDEAS</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row d-flex align-items-center">
                        <div class="col-auto">
                            <i class="feather icon-map-pin f-30 text-primary"></i>
                        </div>
                        <div class="col">
                            <h3 class="f-w-300">26</h3>
                            <span class="d-block text-uppercase">TOTAL LOCATIONS</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ statistics year chart ] end -->

        <!-- [social-media section] start -->
        <div class="col-md-12 col-xl-4">
            <div class="card card-social">
                <div class="card-body border-bottom">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-auto">
                            <i class="fab fa-facebook-f text-primary f-36"></i>
                        </div>
                        <div class="col text-end">
                            <h3>12,281</h3>
                            <h5 class="text-success mb-0">+7.2% <span class="text-muted">Total Likes</span></h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center justify-content-center card-active">
                        <div class="col-6">
                            <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>35,098</h6>
                            <div class="progress">
                                <div class="progress-bar bg-brand-color-1" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-6">
                            <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>3,539</h6>
                            <div class="progress">
                                <div class="progress-bar bg-brand-color-2" role="progressbar" style="width:45%;height:6px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card card-social">
                <div class="card-body border-bottom">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-auto">
                            <i class="fab fa-twitter text-primary f-36"></i>
                        </div>
                        <div class="col text-end">
                            <h3>11,200</h3>
                            <h5 class="text-info mb-0">+6.2% <span class="text-muted">Total Likes</span></h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center justify-content-center card-active">
                        <div class="col-6">
                            <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>34,185</h6>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-6">
                            <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>4,567</h6>
                            <div class="progress">
                                <div class="progress-bar bg-primary" role="progressbar" style="width:70%;height:6px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card card-social">
                <div class="card-body border-bottom">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-auto">
                            <i class="fab fa-google-plus-g text-danger f-36"></i>
                        </div>
                        <div class="col text-end">
                            <h3>10,500</h3>
                            <h5 class="text-primary mb-0">+5.9% <span class="text-muted">Total Likes</span></h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center justify-content-center card-active">
                        <div class="col-6">
                            <h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>25,998</h6>
                            <div class="progress">
                                <div class="progress-bar bg-brand-color-1" role="progressbar" style="width:80%;height:6px;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-6">
                            <h6 class="text-center  m-b-10"><span class="text-muted m-r-5">Duration:</span>7,753</h6>
                            <div class="progress">
                                <div class="progress-bar bg-brand-color-2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [social-media section] end -->

        <!-- [ rating list ] starts-->
        <div class="col-xl-4 col-md-6">
            <div class="card user-list">
                <div class="card-header">
                    <h5>Rating</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center justify-content-center m-b-20">
                        <div class="col-6">
                            <h2 class="f-w-300 d-flex align-items-center float-start m-0">4.7 <i class="fas fa-star f-10 m-l-10 text-warning"></i></h2>
                        </div>
                        <div class="col-6">
                            <h6 class="d-flex  align-items-center float-end m-0">0.4 <i class="fas fa-caret-up text-success f-22 m-l-10"></i></h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12">
                            <h6 class="align-items-center float-start"><i class="fas fa-star f-10 m-r-10 text-warning"></i>5</h6>
                            <h6 class="align-items-center float-end">384</h6>
                            <div class="progress m-t-30 m-b-20" style="height: 6px;">
                                <div class="progress-bar bg-brand-color-1" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <h6 class="align-items-center float-start"><i class="fas fa-star f-10 m-r-10 text-warning"></i>4</h6>
                            <h6 class="align-items-center float-end">145</h6>
                            <div class="progress m-t-30  m-b-20" style="height: 6px;">
                                <div class="progress-bar bg-brand-color-1" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <h6 class="align-items-center float-start"><i class="fas fa-star f-10 m-r-10 text-warning"></i>3</h6>
                            <h6 class="align-items-center float-end">24</h6>
                            <div class="progress m-t-30  m-b-20" style="height: 6px;">
                                <div class="progress-bar bg-brand-color-1" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <h6 class="align-items-center float-start"><i class="fas fa-star f-10 m-r-10 text-warning"></i>2</h6>
                            <h6 class="align-items-center float-end">1</h6>
                            <div class="progress m-t-30  m-b-20" style="height: 6px;">
                                <div class="progress-bar bg-brand-color-1" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="col-xl-12">
                            <h6 class="align-items-center float-start"><i class="fas fa-star f-10 m-r-10 text-warning"></i>1</h6>
                            <h6 class="align-items-center float-end">0</h6>
                            <div class="progress m-t-30  m-b-20" style="height: 6px;">
                                <div class="progress-bar" role="progressbar" style="width:0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ rating list ] end -->

        <!-- [ Recent Users ] start -->
        <div class="col-xl-8 col-md-6">
            <div class="card Recent-Users">
                <div class="card-header">
                    <h5>Recent Users</h5>
                </div>
                <div class="card-body px-0 py-3">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <tbody>
                                <tr class="unread">
                                    <td><img class="rounded-circle" style="width:40px;" src="{% static "assets/images/user/avatar-1.jpg" %}" alt="activity-user"></td>
                                    <td>
                                        <h6 class="mb-1">Isabella Christensen</h6>
                                        <p class="m-0">Lorem Ipsum is simply dummy</p>
                                    </td>
                                    <td>
                                        <h6 class="text-muted"><i class="fas fa-circle text-success f-10 m-r-15"></i>11 MAY 12:56</h6>
                                    </td>
                                    <td><a href="#!" class="badge me-2 bg-brand-color-2 text-white f-12">Reject</a><a href="#!" class="badge me-2 bg-brand-color-1 text-white f-12">Approve</a></td>
                                </tr>
                                <tr class="unread">
                                    <td><img class="rounded-circle" style="width:40px;" src="{% static "assets/images/user/avatar-2.jpg" %}" alt="activity-user"></td>
                                    <td>
                                        <h6 class="mb-1">Mathilde Andersen</h6>
                                        <p class="m-0">Lorem Ipsum is simply</p>
                                    </td>
                                    <td>
                                        <h6 class="text-muted"><i class="fas fa-circle text-danger f-10 m-r-15"></i>11 MAY 10:35</h6>
                                    </td>
                                    <td><a href="#!" class="badge me-2 bg-brand-color-2 text-white f-12">Reject</a><a href="#!" class="badge me-2 bg-brand-color-1 text-white f-12">Approve</a></td>
                                </tr>
                                <tr class="unread">
                                    <td><img class="rounded-circle" style="width:40px;" src="{% static "assets/images/user/avatar-3.jpg" %}" alt="activity-user"></td>
                                    <td>
                                        <h6 class="mb-1">Karla Sorensen</h6>
                                        <p class="m-0">Lorem Ipsum is simply dummy</p>
                                    </td>
                                    <td>
                                        <h6 class="text-muted"><i class="fas fa-circle text-success f-10 m-r-15"></i>9 MAY 17:38</h6>
                                    </td>
                                    <td><a href="#!" class="badge me-2 bg-brand-color-2 text-white f-12">Reject</a><a href="#!" class="badge me-2 bg-brand-color-1 text-white f-12">Approve</a></td>
                                </tr>
                                <tr class="unread">
                                    <td><img class="rounded-circle" style="width:40px;" src="{% static "assets/images/user/avatar-1.jpg" %}" alt="activity-user"></td>
                                    <td>
                                        <h6 class="mb-1">Ida Jorgensen</h6>
                                        <p class="m-0">Lorem Ipsum is simply</p>
                                    </td>
                                    <td>
                                        <h6 class="text-muted f-w-300"><i class="fas fa-circle text-danger f-10 m-r-15"></i>19 MAY 12:56</h6>
                                    </td>
                                    <td><a href="#!" class="badge me-2 bg-brand-color-2 text-white f-12">Reject</a><a href="#!" class="badge me-2 bg-brand-color-1 text-white f-12">Approve</a></td>
                                </tr>
                                <tr class="unread">
                                    <td><img class="rounded-circle" style="width:40px;" src="{% static "assets/images/user/avatar-2.jpg" %}" alt="activity-user"></td>
                                    <td>
                                        <h6 class="mb-1">Albert Andersen</h6>
                                        <p class="m-0">Lorem Ipsum is</p>
                                    </td>
                                    <td>
                                        <h6 class="text-muted"><i class="fas fa-circle text-success f-10 m-r-15"></i>21 July 12:56</h6>
                                    </td>
                                    <td><a href="#!" class="badge me-2 bg-brand-color-2 text-white f-12">Reject</a><a href="#!" class="badge me-2 bg-brand-color-1 text-white f-12">Approve</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ Recent Users ] end -->
    </div>
      <!-- [ Main Content ] end -->
    </div>
  </div>

{% endblock content %}

{% block extra_js %}

<script src="{% static "assets/js/plugins/apexcharts.min.js" %}"></script>
<script src="{% static "assets/js/plugins/jsvectormap.min.js" %}"></script>
<script src="{% static "assets/js/plugins/world.js" %}"></script>
<script src="{% static "assets/js/pages/dashboard-default.js" %}"></script>

{% endblock extra_js %}