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

{% block title %} Dashboard {% endblock title %}

<!-- Specific CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
    <div id='mainContent'>
        <div class="row gap-20 masonry pos-r">
            <div class="masonry-sizer col-md-6"></div>
            <div class="masonry-item  w-100">
                <div class="row gap-20">
                    <!-- #Toatl Tickets ==================== -->
                    <div class='col-md-3'>
                        <div class="layers bd bgc-white p-20">
                        <div class="layer w-100 mB-10">
                            <h6 class="lh-1">Total Tickets</h6>
                        </div>
                        <div class="layer w-100">
                            <div class="peers ai-sb fxw-nw">
                            <div class="peer peer-greed">
                                <span id="sparklinedash"></span>
                            </div>
                            <div class="peer">
                                <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-green-50 c-green-500">+10%</span>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>

                    <!-- #Open Tickets ==================== -->
                    <div class='col-md-3'>
                        <div class="layers bd bgc-white p-20">
                        <div class="layer w-100 mB-10">
                            <h6 class="lh-1">Open Tickets</h6>
                        </div>
                        <div class="layer w-100">
                            <div class="peers ai-sb fxw-nw">
                            <div class="peer peer-greed">
                                <span id="sparklinedash2"></span>
                            </div>
                            <div class="peer">
                                <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-red-50 c-red-500">-7%</span>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>

                    <!-- #Pending Tickets ==================== -->
                    <div class='col-md-3'>
                        <div class="layers bd bgc-white p-20">
                        <div class="layer w-100 mB-10">
                            <h6 class="lh-1">Pending Tickets</h6>
                        </div>
                        <div class="layer w-100">
                            <div class="peers ai-sb fxw-nw">
                            <div class="peer peer-greed">
                                <span id="sparklinedash3"></span>
                            </div>
                            <div class="peer">
                                <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-purple-50 c-purple-500">~12%</span>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>

                    <!-- #Closed Tickets ==================== -->
                    <div class='col-md-3'>
                        <div class="layers bd bgc-white p-20">
                            <div class="layer w-100 mB-10">
                                <h6 class="lh-1">Closed Tickets</h6>
                            </div>
                            <div class="layer w-100">
                                <div class="peers ai-sb fxw-nw">
                                    <div class="peer peer-greed">
                                        <span id="sparklinedash4"></span>
                                    </div>
                                    <div class="peer">
                                        <span class="d-ib lh-0 va-m fw-600 bdrs-10em pX-15 pY-15 bgc-blue-50 c-blue-500">33%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="masonry-item col-12">
                <div class="bd bgc-white">
                    <div class="peers fxw-nw@lg+ ai-s">
                        <div class="peer peer-greed w-70p@lg- p-20">
                            <div class="layers">
                                <div class="layer w-100 pX-20 pT-20">
                                    <h6 class="lh-1">Monthly Stats</h6>
                                </div>
                                <div class="layer w-100 p-20 pos-r">
                                    <canvas id="line-chart" class="mw-100p" height="220"></canvas>
                                </div>
                                <div class="layer bdT p-20 w-100">
                                    <div class="peers ai-c jc-c gapX-20">
                                        <div class="peer fw-600">
                                            <span class="fsz-def fw-600 mR-10 c-grey-800">2% <i class="fa fa-level-down c-red-500"></i></span>
                                            <small class="c-grey-500 fw-600">Open Tickets</small>
                                        </div>
                                        <div class="peer fw-600">
                                            <span class="fsz-def fw-600 mR-10 c-grey-800">15% <i class="fa fa-level-up c-green-500"></i></span>
                                            <small class="c-grey-500 fw-600">Pending Tickets</small>
                                        </div>
                                        <div class="peer fw-600">
                                            <span class="fsz-def fw-600 mR-10 c-grey-800">8% <i class="fa fa-level-down c-red-500"></i></span>
                                            <small class="c-grey-500 fw-600">Closed Tickets</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="peer bdL p-20 w-30p@lg+ w-100p@lg-">
                            <div class="layers">
                                <div class="layer w-100">
                                    <!-- Progress Bars -->
                                    <div class="layers">
                                        <div class="layer w-100">
                                            <h5 class="mB-5">14</h5>
                                            <small class="fw-600 c-grey-700">Open Tickets</small>
                                            <span class="pull-right c-grey-600 fsz-sm">35%</span>
                                            <div class="progress mT-10">
                                                <div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%;">
                                                    <span class="visually-hidden">35% Complete</span>
                                                </div>
                                                <div class="progress-bar bgc-grey-300" role="progressbar" style="width: 65%;"></div>
                                            </div>
                                        </div>
                                        <div class="layer w-100 mT-15">
                                            <h5 class="mB-5">10</h5>
                                            <small class="fw-600 c-grey-700">Pending Tickets</small>
                                            <span class="pull-right c-grey-600 fsz-sm">25%</span>
                                            <div class="progress mT-10">
                                                <div class="progress-bar bgc-grey-300" role="progressbar" style="width: 35%;"></div>
                                                <div class="progress-bar bgc-blue-500" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;">
                                                    <span class="visually-hidden">25% Complete</span>
                                                </div>
                                                <div class="progress-bar bgc-grey-300" role="progressbar" style="width: 40%;"></div>
                                            </div>
                                        </div>
                                        <div class="layer w-100 mT-15">
                                            <h5 class="mB-5">16</h5>
                                            <small class="fw-600 c-grey-700">Closed Tickets</small>
                                            <span class="pull-right c-grey-600 fsz-sm">40%</span>
                                            <div class="progress mT-10">
                                                <div class="progress-bar bgc-grey-300" role="progressbar" style="width: 60%;"></div>
                                                <div class="progress-bar bgc-red-500" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">
                                                    <span class="visually-hidden">40% Complete</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Pie Charts -->
                                    <div class="peers pT-20 mT-20 bdT fxw-nw@lg+ jc-sb ta-c gap-10">
                                        <div class="peer">
                                        <div class="easy-pie-chart" data-size='80' data-percent="75" data-bar-color='#f44336'>
                                            <span></span>
                                        </div>
                                        <h6 class="fsz-sm">Low Priority</h6>
                                        </div>
                                        <div class="peer">
                                        <div class="easy-pie-chart" data-size='80' data-percent="50" data-bar-color='#2196f3'>
                                            <span></span>
                                        </div>
                                        <h6 class="fsz-sm">Medium Priority</h6>
                                        </div>
                                        <div class="peer">
                                        <div class="easy-pie-chart" data-size='80' data-percent="90" data-bar-color='#ff9800'>
                                            <span></span>
                                        </div>
                                        <h6 class="fsz-sm">High Priority</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="masonry-item col-md-6">
                <!-- #Sales Report ==================== -->
                <div class="bd bgc-white">
                <div class="layers">
                    <div class="layer w-100 p-20">
                    <h6 class="lh-1">Tickets Report</h6>
                    </div>
                    <div class="layer w-100">
                    <div class="bgc-light-blue-500 c-white p-20">
                        <div class="peers ai-c jc-sb gap-40">
                        <div class="peer peer-greed">
                            <h5>January 2024</h5>
                            <p class="mB-0">Tickets Report</p>
                        </div>
                        <div class="peer">
                            <h3 class="text-end">17 Solved</h3>
                        </div>
                        </div>
                    </div>
                    <div class="table-responsive p-20">
                        <table class="table">
                        <thead>
                            <tr>
                            <th class=" bdwT-0">Name</th>
                            <th class=" bdwT-0">Status</th>
                            <th class=" bdwT-0">Date</th>
                            <th class=" bdwT-0">Department</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                            <td class="fw-600">Ticket #01</td>
                            <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Closed</span> </td>
                            <td>Jan 18</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                            <tr>
                            <td class="fw-600">Ticket #02</td>
                            <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">Open</span></td>
                            <td>Jan 19</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                            <tr>
                            <td class="fw-600">Ticket #03</td>
                            <td><span class="badge bgc-red-50 c-red-700 p-10 lh-0 tt-c rounded-pill">Closed</span></td>
                            <td>Jan 20</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                            <tr>
                            <td class="fw-600">Ticket #04</td>
                            <td><span class="badge bgc-blue-50 c-blue-700 p-10 lh-0 tt-c rounded-pill">Pending</span></td>
                            <td>Jan 21</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                            <tr>
                            <td class="fw-600">Ticket #05</td>
                            <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">Open</span></td>
                            <td>Jan 22</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                            <tr>
                            <td class="fw-600">Ticket #06</td>
                            <td><span class="badge bgc-deep-purple-50 c-deep-purple-700 p-10 lh-0 tt-c rounded-pill">Open</span> </td>
                            <td>Jan 23</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                            <tr>
                            <td class="fw-600">Ticket #07</td>
                            <td><span class="badge bgc-blue-50 c-blue-700 p-10 lh-0 tt-c rounded-pill">Pending</span></td>
                            <td>Jan 22</td>
                            <td><span class="">Sales</span></td>
                            </tr>
                        </tbody>
                        </table>
                        </div>
                    </div>
                </div>
                <div class="ta-c bdT w-100 p-20">
                    <a href="#">Check all the tickets</a>
                </div>
                </div>
            </div>
            <div class="masonry-item col-md-6">
                <div class="bgc-white p-20 bd">
                  <h6 class="c-grey-900">Bar Chart</h6>
                  <div class="mT-30">
                    <canvas id="bar-chart" height="220"></canvas>
                  </div>
                </div>
              </div>
        </div>
    </div>
</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}
