<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

{% include './admin_header.html' %}    

<script type="text/javascript" src="../chart/loader.js"></script>

<!--<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>-->

<link href="../new_css.css" rel="stylesheet">

<style type="text/css">@keyframes resizeanim {
        from {
            opacity: 0;
        }
        to {
            opacity: 0;
        }
    }
    .resize-triggers {
        animation: 1ms resizeanim;
        visibility: hidden;
        opacity: 0;
    }
    .resize-triggers, .resize-triggers > div, .contract-trigger:before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .resize-triggers > div {
        background: #eee;
        overflow: auto;
    }
    .contract-trigger:before {
        width: 200%;
        height: 200%;
    }</style>

<!--<div style="margin-top: 120px;margin-left: 450px">
    <img src="../img/logo-police.png" height="150px" width="150px"><br><br>
    <h1 style="color: #2255a4">Welcome to Tapi Traffic <br>Police, E-Traffic Web Portal.</h1>
</div>-->

<style>
    /*    * {
            box-sizing: border-box;
        }*/
    /*    body {
            font-family: Verdana, sans-serif;
        }*/
    /*    .mySlides {
            display: none;
        }*/
    /*    img {
            vertical-align: middle;
        }*/

    /* Slideshow container */
    .slideshow-container {
        /*max-width: 1000px;*/
        position: relative;
        /*margin: auto;*/
    }

    /* Caption text */
    /*    .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }*/

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 8s;
    }

    @keyframes fade {
        from {
            opacity: .4
        }
        to {
            opacity: 1
        }
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .text {
            font-size: 11px
        }
    }

    .text-block {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background-color: #2794a6;
        color: white;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*    .pie{
            animation-duration: 1200;
            animation-direction: normal;
            animation-play-state: running;
            animation-timing-function: linear;
        }*/
</style>

<div class="app-main__outer">
    <div class="app-main__inner">
        <div class="tabs-animation">
            <div class="row slideshow-container">
                <div class="col-sm-12 col-md-12 col-xl-12">
                    <div class="mySlides fade">
                        <div class="numbertext">1 / 4</div>
                        <div class="widget-chart-content">
                            <img src="../public/assets/images/fort2.jpg" class="responsive" style="width: 100%;height: 450px;" width="900" height="900">
                            <div class="text-block">
                                <h4>Nature</h4>
                                <!--<p>Nature</p>-->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-12 col-md-12 col-xl-12">
                    <div class="mySlides fade">
                        <div class="numbertext">2 / 4</div>
                        <div class="widget-chart-content">
                            <img src="../public/assets/images/fort1.jpg" class="responsive" style="width: 100%;height: 450px;" width="900" height="900">
                            <div class="text-block">
                                <h4>Nature</h4>
                                <!--<p>Nature</p>-->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-12 col-md-12 col-xl-12">
                    <div class="mySlides fade">
                        <div class="numbertext">3 / 4</div>
                        <div class="widget-chart-content">
                            <img src="../public/assets/images/1.jpg" class="responsive" style="width: 100%;height: 450px;" width="900" height="900">
                            <div class="text-block">
                                <h4>Nature</h4>
                                <!--<p>Nature</p>-->
                            </div>
                        </div>
                    </div>
                </div>

                <!--                <div class="col-sm-12 col-md-12 col-xl-12">
                                    <div class="mySlides fade">
                                        <div class="numbertext">4 / 4</div>
                                        <div class="widget-chart-content">
                                            <img src="../public/assets/images/kakarapar_canal.jpg" class="responsive" style="width: 100%;height: 450px;" width="900" height="900">
                                            <div class="text-block">
                                                <h4>Nature</h4>
                                                <p>Nature</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
            </div>
            <div style="text-align:center">
                <span class="dot"></span> 
                <span class="dot"></span> 
                <span class="dot"></span> 
                <span class="dot"></span>
            </div>
            <!--            <div class="row">
                            <div class="col-sm-12 col-md-6 col-xl-4">
                                <div class="card mb-3 widget-chart" id="total_project" style="background-color: #3ac47d !important">
                                    <div class="widget-chart-content">
                                        <div class="icon-wrapper rounded">
                                            <div class="icon-wrapper-bg bg-warning" style="background-color: white !important"></div>
                                            <i class="pe-7s-notebook text-warning" style="color: white !important"></i>
                                        </div>
                                        <div class="widget-numbers">
                                            <span style="color: white !important" id="total_pro" name="{{ total_project }}"> {{ total_project }}</span>
                                            <span style="color: white !important">312</span>
                                        </div>
                                        <div class="widget-subheading fsize-1 pt-2 opacity-10 text-warning font-weight-bold">
            
                                            {% if User_language=="ENGLISH" %}                                
                                            <h5><b style="color: white !important;font-size: 22px">Total Project</b></h5>
                                            {% endif %}
                                            {% if User_language=="GUJARATI" %}                                
                                            <h5><b style="color: white !important;font-size: 22px">કુલ પ્રોજેક્ટ </b></h5>
                                            {% endif %}
                                        </div>
                                    </div>
            
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-6 col-xl-4">
                                <div class="card mb-3 widget-chart" id="total_complete_project" style="background-color: #40b0ff !important">
                                    <div class="widget-chart-content">
                                        <div class="icon-wrapper rounded">
                                            <div class="icon-wrapper-bg bg-danger" style="background-color: white !important"></div>
                                            <i class="pe-7s-note2 text-danger" style="color: white !important"></i>
                                        </div>
                                        <div class="widget-numbers">
                                            <span style="color: white !important" id="total_complete_pro" name="{{ total_Complete_project }}">{{ total_Complete_project }}</span>
                                            <span style="color: white !important">26</span>
                                        </div>
                                        <div class="widget-subheading fsize-1 pt-2 opacity-10 text-danger font-weight-bold">
            
                                            {% if User_language=="ENGLISH" %}                                
                                            <h5><b style="color: white !important;font-size: 22px">Total Complete Project</b></h5>
                                            {% endif %}
                                            {% if User_language=="GUJARATI" %}                                
                                            <h5><b style="color: white !important;font-size: 22px">કુલ પુર્ણ થયેલ પ્રોજેક્ટ </b></h5>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-12 col-xl-4">
                                <div class="card mb-3 widget-chart" id="total_working_project" style="background-color: #f7b924 !important">
                                    <div class="widget-chart-content">
                                        <div class="icon-wrapper rounded">
                                            <div class="icon-wrapper-bg bg-info" style="background-color: white !important"></div>
                                            <i class="pe-7s-settings text-info" style="color: white !important"></i>
                                        </div>
                                        <div class="widget-numbers">
                                            <span style="color: white !important" id="total_pending_pro" name="{{ total_Working_project }}">{{ total_Working_project }}</span>
                                            <span style="color: white !important">221</span>
                                        </div>
                                        <div class="widget-subheading fsize-1 pt-2 opacity-10 text-info font-weight-bold">
                                            {% if User_language=="ENGLISH" %}                                
                                            <h5><b style="color: white !important;font-size: 22px">Total Working  Project</b></h5>
                                            {% endif %}
                                            {% if User_language=="GUJARATI" %}                                
                                            <h5><b style="color: white !important;font-size: 22px">કુલ ચાલુ પ્રોજેક્ટ </b></h5>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>-->



            <!--            <div class="row">
                            
                            <div class="col-md-12">
                                <div class="main-card mb-3 card">
                                    <div class="card-body">
                                        <h5 class="card-title" id="all_taluka_list" name="{{ all_taluka_list }}">Project Chart</h5>
                                        <div id="chart_div" class="pie"></div>
                                    </div>
                                </div>
                            </div>                
                            
                            <div class="col-md-6">
                                <div class="main-card mb-3 card">                        
                                    <div class="card-body">
                                        <h5 class="card-title">Project Progress Chart</h5>
                                        <div id="piechart" style="margin-left: -20px;margin-right: -20px" class="pie"></div>
                                    </div>
                                </div>
                            </div>
            
                            {% set j ="" %}
                            {% set k ="" %}
                            {% set a =0 %}
                            {% for i in project_sector %}
            
                            {% if a=="0" %}
            
                            {% set j =  i.sector_name %}
                            {% set k =  i.cnt   %}
            
                            {% endif %}
            
                            {% if a!="0" %}
            
                            {% set j = j +","+ i.sector_name %}
                            {% set k = k +","+ i.cnt  %}
            
                            {% endif %}
            
                            {% set a = a + 1 %}
                            {% endfor %}
            
                            <div class="col-md-6">
                                <div class="main-card mb-3 card" id="project_sector_name" name="{{ j }}">
                                    <div class="card-body" id="project_sector_cnt" name="{{ k }}">
                                        <h5 class="card-title">Project Sector Chart</h5>
                                        <div id="piechart_sector" style="margin-left: -20px;margin-right: -20px" class="pie"></div>
                                    </div>
                                </div>
                            </div>
            
                            
                        </div>
            
                        <div class="row">
                            <div class="col-md-12">
                                <div class="main-card mb-3 card">
            
                                    {% if User_language=="ENGLISH" %}                                
                                    <div class="card-header">All Project
                                        {% endif %}
                                        {% if User_language=="GUJARATI" %}                                
                                        <div class="card-header">પ્રોજેક્ટની માહિતી
                                            {% endif %}
            
            
                                            <div class="btn-actions-pane-right">
                                                <div role="group" class="btn-group-sm btn-group">
                                                                                            <button class="active btn btn-focus">Last Week</button>
                                                                                            <button class="btn btn-focus">All Month</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="align-middle mb-0 table table-borderless table-striped table-hover">
                                                <thead>
                                                    <tr>
                                                        {% if User_language=="ENGLISH" %}
            
                                                        <th>#</th>
                                                        <th class="text-center">Project Date</th>
                                                        <th>Project Name</th>
                                                        <th class="text-center">Village</th>
                                                        <th class="text-center">Status</th>
                                                        <th class="text-center">Chart</th>
                                                        <th class="text-center">Actions</th>
            
                                                        {% endif %}
                                                        {% if User_language=="GUJARATI" %}    
            
                                                        <th>#</th>
                                                        <th class="text-center">પ્રોજેક્ટ તારીખ</th>
                                                        <th>પ્રોજેક્ટ નામ</th>
                                                        <th class="text-center">ગામ</th>
                                                        <th class="text-center">પ્રોજેક્ટની સ્થિતિ</th>
                                                        <th class="text-center">ચાર્ટ</th>
                                                        <th class="text-center">ક્રિયાઓ</th>
            
                                                        {% endif %}
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% set j =1 %}
                                                    {% for i in rows %}
                                                    <tr id="{{ i.id }}" class="btn-view-progress">
                                                        <td class="text-center text-muted">{{ j }}</td>
                                                        <td class="text-center text-muted">{{ i.start_date }}</td>
                                                        <td>
                                                            <div class="widget-content p-0">
                                                                <div class="widget-content-wrapper">
                                                                    <div class="widget-content-left mr-3">
                                                                        <div class="widget-content-left">
                                                                            {% if i.project_img1!="" %}
                                                                            <img width="40" height="40px" class="rounded-circle view_progress1" id="{{ i.id }}" src="{{ i.project_img1 }}" alt="{{ i.project_name }}">
                                                                            {% endif %}
            
                                                                        </div>
                                                                    </div>
                                                                    <div class="widget-content-left flex2 view_progress1" id="{{ i.id }}">
                                                                        <div class="widget-heading"><a href="javascript:void(0)">{{ i.project_name }} </a></div>
                                                                        <div class="widget-subheading opacity-7">{{ i.project_detail }}</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">{{ i.village_name }}</td>
                                                        <td class="text-center">
                                                            {% if i.project_status=="Pending" %}
                                                            <div class="badge badge-warning">Pending</div>
                                                            {% endif %}
                                                            {% if i.project_status=="Complete" %}
                                                            <div class="badge badge-success">Completed</div>
                                                            {% endif %}
                                                            {% if i.project_status=="Working" %}
                                                            <div class="badge badge-danger">In Progress</div>
                                                            {% endif %}
                                                            {% if i.project_status=="" %}
                                                            <div class="badge badge-info">On Hold</div>
                                                            {% endif %}
                                                        </td>
                                                        <td class="text-center" style="width: 150px;">
            
                                                            {% if i.project_status=="Pending" %}
                                                            <div class="pie-sparkline"><canvas width="45" height="45" style="display: inline-block; width: 45px; height: 45px; vertical-align: top;"></canvas></div>
                                                            {% endif %}
                                                            {% if i.project_status=="Complete" %}
                                                            <div id="sparkline-chart4" style="min-height: 35px;"><div id="apexcharts2zx0c09t" class="apexcharts-canvas apexcharts2zx0c09t" style="width: 100px; height: 35px;"><svg id="SvgjsSvg1006" width="100" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1008" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1007"><clipPath id="gridRectMask2zx0c09t"><rect id="SvgjsRect1012" width="102" height="37" x="-1" y="-1" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMask2zx0c09t"><rect id="SvgjsRect1013" width="118" height="53" x="-9" y="-9" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath></defs><rect id="SvgjsRect1011" width="1" height="35" x="0" y="0" rx="0" ry="0" fill="#b1b9c4" opacity="1" stroke-width="0" stroke-dasharray="0" class="apexcharts-xcrosshairs" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG1041" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1042" class="apexcharts-xaxis-texts-g" transform="translate(0, 1.875)"></g></g><g id="SvgjsG1045" class="apexcharts-grid"><line id="SvgjsLine1047" x1="0" y1="35" x2="100" y2="35" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1046" x1="0" y1="1" x2="0" y2="35" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1015" class="apexcharts-line-series apexcharts-plot-series"><g id="SvgjsG1016" class="apexcharts-series series-1" data:longestSeries="true" rel="1" data:realIndex="0"><path id="apexcharts-line-0" d="M4.545454545454546 28.4375L13.636363636363637 2.1875L22.727272727272727 14.4375L31.81818181818182 6.5625L40.909090909090914 28.875L50.00000000000001 34.125L59.0909090909091 17.0625L68.18181818181819 11.375L77.27272727272728 33.25L86.36363636363637 23.1875L95.45454545454547 28.4375C95.45454545454547 28.4375 95.45454545454547 28.4375 95.45454545454547 28.4375 " fill="none" fill-opacity="1" stroke="rgba(0,143,251,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-line" index="0" clip-path="url(#gridRectMask2zx0c09t)" pathTo="M 4.545454545454546 28.4375L 13.636363636363637 2.1875L 22.727272727272727 14.4375L 31.81818181818182 6.5625L 40.909090909090914 28.875L 50.00000000000001 34.125L 59.0909090909091 17.0625L 68.18181818181819 11.375L 77.27272727272728 33.25L 86.36363636363637 23.1875L 95.45454545454547 28.4375" pathFrom="M -1 35L -1 35L 13.636363636363637 35L 22.727272727272727 35L 31.81818181818182 35L 40.909090909090914 35L 50.00000000000001 35L 59.0909090909091 35L 68.18181818181819 35L 77.27272727272728 35L 86.36363636363637 35L 95.45454545454547 35"></path><g id="SvgjsG1017" class="apexcharts-series-markers-wrap"><g id="SvgjsG1019" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1020" r="5" cx="4.545454545454546" cy="28.4375" class="apexcharts-marker no-pointer-events wfx3tiw52f" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="0" j="0" index="0" default-marker-size="5"></circle><circle id="SvgjsCircle1021" r="5" cx="13.636363636363637" cy="2.1875" class="apexcharts-marker no-pointer-events w2hb2rry3" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="1" j="1" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1022" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1023" r="5" cx="22.727272727272727" cy="14.4375" class="apexcharts-marker no-pointer-events wthsfea9gj" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="2" j="2" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1024" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1025" r="5" cx="31.81818181818182" cy="6.5625" class="apexcharts-marker no-pointer-events w1p050eqdg" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="3" j="3" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1026" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1027" r="5" cx="40.909090909090914" cy="28.875" class="apexcharts-marker no-pointer-events w6sc4yx3h" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="4" j="4" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1028" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1029" r="5" cx="50.00000000000001" cy="34.125" class="apexcharts-marker no-pointer-events wcl30s9gi" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="5" j="5" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1030" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1031" r="5" cx="59.0909090909091" cy="17.0625" class="apexcharts-marker no-pointer-events w42kz5zg5" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="6" j="6" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1032" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1033" r="5" cx="68.18181818181819" cy="11.375" class="apexcharts-marker no-pointer-events wk07n6kyb" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="7" j="7" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1034" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1035" r="5" cx="77.27272727272728" cy="33.25" class="apexcharts-marker no-pointer-events wwb0yorvb" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="8" j="8" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1036" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1037" r="5" cx="86.36363636363637" cy="23.1875" class="apexcharts-marker no-pointer-events w72r7qj4i" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="9" j="9" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1038" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1039" r="5" cx="95.45454545454547" cy="28.4375" class="apexcharts-marker no-pointer-events wg6tnt3h6" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="10" j="10" index="0" default-marker-size="5"></circle></g></g><g id="SvgjsG1018" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine1048" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1049" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1050" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG1051" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG1052" class="apexcharts-point-annotations"></g></g><g id="SvgjsG1043" class="apexcharts-yaxis" rel="0" transform="translate(-35, 0)"><g id="SvgjsG1044" class="apexcharts-yaxis-texts-g"></g></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(0, 143, 251);"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>
                                                            <div class="resize-triggers"><div class="expand-trigger"><div style="width: 151px; height: 61px;"></div></div><div class="contract-trigger"></div></div></td>
                                                        {% endif %}
                                                        {% if i.project_status=="Working" %}
                                                <div id="sparkline-chart8" style="min-height: 35px;"><div id="apexchartsrnwgh97w" class="apexcharts-canvas apexchartsrnwgh97w" style="width: 100px; height: 35px;"><svg id="SvgjsSvg1053" width="100" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1055" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1054"><linearGradient id="SvgjsLinearGradient1058" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1059" stop-opacity="0.4" stop-color="rgba(216,227,240,0.4)" offset="0"></stop><stop id="SvgjsStop1060" stop-opacity="0.5" stop-color="rgba(190,209,230,0.5)" offset="1"></stop><stop id="SvgjsStop1061" stop-opacity="0.5" stop-color="rgba(190,209,230,0.5)" offset="1"></stop></linearGradient><clipPath id="gridRectMaskrnwgh97w"><rect id="SvgjsRect1063" width="100" height="35" x="0" y="0" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMaskrnwgh97w"><rect id="SvgjsRect1064" width="108" height="43" x="-4" y="-4" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath></defs><rect id="SvgjsRect1062" width="1" height="35" x="0" y="0" rx="0" ry="0" fill="url(#SvgjsLinearGradient1058)" opacity="1" stroke-width="0" stroke-dasharray="0" class="apexcharts-xcrosshairs" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG1091" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1092" class="apexcharts-xaxis-texts-g" transform="translate(0, 1.875)"></g></g><g id="SvgjsG1095" class="apexcharts-grid"><line id="SvgjsLine1097" x1="0" y1="35" x2="100" y2="35" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1096" x1="0" y1="1" x2="0" y2="35" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1066" class="apexcharts-bar-series apexcharts-plot-series" clip-path="url(#gridRectMaskrnwgh97w)"><g id="SvgjsG1067" class="apexcharts-series series-1" rel="1" data:realIndex="0"><path id="apexcharts-bar-area-0" d="M0.9090909090909092 35L0.9090909090909092 25.27777777777778L8.181818181818183 25.27777777777778L8.181818181818183 35L0.9090909090909092 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 0.9090909090909092 35L 0.9090909090909092 25.27777777777778L 8.181818181818183 25.27777777777778L 8.181818181818183 35L 0.9090909090909092 35" pathFrom="M 0.9090909090909092 35L 0.9090909090909092 35L 8.181818181818183 35L 8.181818181818183 35L 0.9090909090909092 35" cy="25.27777777777778" cx="10" j="0" val="25" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M10 35L10 9.333333333333336L17.272727272727273 9.333333333333336L17.272727272727273 35L10 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 10 35L 10 9.333333333333336L 17.272727272727273 9.333333333333336L 17.272727272727273 35L 10 35" pathFrom="M 10 35L 10 35L 17.272727272727273 35L 17.272727272727273 35L 10 35" cy="9.333333333333336" cx="19.090909090909093" j="1" val="66" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M19.090909090909093 35L19.090909090909093 19.055555555555557L26.363636363636367 19.055555555555557L26.363636363636367 35L19.090909090909093 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 19.090909090909093 35L 19.090909090909093 19.055555555555557L 26.363636363636367 19.055555555555557L 26.363636363636367 35L 19.090909090909093 35" pathFrom="M 19.090909090909093 35L 19.090909090909093 35L 26.363636363636367 35L 26.363636363636367 35L 19.090909090909093 35" cy="19.055555555555557" cx="28.181818181818187" j="2" val="41" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M28.181818181818187 35L28.181818181818187 0.38888888888889284L35.45454545454546 0.38888888888889284L35.45454545454546 35L28.181818181818187 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 28.181818181818187 35L 28.181818181818187 0.38888888888889284L 35.45454545454546 0.38888888888889284L 35.45454545454546 35L 28.181818181818187 35" pathFrom="M 28.181818181818187 35L 28.181818181818187 35L 35.45454545454546 35L 35.45454545454546 35L 28.181818181818187 35" cy="0.38888888888889284" cx="37.27272727272728" j="3" val="89" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M37.27272727272728 35L37.27272727272728 10.500000000000004L44.545454545454554 10.500000000000004L44.545454545454554 35L37.27272727272728 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 37.27272727272728 35L 37.27272727272728 10.500000000000004L 44.545454545454554 10.500000000000004L 44.545454545454554 35L 37.27272727272728 35" pathFrom="M 37.27272727272728 35L 37.27272727272728 35L 44.545454545454554 35L 44.545454545454554 35L 37.27272727272728 35" cy="10.500000000000004" cx="46.363636363636374" j="4" val="63" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M46.363636363636374 35L46.363636363636374 25.27777777777778L53.63636363636365 25.27777777777778L53.63636363636365 35L46.363636363636374 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 46.363636363636374 35L 46.363636363636374 25.27777777777778L 53.63636363636365 25.27777777777778L 53.63636363636365 35L 46.363636363636374 35" pathFrom="M 46.363636363636374 35L 46.363636363636374 35L 53.63636363636365 35L 53.63636363636365 35L 46.363636363636374 35" cy="25.27777777777778" cx="55.45454545454547" j="5" val="25" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M55.45454545454547 35L55.45454545454547 17.88888888888889L62.72727272727274 17.88888888888889L62.72727272727274 35L55.45454545454547 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 55.45454545454547 35L 55.45454545454547 17.88888888888889L 62.72727272727274 17.88888888888889L 62.72727272727274 35L 55.45454545454547 35" pathFrom="M 55.45454545454547 35L 55.45454545454547 35L 62.72727272727274 35L 62.72727272727274 35L 55.45454545454547 35" cy="17.88888888888889" cx="64.54545454545456" j="6" val="44" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M64.54545454545456 35L64.54545454545456 30.333333333333336L71.81818181818184 30.333333333333336L71.81818181818184 35L64.54545454545456 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 64.54545454545456 35L 64.54545454545456 30.333333333333336L 71.81818181818184 30.333333333333336L 71.81818181818184 35L 64.54545454545456 35" pathFrom="M 64.54545454545456 35L 64.54545454545456 35L 71.81818181818184 35L 71.81818181818184 35L 64.54545454545456 35" cy="30.333333333333336" cx="73.63636363636365" j="7" val="12" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M73.63636363636365 35L73.63636363636365 21L80.90909090909093 21L80.90909090909093 35L73.63636363636365 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 73.63636363636365 35L 73.63636363636365 21L 80.90909090909093 21L 80.90909090909093 35L 73.63636363636365 35" pathFrom="M 73.63636363636365 35L 73.63636363636365 35L 80.90909090909093 35L 80.90909090909093 35L 73.63636363636365 35" cy="21" cx="82.72727272727275" j="8" val="36" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M82.72727272727275 35L82.72727272727275 31.5L90.00000000000003 31.5L90.00000000000003 35L82.72727272727275 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 82.72727272727275 35L 82.72727272727275 31.5L 90.00000000000003 31.5L 90.00000000000003 35L 82.72727272727275 35" pathFrom="M 82.72727272727275 35L 82.72727272727275 35L 90.00000000000003 35L 90.00000000000003 35L 82.72727272727275 35" cy="31.5" cx="91.81818181818184" j="9" val="9" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M91.81818181818184 35L91.81818181818184 14L99.09090909090912 14L99.09090909090912 35L91.81818181818184 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 91.81818181818184 35L 91.81818181818184 14L 99.09090909090912 14L 99.09090909090912 35L 91.81818181818184 35" pathFrom="M 91.81818181818184 35L 91.81818181818184 35L 99.09090909090912 35L 99.09090909090912 35L 91.81818181818184 35" cy="14" cx="100.90909090909093" j="10" val="54" barWidth="7.272727272727273"></path><g id="SvgjsG1068" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine1098" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1099" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1100" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG1101" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG1102" class="apexcharts-point-annotations"></g></g><g id="SvgjsG1093" class="apexcharts-yaxis" rel="0" transform="translate(-35, 0)"><g id="SvgjsG1094" class="apexcharts-yaxis-texts-g"></g></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(74, 71, 196);"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>
                                                <div class="resize-triggers"><div class="expand-trigger"><div style="width: 151px; height: 61px;"></div></div><div class="contract-trigger"></div></div></td>
                                                {% endif %}
                                                {% if i.project_status=="" %}
                                                <div id="sparkline-chart9" style="min-height: 35px;"><div id="apexchartsg824upwa" class="apexcharts-canvas apexchartsg824upwa" style="width: 100px; height: 35px;"><svg id="SvgjsSvg1103" width="100" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1105" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1104"><clipPath id="gridRectMaskg824upwa"><rect id="SvgjsRect1109" width="102" height="37" x="-1" y="-1" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMaskg824upwa"><rect id="SvgjsRect1110" width="114" height="49" x="-7" y="-7" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><linearGradient id="SvgjsLinearGradient1117" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1118" stop-opacity="0.65" stop-color="rgba(58,196,125,0.65)" offset="0"></stop><stop id="SvgjsStop1119" stop-opacity="0.5" stop-color="rgba(157,226,190,0.5)" offset="1"></stop><stop id="SvgjsStop1120" stop-opacity="0.5" stop-color="rgba(157,226,190,0.5)" offset="1"></stop></linearGradient></defs><rect id="SvgjsRect1108" width="1" height="35" x="0" y="0" rx="0" ry="0" fill="#b1b9c4" opacity="1" stroke-width="0" stroke-dasharray="0" class="apexcharts-xcrosshairs" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG1122" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1123" class="apexcharts-xaxis-texts-g" transform="translate(0, 1.875)"></g></g><g id="SvgjsG1126" class="apexcharts-grid"><line id="SvgjsLine1128" x1="0" y1="35" x2="100" y2="35" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1127" x1="0" y1="1" x2="0" y2="35" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1112" class="apexcharts-area-series apexcharts-plot-series"><g id="SvgjsG1113" class="apexcharts-series series-1" data:longestSeries="true" rel="1" data:realIndex="0"><path id="apexcharts-area-0" d="M4.545454545454546 25.27777777777778C7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14C95.45454545454547 14 95.45454545454547 14 95.45454545454547 14 " fill="none" fill-opacity="1" stroke="#3ac47d" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMaskg824upwa)" pathTo="M 4.545454545454546 25.27777777777778C 7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C 16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C 25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C 35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C 44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C 53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C 62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C 71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C 80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C 89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14" pathFrom="M -1 35L -1 35L 13.636363636363637 35L 22.727272727272727 35L 31.81818181818182 35L 40.909090909090914 35L 50.00000000000001 35L 59.0909090909091 35L 68.18181818181819 35L 77.27272727272728 35L 86.36363636363637 35L 95.45454545454547 35"></path><path id="apexcharts-area-0" d="M4.545454545454546 35L4.545454545454546 25.27777777777778C7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14C95.45454545454547 14 95.45454545454547 14 95.45454545454547 35M95.45454545454547 14C95.45454545454547 14 95.45454545454547 14 95.45454545454547 14 " fill="url(#SvgjsLinearGradient1117)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMaskg824upwa)" pathTo="M 4.545454545454546 35L 4.545454545454546 25.27777777777778C 7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C 16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C 25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C 35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C 44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C 53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C 62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C 71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C 80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C 89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14C 95.45454545454547 14 95.45454545454547 14 95.45454545454547 35M 95.45454545454547 14z" pathFrom="M -1 35L -1 35L 13.636363636363637 35L 22.727272727272727 35L 31.81818181818182 35L 40.909090909090914 35L 50.00000000000001 35L 59.0909090909091 35L 68.18181818181819 35L 77.27272727272728 35L 86.36363636363637 35L 95.45454545454547 35"></path><g id="SvgjsG1114" class="apexcharts-series-markers-wrap"><g class="apexcharts-series-markers"><circle id="SvgjsCircle1134" r="0" cx="0" cy="0" class="apexcharts-marker wnkov2aa1 no-pointer-events" stroke="#ffffff" fill="#3ac47d" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle></g></g><g id="SvgjsG1115" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine1129" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1130" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1131" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG1132" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG1133" class="apexcharts-point-annotations"></g></g><g id="SvgjsG1124" class="apexcharts-yaxis" rel="0" transform="translate(-35, 0)"><g id="SvgjsG1125" class="apexcharts-yaxis-texts-g"></g></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(58, 196, 125);"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>
                                                <div class="resize-triggers"><div class="expand-trigger"><div style="width: 151px; height: 61px;"></div></div><div class="contract-trigger"></div></div></td>
                                                {% endif %}
            
            
                                                </td>
                                                <td class="text-center">
                                                    {% if User_language=="ENGLISH" %}                                           
                                                    {% if user_type!="SITE_USER" %}                                        
                                                    <button type="button" id="{{ i.id }}" class="btn btn-success btn-sm edit_project">Edit</button>
                                                    {% endif %}
            
                                                    <button type="button" id="{{ i.id }}" class="btn btn-primary btn-sm view_progress1">Details</button>
                                                    {% endif %}
            
                                                    {% if User_language=="GUJARATI" %}     
                                                    {% if user_type!="SITE_USER" %}  
                                                    <button type="button" id="{{ i.id }}" class="btn btn-success btn-sm edit_project">ફેરફાર</button>
                                                    {% endif %}
            
                                                    <button type="button" id="{{ i.id }}" class="btn btn-primary btn-sm view_progress1">વધુ માહિતી</button>
                                                    {% endif %}
                                                </td>
                                                </tr>
                                                {% set j = j + 1 %}
                                                {% endfor %}
                                                                                    <tr>
                                                                                        <td class="text-center text-muted">#345</td>
                                                                                        <td>
                                                                                            <div class="widget-content p-0">
                                                                                                <div class="widget-content-wrapper">
                                                                                                    <div class="widget-content-left mr-3">
                                                                                                        <div class="widget-content-left">
                                                                                                            <img width="40" class="rounded-circle" src="assets/images/avatars/4.jpg" alt="">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="widget-content-left flex2">
                                                                                                        <div class="widget-heading">John Doe</div>
                                                                                                        <div class="widget-subheading opacity-7">Web Developer</div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                        <td class="text-center">Madrid</td>
                                                                                        <td class="text-center">
                                                                                            <div class="badge badge-warning">Pending</div>
                                                                                        </td>
                                                                                        <td class="text-center" style="width: 150px;">
                                                                                            <div class="pie-sparkline"><canvas width="45" height="45" style="display: inline-block; width: 45px; height: 45px; vertical-align: top;"></canvas></div>
                                                                                        </td>
                                                                                        <td class="text-center">
                                                                                            <button type="button" id="PopoverCustomT-1" class="btn btn-primary btn-sm">Details</button>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td class="text-center text-muted">#347</td>
                                                                                        <td>
                                                                                            <div class="widget-content p-0">
                                                                                                <div class="widget-content-wrapper">
                                                                                                    <div class="widget-content-left mr-3">
                                                                                                        <div class="widget-content-left">
                                                                                                            <img width="40" class="rounded-circle" src="assets/images/avatars/3.jpg" alt="">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="widget-content-left flex2">
                                                                                                        <div class="widget-heading">Ruben Tillman</div>
                                                                                                        <div class="widget-subheading opacity-7">Etiam sit amet orci eget</div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                        <td class="text-center">Berlin</td>
                                                                                        <td class="text-center">
                                                                                            <div class="badge badge-success">Completed</div>
                                                                                        </td>
                                                                                        <td class="text-center" style="width: 150px; position: relative;">
                                                                                            <div id="sparkline-chart4" style="min-height: 35px;"><div id="apexcharts2zx0c09t" class="apexcharts-canvas apexcharts2zx0c09t" style="width: 100px; height: 35px;"><svg id="SvgjsSvg1006" width="100" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1008" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1007"><clipPath id="gridRectMask2zx0c09t"><rect id="SvgjsRect1012" width="102" height="37" x="-1" y="-1" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMask2zx0c09t"><rect id="SvgjsRect1013" width="118" height="53" x="-9" y="-9" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath></defs><rect id="SvgjsRect1011" width="1" height="35" x="0" y="0" rx="0" ry="0" fill="#b1b9c4" opacity="1" stroke-width="0" stroke-dasharray="0" class="apexcharts-xcrosshairs" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG1041" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1042" class="apexcharts-xaxis-texts-g" transform="translate(0, 1.875)"></g></g><g id="SvgjsG1045" class="apexcharts-grid"><line id="SvgjsLine1047" x1="0" y1="35" x2="100" y2="35" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1046" x1="0" y1="1" x2="0" y2="35" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1015" class="apexcharts-line-series apexcharts-plot-series"><g id="SvgjsG1016" class="apexcharts-series series-1" data:longestSeries="true" rel="1" data:realIndex="0"><path id="apexcharts-line-0" d="M4.545454545454546 28.4375L13.636363636363637 2.1875L22.727272727272727 14.4375L31.81818181818182 6.5625L40.909090909090914 28.875L50.00000000000001 34.125L59.0909090909091 17.0625L68.18181818181819 11.375L77.27272727272728 33.25L86.36363636363637 23.1875L95.45454545454547 28.4375C95.45454545454547 28.4375 95.45454545454547 28.4375 95.45454545454547 28.4375 " fill="none" fill-opacity="1" stroke="rgba(0,143,251,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-line" index="0" clip-path="url(#gridRectMask2zx0c09t)" pathTo="M 4.545454545454546 28.4375L 13.636363636363637 2.1875L 22.727272727272727 14.4375L 31.81818181818182 6.5625L 40.909090909090914 28.875L 50.00000000000001 34.125L 59.0909090909091 17.0625L 68.18181818181819 11.375L 77.27272727272728 33.25L 86.36363636363637 23.1875L 95.45454545454547 28.4375" pathFrom="M -1 35L -1 35L 13.636363636363637 35L 22.727272727272727 35L 31.81818181818182 35L 40.909090909090914 35L 50.00000000000001 35L 59.0909090909091 35L 68.18181818181819 35L 77.27272727272728 35L 86.36363636363637 35L 95.45454545454547 35"></path><g id="SvgjsG1017" class="apexcharts-series-markers-wrap"><g id="SvgjsG1019" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1020" r="5" cx="4.545454545454546" cy="28.4375" class="apexcharts-marker no-pointer-events wfx3tiw52f" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="0" j="0" index="0" default-marker-size="5"></circle><circle id="SvgjsCircle1021" r="5" cx="13.636363636363637" cy="2.1875" class="apexcharts-marker no-pointer-events w2hb2rry3" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="1" j="1" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1022" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1023" r="5" cx="22.727272727272727" cy="14.4375" class="apexcharts-marker no-pointer-events wthsfea9gj" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="2" j="2" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1024" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1025" r="5" cx="31.81818181818182" cy="6.5625" class="apexcharts-marker no-pointer-events w1p050eqdg" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="3" j="3" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1026" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1027" r="5" cx="40.909090909090914" cy="28.875" class="apexcharts-marker no-pointer-events w6sc4yx3h" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="4" j="4" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1028" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1029" r="5" cx="50.00000000000001" cy="34.125" class="apexcharts-marker no-pointer-events wcl30s9gi" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="5" j="5" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1030" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1031" r="5" cx="59.0909090909091" cy="17.0625" class="apexcharts-marker no-pointer-events w42kz5zg5" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="6" j="6" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1032" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1033" r="5" cx="68.18181818181819" cy="11.375" class="apexcharts-marker no-pointer-events wk07n6kyb" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="7" j="7" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1034" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1035" r="5" cx="77.27272727272728" cy="33.25" class="apexcharts-marker no-pointer-events wwb0yorvb" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="8" j="8" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1036" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1037" r="5" cx="86.36363636363637" cy="23.1875" class="apexcharts-marker no-pointer-events w72r7qj4i" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="9" j="9" index="0" default-marker-size="5"></circle></g><g id="SvgjsG1038" class="apexcharts-series-markers" clip-path="url(#gridRectMarkerMask2zx0c09t)"><circle id="SvgjsCircle1039" r="5" cx="95.45454545454547" cy="28.4375" class="apexcharts-marker no-pointer-events wg6tnt3h6" stroke="#ffffff" fill="#008ffb" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" rel="10" j="10" index="0" default-marker-size="5"></circle></g></g><g id="SvgjsG1018" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine1048" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1049" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1050" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG1051" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG1052" class="apexcharts-point-annotations"></g></g><g id="SvgjsG1043" class="apexcharts-yaxis" rel="0" transform="translate(-35, 0)"><g id="SvgjsG1044" class="apexcharts-yaxis-texts-g"></g></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(0, 143, 251);"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>
                                                                                            <div class="resize-triggers"><div class="expand-trigger"><div style="width: 151px; height: 61px;"></div></div><div class="contract-trigger"></div></div></td>
                                                                                        <td class="text-center">
                                                                                            <button type="button" id="PopoverCustomT-2" class="btn btn-primary btn-sm">Details</button>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td class="text-center text-muted">#321</td>
                                                                                        <td>
                                                                                            <div class="widget-content p-0">
                                                                                                <div class="widget-content-wrapper">
                                                                                                    <div class="widget-content-left mr-3">
                                                                                                        <div class="widget-content-left">
                                                                                                            <img width="40" class="rounded-circle" src="assets/images/avatars/2.jpg" alt="">
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    <div class="widget-content-left flex2">
                                                                                                        <div class="widget-heading">Elliot Huber</div>
                                                                                                        <div class="widget-subheading opacity-7">Lorem ipsum dolor sic
                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                        <td class="text-center">London</td>
                                                                                        <td class="text-center">
                                                                                            <div class="badge badge-danger">In Progress</div>
                                                                                        </td>
                                                                                        <td class="text-center" style="width: 150px; position: relative;">
                                                                                            <div id="sparkline-chart8" style="min-height: 35px;"><div id="apexchartsrnwgh97w" class="apexcharts-canvas apexchartsrnwgh97w" style="width: 100px; height: 35px;"><svg id="SvgjsSvg1053" width="100" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1055" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1054"><linearGradient id="SvgjsLinearGradient1058" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1059" stop-opacity="0.4" stop-color="rgba(216,227,240,0.4)" offset="0"></stop><stop id="SvgjsStop1060" stop-opacity="0.5" stop-color="rgba(190,209,230,0.5)" offset="1"></stop><stop id="SvgjsStop1061" stop-opacity="0.5" stop-color="rgba(190,209,230,0.5)" offset="1"></stop></linearGradient><clipPath id="gridRectMaskrnwgh97w"><rect id="SvgjsRect1063" width="100" height="35" x="0" y="0" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMaskrnwgh97w"><rect id="SvgjsRect1064" width="108" height="43" x="-4" y="-4" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath></defs><rect id="SvgjsRect1062" width="1" height="35" x="0" y="0" rx="0" ry="0" fill="url(#SvgjsLinearGradient1058)" opacity="1" stroke-width="0" stroke-dasharray="0" class="apexcharts-xcrosshairs" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG1091" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1092" class="apexcharts-xaxis-texts-g" transform="translate(0, 1.875)"></g></g><g id="SvgjsG1095" class="apexcharts-grid"><line id="SvgjsLine1097" x1="0" y1="35" x2="100" y2="35" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1096" x1="0" y1="1" x2="0" y2="35" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1066" class="apexcharts-bar-series apexcharts-plot-series" clip-path="url(#gridRectMaskrnwgh97w)"><g id="SvgjsG1067" class="apexcharts-series series-1" rel="1" data:realIndex="0"><path id="apexcharts-bar-area-0" d="M0.9090909090909092 35L0.9090909090909092 25.27777777777778L8.181818181818183 25.27777777777778L8.181818181818183 35L0.9090909090909092 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 0.9090909090909092 35L 0.9090909090909092 25.27777777777778L 8.181818181818183 25.27777777777778L 8.181818181818183 35L 0.9090909090909092 35" pathFrom="M 0.9090909090909092 35L 0.9090909090909092 35L 8.181818181818183 35L 8.181818181818183 35L 0.9090909090909092 35" cy="25.27777777777778" cx="10" j="0" val="25" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M10 35L10 9.333333333333336L17.272727272727273 9.333333333333336L17.272727272727273 35L10 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 10 35L 10 9.333333333333336L 17.272727272727273 9.333333333333336L 17.272727272727273 35L 10 35" pathFrom="M 10 35L 10 35L 17.272727272727273 35L 17.272727272727273 35L 10 35" cy="9.333333333333336" cx="19.090909090909093" j="1" val="66" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M19.090909090909093 35L19.090909090909093 19.055555555555557L26.363636363636367 19.055555555555557L26.363636363636367 35L19.090909090909093 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 19.090909090909093 35L 19.090909090909093 19.055555555555557L 26.363636363636367 19.055555555555557L 26.363636363636367 35L 19.090909090909093 35" pathFrom="M 19.090909090909093 35L 19.090909090909093 35L 26.363636363636367 35L 26.363636363636367 35L 19.090909090909093 35" cy="19.055555555555557" cx="28.181818181818187" j="2" val="41" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M28.181818181818187 35L28.181818181818187 0.38888888888889284L35.45454545454546 0.38888888888889284L35.45454545454546 35L28.181818181818187 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 28.181818181818187 35L 28.181818181818187 0.38888888888889284L 35.45454545454546 0.38888888888889284L 35.45454545454546 35L 28.181818181818187 35" pathFrom="M 28.181818181818187 35L 28.181818181818187 35L 35.45454545454546 35L 35.45454545454546 35L 28.181818181818187 35" cy="0.38888888888889284" cx="37.27272727272728" j="3" val="89" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M37.27272727272728 35L37.27272727272728 10.500000000000004L44.545454545454554 10.500000000000004L44.545454545454554 35L37.27272727272728 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 37.27272727272728 35L 37.27272727272728 10.500000000000004L 44.545454545454554 10.500000000000004L 44.545454545454554 35L 37.27272727272728 35" pathFrom="M 37.27272727272728 35L 37.27272727272728 35L 44.545454545454554 35L 44.545454545454554 35L 37.27272727272728 35" cy="10.500000000000004" cx="46.363636363636374" j="4" val="63" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M46.363636363636374 35L46.363636363636374 25.27777777777778L53.63636363636365 25.27777777777778L53.63636363636365 35L46.363636363636374 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 46.363636363636374 35L 46.363636363636374 25.27777777777778L 53.63636363636365 25.27777777777778L 53.63636363636365 35L 46.363636363636374 35" pathFrom="M 46.363636363636374 35L 46.363636363636374 35L 53.63636363636365 35L 53.63636363636365 35L 46.363636363636374 35" cy="25.27777777777778" cx="55.45454545454547" j="5" val="25" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M55.45454545454547 35L55.45454545454547 17.88888888888889L62.72727272727274 17.88888888888889L62.72727272727274 35L55.45454545454547 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 55.45454545454547 35L 55.45454545454547 17.88888888888889L 62.72727272727274 17.88888888888889L 62.72727272727274 35L 55.45454545454547 35" pathFrom="M 55.45454545454547 35L 55.45454545454547 35L 62.72727272727274 35L 62.72727272727274 35L 55.45454545454547 35" cy="17.88888888888889" cx="64.54545454545456" j="6" val="44" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M64.54545454545456 35L64.54545454545456 30.333333333333336L71.81818181818184 30.333333333333336L71.81818181818184 35L64.54545454545456 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 64.54545454545456 35L 64.54545454545456 30.333333333333336L 71.81818181818184 30.333333333333336L 71.81818181818184 35L 64.54545454545456 35" pathFrom="M 64.54545454545456 35L 64.54545454545456 35L 71.81818181818184 35L 71.81818181818184 35L 64.54545454545456 35" cy="30.333333333333336" cx="73.63636363636365" j="7" val="12" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M73.63636363636365 35L73.63636363636365 21L80.90909090909093 21L80.90909090909093 35L73.63636363636365 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 73.63636363636365 35L 73.63636363636365 21L 80.90909090909093 21L 80.90909090909093 35L 73.63636363636365 35" pathFrom="M 73.63636363636365 35L 73.63636363636365 35L 80.90909090909093 35L 80.90909090909093 35L 73.63636363636365 35" cy="21" cx="82.72727272727275" j="8" val="36" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M82.72727272727275 35L82.72727272727275 31.5L90.00000000000003 31.5L90.00000000000003 35L82.72727272727275 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 82.72727272727275 35L 82.72727272727275 31.5L 90.00000000000003 31.5L 90.00000000000003 35L 82.72727272727275 35" pathFrom="M 82.72727272727275 35L 82.72727272727275 35L 90.00000000000003 35L 90.00000000000003 35L 82.72727272727275 35" cy="31.5" cx="91.81818181818184" j="9" val="9" barWidth="7.272727272727273"></path><path id="apexcharts-bar-area-0" d="M91.81818181818184 35L91.81818181818184 14L99.09090909090912 14L99.09090909090912 35L91.81818181818184 35 " fill="rgba(74,71,196,0.85)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-bar-area" index="0" clip-path="url(#gridRectMaskrnwgh97w)" pathTo="M 91.81818181818184 35L 91.81818181818184 14L 99.09090909090912 14L 99.09090909090912 35L 91.81818181818184 35" pathFrom="M 91.81818181818184 35L 91.81818181818184 35L 99.09090909090912 35L 99.09090909090912 35L 91.81818181818184 35" cy="14" cx="100.90909090909093" j="10" val="54" barWidth="7.272727272727273"></path><g id="SvgjsG1068" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine1098" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1099" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1100" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG1101" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG1102" class="apexcharts-point-annotations"></g></g><g id="SvgjsG1093" class="apexcharts-yaxis" rel="0" transform="translate(-35, 0)"><g id="SvgjsG1094" class="apexcharts-yaxis-texts-g"></g></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(74, 71, 196);"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>
                                                                                            <div class="resize-triggers"><div class="expand-trigger"><div style="width: 151px; height: 61px;"></div></div><div class="contract-trigger"></div></div></td>
                                                                                        <td class="text-center">
                                                                                            <button type="button" id="PopoverCustomT-3" class="btn btn-primary btn-sm">Details</button>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td class="text-center text-muted">#55</td>
                                                                                        <td>
                                                                                            <div class="widget-content p-0">
                                                                                                <div class="widget-content-wrapper">
                                                                                                    <div class="widget-content-left mr-3">
                                                                                                        <div class="widget-content-left">
                                                                                                            <img width="40" class="rounded-circle" src="assets/images/avatars/1.jpg" alt=""></div>
                                                                                                    </div>
                                                                                                    <div class="widget-content-left flex2">
                                                                                                        <div class="widget-heading">Vinnie Wagstaff</div>
                                                                                                        <div class="widget-subheading opacity-7">UI Designer</div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </td>
                                                                                        <td class="text-center">Amsterdam</td>
                                                                                        <td class="text-center">
                                                                                            <div class="badge badge-info">On Hold</div>
                                                                                        </td>
                                                                                        <td class="text-center" style="width: 150px; position: relative;">
                                                                                            <div id="sparkline-chart9" style="min-height: 35px;"><div id="apexchartsg824upwa" class="apexcharts-canvas apexchartsg824upwa" style="width: 100px; height: 35px;"><svg id="SvgjsSvg1103" width="100" height="35" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;"><g id="SvgjsG1105" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)"><defs id="SvgjsDefs1104"><clipPath id="gridRectMaskg824upwa"><rect id="SvgjsRect1109" width="102" height="37" x="-1" y="-1" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><clipPath id="gridRectMarkerMaskg824upwa"><rect id="SvgjsRect1110" width="114" height="49" x="-7" y="-7" rx="0" ry="0" fill="#ffffff" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0"></rect></clipPath><linearGradient id="SvgjsLinearGradient1117" x1="0" y1="0" x2="0" y2="1"><stop id="SvgjsStop1118" stop-opacity="0.65" stop-color="rgba(58,196,125,0.65)" offset="0"></stop><stop id="SvgjsStop1119" stop-opacity="0.5" stop-color="rgba(157,226,190,0.5)" offset="1"></stop><stop id="SvgjsStop1120" stop-opacity="0.5" stop-color="rgba(157,226,190,0.5)" offset="1"></stop></linearGradient></defs><rect id="SvgjsRect1108" width="1" height="35" x="0" y="0" rx="0" ry="0" fill="#b1b9c4" opacity="1" stroke-width="0" stroke-dasharray="0" class="apexcharts-xcrosshairs" filter="none" fill-opacity="0.9"></rect><g id="SvgjsG1122" class="apexcharts-xaxis" transform="translate(0, 0)"><g id="SvgjsG1123" class="apexcharts-xaxis-texts-g" transform="translate(0, 1.875)"></g></g><g id="SvgjsG1126" class="apexcharts-grid"><line id="SvgjsLine1128" x1="0" y1="35" x2="100" y2="35" stroke="transparent" stroke-dasharray="0"></line><line id="SvgjsLine1127" x1="0" y1="1" x2="0" y2="35" stroke="transparent" stroke-dasharray="0"></line></g><g id="SvgjsG1112" class="apexcharts-area-series apexcharts-plot-series"><g id="SvgjsG1113" class="apexcharts-series series-1" data:longestSeries="true" rel="1" data:realIndex="0"><path id="apexcharts-area-0" d="M4.545454545454546 25.27777777777778C7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14C95.45454545454547 14 95.45454545454547 14 95.45454545454547 14 " fill="none" fill-opacity="1" stroke="#3ac47d" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMaskg824upwa)" pathTo="M 4.545454545454546 25.27777777777778C 7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C 16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C 25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C 35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C 44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C 53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C 62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C 71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C 80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C 89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14" pathFrom="M -1 35L -1 35L 13.636363636363637 35L 22.727272727272727 35L 31.81818181818182 35L 40.909090909090914 35L 50.00000000000001 35L 59.0909090909091 35L 68.18181818181819 35L 77.27272727272728 35L 86.36363636363637 35L 95.45454545454547 35"></path><path id="apexcharts-area-0" d="M4.545454545454546 35L4.545454545454546 25.27777777777778C7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14C95.45454545454547 14 95.45454545454547 14 95.45454545454547 35M95.45454545454547 14C95.45454545454547 14 95.45454545454547 14 95.45454545454547 14 " fill="url(#SvgjsLinearGradient1117)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt" stroke-width="0" stroke-dasharray="0" class="apexcharts-area" index="0" clip-path="url(#gridRectMaskg824upwa)" pathTo="M 4.545454545454546 35L 4.545454545454546 25.27777777777778C 7.727272727272727 25.27777777777778 10.454545454545455 9.333333333333336 13.636363636363637 9.333333333333336C 16.818181818181817 9.333333333333336 19.545454545454547 19.055555555555557 22.727272727272727 19.055555555555557C 25.90909090909091 19.055555555555557 28.636363636363637 0.38888888888889284 31.81818181818182 0.38888888888889284C 35 0.38888888888889284 37.727272727272734 10.500000000000004 40.909090909090914 10.500000000000004C 44.09090909090909 10.500000000000004 46.81818181818183 25.27777777777778 50.00000000000001 25.27777777777778C 53.18181818181819 25.27777777777778 55.90909090909092 17.88888888888889 59.0909090909091 17.88888888888889C 62.27272727272728 17.88888888888889 65 30.333333333333336 68.18181818181819 30.333333333333336C 71.36363636363637 30.333333333333336 74.0909090909091 21 77.27272727272728 21C 80.45454545454547 21 83.18181818181819 31.5 86.36363636363637 31.5C 89.54545454545456 31.5 92.27272727272728 14 95.45454545454547 14C 95.45454545454547 14 95.45454545454547 14 95.45454545454547 35M 95.45454545454547 14z" pathFrom="M -1 35L -1 35L 13.636363636363637 35L 22.727272727272727 35L 31.81818181818182 35L 40.909090909090914 35L 50.00000000000001 35L 59.0909090909091 35L 68.18181818181819 35L 77.27272727272728 35L 86.36363636363637 35L 95.45454545454547 35"></path><g id="SvgjsG1114" class="apexcharts-series-markers-wrap"><g class="apexcharts-series-markers"><circle id="SvgjsCircle1134" r="0" cx="0" cy="0" class="apexcharts-marker wnkov2aa1 no-pointer-events" stroke="#ffffff" fill="#3ac47d" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle></g></g><g id="SvgjsG1115" class="apexcharts-datalabels"></g></g></g><line id="SvgjsLine1129" x1="0" y1="0" x2="100" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1130" x1="0" y1="0" x2="100" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line><g id="SvgjsG1131" class="apexcharts-yaxis-annotations"></g><g id="SvgjsG1132" class="apexcharts-xaxis-annotations"></g><g id="SvgjsG1133" class="apexcharts-point-annotations"></g></g><g id="SvgjsG1124" class="apexcharts-yaxis" rel="0" transform="translate(-35, 0)"><g id="SvgjsG1125" class="apexcharts-yaxis-texts-g"></g></g></svg><div class="apexcharts-legend"></div><div class="apexcharts-tooltip light"><div class="apexcharts-tooltip-series-group"><span class="apexcharts-tooltip-marker" style="background-color: rgb(58, 196, 125);"></span><div class="apexcharts-tooltip-text"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div><div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div></div></div></div></div></div>
                                                                                            <div class="resize-triggers"><div class="expand-trigger"><div style="width: 151px; height: 61px;"></div></div><div class="contract-trigger"></div></div></td>
                                                                                        <td class="text-center">
                                                                                            <button type="button" id="PopoverCustomT-4" class="btn btn-primary btn-sm">Details</button>
                                                                                        </td>
                                                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                                                <div class="d-block text-center card-footer">
                                                                    <button class="mr-2 btn-icon btn-icon-only btn btn-outline-danger">
                                                                        <i class="pe-7s-trash btn-icon-wrapper"> </i></button>
                                                                    <button class="btn-wide btn btn-success">Save</button>
                                                                </div>
                                    </div>
                                </div>
                            </div>
            
                                        <div class="text-center mbg-3">
                                            <button class="btn-wide btn-pill btn-shadow fsize-1 btn btn-focus btn-lg">
                                                <span class="mr-2 opacity-7">
                                                    <i class="icon icon-anim-pulse ion-ios-analytics-outline"></i>
                                                </span>
                                                View Complete Report
                                            </button>
                                        </div>
                                        <div class="card no-shadow bg-transparent no-border rm-borders mb-3">
                                            <div class="card">
                                                <div class="no-gutters row">
                                                    <div class="col-md-12 col-lg-6 col-xl-3">
                                                        <div class="pt-0 pb-0 card-body">
                                                            <ul class="list-group list-group-flush">
                                                                <li class="list-group-item">
                                                                    <div class="widget-content p-0">
                                                                        <div class="widget-content-outer">
                                                                            <div class="widget-content-wrapper">
                                                                                <div class="widget-content-left">
                                                                                    <div class="widget-heading">Total Orders</div>
                                                                                    <div class="widget-subheading">Last year expenses</div>
                                                                                </div>
                                                                                <div class="widget-content-right">
                                                                                    <div class="widget-numbers text-primary">1896</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="widget-progress-wrapper">
                                                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                                                    <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%;">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="progress-sub-label">
                                                                                    <div class="sub-label-left">YoY Growth</div>
                                                                                    <div class="sub-label-right">100%</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12 col-lg-6 col-xl-3">
                                                        <div class="pt-0 pb-0 card-body">
                                                            <ul class="list-group list-group-flush">
                                                                <li class="list-group-item">
                                                                    <div class="widget-content p-0">
                                                                        <div class="widget-content-outer">
                                                                            <div class="widget-content-wrapper">
                                                                                <div class="widget-content-left">
                                                                                    <div class="widget-heading">Followers</div>
                                                                                    <div class="widget-subheading">People interested</div>
                                                                                </div>
                                                                                <div class="widget-content-right">
                                                                                    <div class="widget-numbers text-success">45,5%</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="widget-progress-wrapper">
                                                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%;">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="progress-sub-label">
                                                                                    <div class="sub-label-left">YoY Growth</div>
                                                                                    <div class="sub-label-right">100%</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12 col-lg-6 col-xl-3">
                                                        <div class="pt-0 pb-0 card-body">
                                                            <ul class="list-group list-group-flush">
                                                                <li class="list-group-item">
                                                                    <div class="widget-content p-0">
                                                                        <div class="widget-content-outer">
                                                                            <div class="widget-content-wrapper">
                                                                                <div class="widget-content-left">
                                                                                    <div class="widget-heading">Clients</div>
                                                                                    <div class="widget-subheading">Total Profit</div>
                                                                                </div>
                                                                                <div class="widget-content-right">
                                                                                    <div class="widget-numbers text-danger">
                                                                                        <small>$</small>
                                                                                        527
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="widget-progress-wrapper">
                                                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                                                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%;">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="progress-sub-label">
                                                                                    <div class="sub-label-left">YoY Growth</div>
                                                                                    <div class="sub-label-right">100%</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12 col-lg-6 col-xl-3">
                                                        <div class="pt-0 pb-0 card-body">
                                                            <ul class="list-group list-group-flush">
                                                                <li class="list-group-item">
                                                                    <div class="widget-content p-0">
                                                                        <div class="widget-content-outer">
                                                                            <div class="widget-content-wrapper">
                                                                                <div class="widget-content-left">
                                                                                    <div class="widget-heading">Products Sold</div>
                                                                                    <div class="widget-subheading">Total revenue streams</div>
                                                                                </div>
                                                                                <div class="widget-content-right">
                                                                                    <div class="widget-numbers text-focus">682</div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="widget-progress-wrapper">
                                                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                                                    <div class="progress-bar bg-focus" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%;">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="progress-sub-label">
                                                                                    <div class="sub-label-left">YoY Growth</div>
                                                                                    <div class="sub-label-right">100%</div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
            
            
                        </div>
                    </div>-->
        </div>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

        <style>

            a {
                /*color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));*/
                text-decoration: auto !important;
            }

            body {
                /*      background: linear-gradient(to right, #e8f0ff, #ffffff);
                      font-family: 'Segoe UI', sans-serif;*/
            }
            .dashboard-header {
                background: #3f51b5;
                color: white;
                padding: 2rem 1rem;
                border-radius: 10px;
                margin-bottom: 2rem;
            }
            .summary-card {
                background: white;
                border-left: 5px solid #3f51b5;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                padding: 1rem 1.5rem;
                transition: all 0.2s ease;
            }
            .summary-card:hover {
                transform: translateY(-4px);
            }
            .chart-box, .table-box {
                background: #fff;
                border-radius: 12px;
                padding: 20px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                margin-bottom: 2rem;
            }
            /*    .section-title {
                  font-weight: 600;
                  margin-bottom: 1rem;
                  color: #3f51b5;
                }*/
        </style>
        </head>
        <body>
            <div class="container">
                <div class="dashboard-header text-center">
                    <h2>📊 PVTG ડેશબોર્ડ - તાપી જિલ્લો</h2>
                    <!--<p>ડેટા આધારિત કામગીરી માટે </p>-->
                </div>

                <!-- Summary Cards -->
                <div class="row g-3 mb-4">
                    <div class="col-md-3">
                        <div class="summary-card">
                            <h6>કુલ પરિવાર</h6>
                            <h3>1,200</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-card">
                            <h6>પુરુષ</h6>
                            <h3>3,100</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-card">
                            <h6>મહિલા</h6>
                            <h3>3,400</h3>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="summary-card">
                            <h6>બાળકો</h6>
                            <h3>1,050</h3>
                        </div>
                    </div>
                </div>

                <!-- Filter Dropdown -->
<!--                <div class="mb-4 col-md-3">
                    <label for="talukaFilter" class="form-label">તાલુકા પસંદ કરો:</label>
                    <select id="talukaFilter" class="form-select" onchange="filterTable()">
                        <option value="all">બધા</option>
                        <option value="વ્યોરા">વ્યોરા</option>
                        <option value="ઉચલ">ઉચલ</option>
                        <option value="સોનગઢ">સોનગઢ</option>
                    </select>
                </div>-->

                <!-- Charts -->
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="chart-box">
                            <h5 class="section-title">રેશન કાર્ડ વિતરણ</h5>
                            <canvas id="rationChart"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart-box">
                            <h5 class="section-title">ઉજ્જ્વલા લાભ (તાલુકાવાર)</h5>
                            <canvas id="ujjwalaTalukaChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Table -->
                <div class="table-box">
                    <h5 class="section-title">📋 ગામ મુજબ લાભ પામનાર વિગતો</h5>
                    <div class="table-responsive">
                        <table class="table table-striped" id="beneficiaryTable">
                            <thead class="table-primary">
                                <tr>
                                    <th>#</th>
                                    <th>તાલુકો</th>
                                    <th>ગામ</th>
                                    <th>ફળીયું</th>
                                    <th>પરિવાર</th>
                                    <th>PM-Kisan</th>
                                    <th>ઉજ્જ્વલા</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>વ્યોરા</td>
                                    <td>ગોપાલપુરા</td>
                                    <td>ભીલ ફળીયું</td>
                                    <td>120</td>
                                    <td>45</td>
                                    <td>37</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>ઉચલ</td>
                                    <td>વડપાડા</td>
                                    <td>હોલી ફળીયું</td>
                                    <td>100</td>
                                    <td>30</td>
                                    <td>28</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>સોનગઢ</td>
                                    <td>આમલગુંદી</td>
                                    <td>પારસી સળીયું</td>
                                    <td>95</td>
                                    <td>20</td>
                                    <td>19</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <script>
                // Ration Chart
                new Chart(document.getElementById('rationChart'), {
                    type: 'doughnut',
                    data: {
                        labels: ['Antyoday', 'BPL', 'NFSA'],
                        datasets: [{
                                label: 'Card Count',
                                data: [45, 35, 20],
                                backgroundColor: ['#3f51b5', '#4caf50', '#ffc107'],
                                borderWidth: 1
                            }]
                    }
                });

                // Taluka-wise Ujjwala Chart
                new Chart(document.getElementById('ujjwalaTalukaChart'), {
                    type: 'bar',
                    data: {
                        labels: ['વ્યોરા', 'ઉચલ', 'સોનગઢ'],
                        datasets: [{
                                label: 'ઉજ્જ્વલા લાભાર્થીઓ',
                                data: [37, 28, 19],
                                backgroundColor: ['#2196f3', '#00bcd4', '#8bc34a']
                            }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {beginAtZero: true}
                        }
                    }
                });

                // Taluka filter for table rows
                function filterTable() {
                    const selected = document.getElementById('talukaFilter').value;
                    const rows = document.querySelectorAll('#beneficiaryTable tbody tr');
                    rows.forEach(row => {
                        const taluka = row.children[1].innerText.trim();
                        row.style.display = (selected === 'all' || selected === taluka) ? '' : 'none';
                    });
                }
            </script>



            <script type="text/javascript">
                // Load google charts
                google.charts.load('current', {'packages': ['corechart']});
                google.charts.setOnLoadCallback(drawChart);



                // Draw the chart and set the chart values
                function drawChart() {
                    let total_pending_pro = document.getElementById("total_pending_pro").getAttribute('name');
                    let total_complete_pro = document.getElementById("total_complete_pro").getAttribute('name');
                    let total_pro = document.getElementById("total_pro").getAttribute('name');

                    var data = google.visualization.arrayToDataTable([
                        ['Task', 'Hours per Day'],
                        ['Complete Project', parseInt(total_complete_pro)],
                        ['TV', 0],
                        ['Working Project', parseInt(total_pending_pro)],
                        ['Total Project', 0]
                    ]);

                    // Optional; add a title and set the width and height of the chart
                    var options = {'title': '', 'width': 690, 'height': 350, 'fontSize': 16};

                    // Display the chart inside the <div> element with id="piechart"
                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                    chart.draw(data, options);
                }

                google.charts.load("current", {packages: ["corechart"]});
                google.charts.setOnLoadCallback(drawChart_sector);
                function drawChart_sector() {

                    let project_sector_name = document.getElementById("project_sector_name").getAttribute('name');
                    let project_sector_cnt = document.getElementById("project_sector_cnt").getAttribute('name');
                    //            alert('project_sector_name ' + project_sector_name);
                    //            alert('project_sector_cnt ' + project_sector_cnt);

                    var nameArr = project_sector_name.split(',');
                    var cntArr = project_sector_cnt.split(',');
                    var nameArr1, nameArr2, nameArr3, nameArr4, nameArr5, nameArr5, nameArr6, nameArr7, nameArr8, nameArr9, nameArr10 = "";
                    let cntArr1, cntArr2, cntArr3, cntArr4, cntArr5, cntArr6, cntArr7, cntArr8, cntArr9, cntArr10 = 0;

                    //            alert('nameArr.length ' + nameArr.length);

                    for (let i = 0; i < nameArr.length; i++) {
                        debugger;
                        if (i == 0) {
                            nameArr1 = nameArr[i];
                            cntArr1 = cntArr[i];
                        } else if (i == 1) {
                            nameArr2 = nameArr[i];
                            cntArr2 = cntArr[i];
                        } else if (i == 2) {
                            nameArr3 = nameArr[i];
                            cntArr3 = cntArr[i];
                        } else if (i == 3) {
                            nameArr4 = nameArr[i];
                            cntArr4 = cntArr[i];
                        } else if (i == 4) {
                            nameArr5 = nameArr[i];
                            cntArr5 = cntArr[i];
                        } else if (i == 5) {
                            nameArr6 = nameArr[i];
                            cntArr6 = cntArr[i];
                        } else if (i == 6) {
                            nameArr7 = nameArr[i];
                            cntArr7 = cntArr[i];
                        } else if (i == 7) {
                            nameArr8 = nameArr[i];
                            cntArr8 = cntArr[i];
                        } else if (i == 8) {
                            nameArr9 = nameArr[i];
                            cntArr9 = cntArr[i];
                        } else if (i == 9) {
                            nameArr10 = nameArr[i];
                            cntArr10 = cntArr[i];
                        }
                    }

                    var data = google.visualization.arrayToDataTable([
                        ['Task', 'Hours per Day'],
                        [nameArr1, parseInt(cntArr1)],
                        [nameArr2, parseInt(cntArr2)],
                        [nameArr3, parseInt(cntArr3)],
                        [nameArr4, parseInt(cntArr4)],
                        [nameArr5, parseInt(cntArr5)],
                        [nameArr6, parseInt(cntArr6)],
                        [nameArr7, parseInt(cntArr7)],
                        [nameArr8, parseInt(cntArr8)],
                        [nameArr9, parseInt(cntArr9)],
                        [nameArr10, parseInt(cntArr10)]
                    ]);

                    var options = {
                        title: '',
                        pieHole: 0.4,
                        width: 690,
                        height: 350,
                        fontSize: 16
                    };

                    var chart = new google.visualization.PieChart(document.getElementById('piechart_sector'));
                    chart.draw(data, options);
                }


                google.charts.load('current', {'packages': ['corechart']});
                google.charts.setOnLoadCallback(drawVisualization);

                function drawVisualization() {

                    let all_taluka_list = document.getElementById("all_taluka_list").getAttribute('name');
                    //            alert('all_taluka_list ' + all_taluka_list);
                    //            alert('project_sector_cnt ' + project_sector_cnt);

                    var nameArr_all_taluka_list = all_taluka_list.split(',');
                    //            let nameArr11, nameArr12, nameArr13, nameArr14, nameArr15, nameArr15, nameArr16, nameArr17, nameArr18 = 0;
                    let cntArr11, cntArr12, cntArr13, cntArr14, cntArr15, cntArr16, cntArr17, cntArr18 = 0;
                    //            alert('nameArr.length ' + nameArr.length);

                    for (let i = 0; i < nameArr_all_taluka_list.length; i++) {
                        debugger;
                        if (i == 0) {
                            cntArr11 = nameArr_all_taluka_list[i];
                        } else if (i == 1) {
                            cntArr12 = nameArr_all_taluka_list[i];
                        } else if (i == 2) {
                            cntArr13 = nameArr_all_taluka_list[i];
                        } else if (i == 3) {
                            cntArr14 = nameArr_all_taluka_list[i];
                        } else if (i == 4) {
                            cntArr15 = nameArr_all_taluka_list[i];
                        } else if (i == 5) {
                            cntArr16 = nameArr_all_taluka_list[i];
                        } else if (i == 6) {
                            cntArr17 = nameArr_all_taluka_list[i];
                        } else if (i == 7) {
                            cntArr18 = nameArr_all_taluka_list[i];
                        }
                    }
                    //            alert('all_taluka_list ' + cntArr11 + " " + cntArr12 + " " + cntArr13 + " " + cntArr14 + " " + cntArr15 + " " + cntArr15 + " " + cntArr16 + " " + cntArr17 + " " + cntArr18);

                    // Some raw data (not necessarily accurate)
                    var data = google.visualization.arrayToDataTable([
                        ['All', 'ભરૂચ', 'આમોદ', 'અંકલેશ્વર', 'હાંસોટ', 'જંબુસર', 'ઝગડિયા', 'વાગરા', 'વાલિયા'],
                        ['', parseInt(cntArr11), parseInt(cntArr12), parseInt(cntArr13), parseInt(cntArr14), parseInt(cntArr15), parseInt(cntArr16), parseInt(cntArr17), parseInt(cntArr18)]
                                //                ['', 5, 0, 0, 0, 0, 0, 0, 0]
                                //                ['2022/09', 13, 1, 12]
                    ]);

                    var options = {
                        title: 'Taluka Wise Project Report',
                        vAxis: {title: 'Project'},
                        hAxis: {title: 'All'},
                        seriesType: 'bars',
                        height: 420,
                        fontSize: 16,
                        series: {8: {type: 'line'}}
                    };

                    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                }

                //        setTimeout(drawChart, 2000);
            </script>


            <script>
                let slideIndex = 0;
                showSlides();

                function showSlides() {
                    let i;
                    let slides = document.getElementsByClassName("mySlides");
                    let dots = document.getElementsByClassName("dot");
                    for (i = 0; i < slides.length; i++) {
                        slides[i].style.display = "none";
                    }
                    slideIndex++;
                    if (slideIndex > slides.length) {
                        slideIndex = 1
                    }
                    for (i = 0; i < dots.length; i++) {
                        dots[i].className = dots[i].className.replace(" active", "");
                    }
                    slides[slideIndex - 1].style.display = "block";
                    dots[slideIndex - 1].className += " active";
                    setTimeout(showSlides, 8000); // Change image every 2 seconds
                }
            </script>

            <script>

                $(document).ready(function () {
                    $(document.body).on('click', '.edit_project', function (e) {

                        //            alert('id is ' + $(this).attr('id'));
                        var project_id = $(this).attr('id');
                        if (project_id == " ") {
                            alert('Project Id Not Found! ');
                        } else {
                            debugger;
                            var data = {};
                            data.project_id = project_id;
                            data.edit_project = "Yes";
                            data.view_project = "No";
                            $.ajax({
                                type: 'POST',
                                data: JSON.stringify(data),
                                contentType: 'application/json',
                                url: '/project_progress/set_session_project_id',
                                success: function (data) {
                                    debugger;
                                    //                        alert('data '+data);
                                    window.location.href = "/project_progress/project_detail";

                                }, error: function (xhr, err) {
                                    alert('Error ' + err.message);
                                }
                            });
                        }

                    });


                    $(document.body).on('click', '.view_progress1', function (e) {
                        //            alert('id is ' + $(this).attr('id'));
                        var project_id = $(this).attr('id');
                        if (project_id == " ") {
                            alert('Project Id Not Found! ');
                        } else {
                            debugger;
                            var data = {};
                            data.project_id = project_id;
                            data.edit_project = "No";
                            data.view_project = "Yes";
                            $.ajax({
                                type: 'POST',
                                data: JSON.stringify(data),
                                contentType: 'application/json',
                                url: '/project_progress/set_session_project_id',
                                success: function (data) {
                                    debugger;
                                    //                        alert('data '+data);
                                    window.location.href = "/project_progress/project_detail";

                                }, error: function (xhr, err) {
                                    alert('Error ' + err.message);
                                }
                            });
                        }

                    });

                    $(document.body).on('click', '#total_project', function (e) {
                        //            alert('total_project is ');
                        window.location.href = "/project_progress/view_total_project";
                    });

                    $(document.body).on('click', '#total_complete_project', function (e) {
                        //            alert('total_complete_project is ');
                        window.location.href = "/project_progress/view_total_complete_project";
                    });

                    $(document.body).on('click', '#total_working_project', function (e) {
                        //            alert('total_working_project is ');
                        window.location.href = "/project_progress/view_total_working_project";
                    });

                });

            </script>


            


        <!DOCTYPE html>
        <html>
            <head>
                <title>Taluka Map</title>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <!-- Leaflet CSS -->
                <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

                <style>
                    #map {
                        height: 700px;
                        width: 100%;
                    }

                    /* Single color for all taluka names */
                    .taluka-label {
                        font-weight: bold;
                        font-size: 15px;
                        color: darkblue;
                        /*background-color: #ACC8E5;*/
                        /*color: #112A46;*/
                        padding: 5px;
                        /*padding: 2px 2px;*/
                        border-radius: 2px;
                        border: 1px solid red;
                    }

                    .leaflet-tooltip{
                        padding: 0px
                    }

                    /* Colored circular icons */
                    .circle-icon {
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        border: 2px solid black;
                    }

                    .leaflet-tooltip {
                        pointer-events: auto !important;
                        cursor: pointer;
                    }
                </style>
            </head>
            <body>

                <h3>Taluka Map</h3>
                <div id="map" style="margin-bottom: 50px"></div>

                <!-- Leaflet JS -->
                <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

                <script>
                    var map = L.map('map').setView([21.26508631672424, 73.63596914870568], 10);

                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; Rudra'
                    }).addTo(map);

//            const commonIcon = L.icon({
//                iconUrl: "https://cdn-icons-png.flaticon.com/512/854/854878.png",
//                iconSize: [32, 32],
//                iconAnchor: [16, 32],
//                popupAnchor: [0, -32]
//            });

                    // Taluka data with icon color and label class
                    var talukas = [
                        {name: "Vyara", lat: 21.101657806225575, lng: 73.39381768336682, link: "/view_village_summary_detail", color: "red", labelClass: "label-vyara"},
                        {name: "Nizar", lat: 21.476848373671487, lng: 74.19743755489517, link: "/view_village_summary_detail", color: "red", labelClass: "label-nizar"},
                        {name: "Songadh", lat: 21.166814251490326, lng: 73.56664104119305, link: "/view_village_summary_detail", color: "red", labelClass: "label-songadh"},
                        {name: "Uchchhal", lat: 21.172116220803936, lng: 73.76918418567836, link: "/view_village_summary_detail", color: "red", labelClass: "label-uchchhal"},
                        {name: "Valod", lat: 21.049426282122255, lng: 73.26334998375948, link: "/view_village_summary_detail", color: "red", labelClass: "label-valod"},
                        {name: "Dolvan", lat: 20.904184944356306, lng: 73.32889551935088, link: "/view_village_summary_detail", color: "red", labelClass: "label-dolvan"},
                        {name: "Kukarmunda", lat: 21.546967035508796, lng: 74.12519936931551, link: "/view_village_summary_detail", color: "red", labelClass: "label-kukarmunda"}
                    ];

                    talukas.forEach(function (taluka) {
                        // Create a colored circular icon
                        var icon = L.divIcon({
                            html: `<div style="width:40px; height:40px;">
             <img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png" 
                  style="width:70%; height:80%; border-radius: 50%" />
           </div>`,
//                    html: `<div class="circle-icon" style="background-color: ${taluka.color};"></div>`,
                            iconSize: [16, 16],
                            iconAnchor: [8, 8]
                        });

                        var marker = L.marker([taluka.lat, taluka.lng], {icon: icon}).addTo(map);

//                marker.bindTooltip(`<span class="taluka-label">${taluka.name}</span>`, {
//                    permanent: true,
//                    direction: 'top'
//                }).openTooltip();

                        marker.bindTooltip(`<span class="taluka-label" onclick="window.location.href='${taluka.link}'">${taluka.name}</span>`, {
                            permanent: true,
                            direction: 'top'
                        });


                        marker.on('click', function () {
                            window.location.href = taluka.link;
                        });
                    });
                </script>

            </body>
        </html>


        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Adimjuth Family Dashboard</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
<!--                                <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
                                <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">-->
                <style>
                    body {
                        background-color: #f0f4f8;
                    }
                    .card {
                        border-left: 5px solid #4e73df;
                        border-radius: 1rem;
                        margin-bottom: 20px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                    }
                    .badge-yes {
                        background-color: #28a745;
                    }
                    .badge-no {
                        background-color: #dc3545;
                    }
                    .section-title {
                        font-size: 1.1rem;
                        color: #4e73df;
                        margin-top: 10px;
                    }
                </style>
            </head>
            <body>
                <div class="container py-4">
                    <h2 class="text-center mb-4">📊 PVTG Family Dashboard</h2>
                    <div class="row" id="dashboard"></div>
                </div>

                <script>
                    const families = [
                        {
                            head_name: "કોટવાળીયા દલસિંગભાઇ છનાભાઇ",
                            total_members: 4,
                            male_members: 2,
                            female_members: 1,
                            children: 1,
                            house_kachcha: "0",
                            house_pakka: "1",
                            water_source: "નદી",
                            electricity_available: "1",
                            toilet: "1",
                            has_aadhaar_card: "1",
                            aadhaar_no: "696538132022",
                            has_pmjay_card: "1",
                            has_ujjwala_yojana: "0",
                            has_pm_kisan_yojana: "1"
                        },
                        {
                            head_name: "કોટવાળીયા મનીષાબેન અરવિંદભાઇ",
                            total_members: 1,
                            male_members: 0,
                            female_members: 1,
                            children: 0,
                            house_kachcha: "0",
                            house_pakka: "1",
                            water_source: "નદી",
                            electricity_available: "1",
                            toilet: "0",
                            has_aadhaar_card: "1",
                            aadhaar_no: "767569749726",
                            has_pmjay_card: "0",
                            has_ujjwala_yojana: "0",
                            has_pm_kisan_yojana: "0"
                        }
                    ];

                    function renderDashboard(data) {
                        const container = document.getElementById('dashboard');
                        data.forEach(family => {
                            const card = document.createElement('div');
                            card.className = 'col-md-6 col-lg-4';
                            card.innerHTML = `
                        <div class="card p-3">
                          <h5 class="card-title"><i class="bi bi-person-circle text-primary"></i> ${family.head_name}</h5>
                          <p><strong>👨‍👩‍👧‍👦 Members:</strong> ${family.total_members} (👨 ${family.male_members}, 👩 ${family.female_members}, 👶 ${family.children})</p>
                          <p><strong>🏠 House Type:</strong> ${family.house_pakka === "1" ? "Pakka" : ""} ${family.house_kachcha === "1" ? "/ Kachcha" : ""}</p>
                          <p><strong>🚰 Water:</strong> ${family.water_source}</p>
                          <p><strong>⚡ Electricity:</strong> <span class="badge ${family.electricity_available === "1" ? "badge-yes" : "badge-no"}">${family.electricity_available === "1" ? "Available" : "No"}</span></p>
                          <p><strong>🚽 Toilet:</strong> <span class="badge ${family.toilet === "1" ? "badge-yes" : "badge-no"}">${family.toilet === "1" ? "Yes" : "No"}</span></p>
                          <hr/>
                          <p><strong>📄 Aadhaar:</strong> ${family.has_aadhaar_card === "1" ? `✅ ${family.aadhaar_no}` : "❌ Not Available"}</p>
                          <p><strong>🏥 PMJAY:</strong> <span class="badge ${family.has_pmjay_card === "1" ? "badge-yes" : "badge-no"}">${family.has_pmjay_card === "1" ? "Yes" : "No"}</span></p>
                          <p><strong>🛢️ Ujjwala:</strong> <span class="badge ${family.has_ujjwala_yojana === "1" ? "badge-yes" : "badge-no"}">${family.has_ujjwala_yojana === "1" ? "Yes" : "No"}</span></p>
                          <p><strong>🌾 PM-Kisan:</strong> <span class="badge ${family.has_pm_kisan_yojana === "1" ? "badge-yes" : "badge-no"}">${family.has_pm_kisan_yojana === "1" ? "Yes" : "No"}</span></p>
                        </div>
                      `;
                            container.appendChild(card);
                        });
                    }

                    renderDashboard(families);
                </script>
            </body>
        </html>


        {% include './admin_footer.html' %}