<?php echo $this->extend('/template'); ?>
<?php echo $this->section('content') ?>
<head>
    <title>DASHBOARD PEDA MATENG</title>
</head>

<script src="assets/admin/plugins/RGraph/libraries/RGraph.common.core.js"></script>
<script src="assets/admin/plugins/RGraph/libraries/RGraph.segmented.js"></script>

<div class="container">

    <h1><div class='glyphicon glyphicon-th-large'></div>&nbsp;&nbsp;<b>DASHBOARD PEDA MATENG</b>
        </h1></div>
    <br/>
    <div class="row">
        <div class="col-md-4 col-xl-3">
            <div class="card bg-c-blue order-card">
                <div class="card-block">
                <span class="fa fa-car fa-4x"></span>
                <div style="margin-top:3px;"></div>
                <h2>Jumlah Armada
                <span class="f-right"><b><?php echo $totalarmada; ?></b></h2></span>
                <h4>Armada Bus
                <span class="f-right"><b><?php echo $bus; ?></b></h4></span>
                <h4>Kereta
                <span class="f-right"><b><?php echo $kereta; ?></b></h4></span>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
        <div class="card bg-c-green order-card">
                <div class="card-block">
                <span class="fa fa-users fa-4x"></span>
                <div style="margin-top:10px;"></div>
                <h2>Total Calon Pemudik
                <span class="f-right"><b><?php echo $wtotal; ?></b></h2></span>
                <h4>Daftar
                <span class="f-right"><b><?php echo $wdaftar; ?></b></h4></span>
                <h4>Terverifikasi
                <span class="f-right"><b><?php echo $wverif; ?></b></h4></span>
                </div>
            </div>
        </div>
        

        <div class="col-md-4 col-xl-3">
        <div class="card bg-c-yellow order-card">
                <div class="card-block">
                <span class="fa fa-search fa-4x"></span>
                <div style="margin-top:5px;"></div>
                <h2>Peminat Arus Balik
                <span class="f-right"><b><?php echo $balik; ?></b></h2></span>
                </div>
            </div>
        </div>
        <!--
        <div class="card bg-c-pink order-card">
        -->

	</div>

    <div class="row">
        <div class="col-md-4 col-xl-3">
        <div class="card bg-c-pink order-card">
                <div class="card-block">
                <span class="fa fa-user-plus fa-4x"></span>
                <div style="margin-top:5px;"></div>
                <h2>Kuota Total
                <span class="f-right"><b><?php echo calckuota()[0]; ?></b></h2></span>
                <h2>Sisa Kuota
<!--
                <span class="f-right"><b><?php echo $kuota-$wtotal; ?></b></h2></span>
--> 
                <span class="f-right"><b><?php echo calckuota()[1] ?></b></h2></span>

            </div>
            </div>
        </div>
        
        <div class="col-md-4 col-xl-3">
        <div class="card order-card" style="background-color:#BF9F62">
                <div class="card-block">
                <span class="fa fa-users fa-4x"></span>
                <div style="margin-top:60px;"></div>

                </div>
            </div>
        </div>
        

        <div class="col-md-4 col-xl-3">
        <div class="card order-card"  style="background-color:#DA251C">
                <div class="card-block">
                <span class="fa fa-print fa-4x"></span>
                <div style="margin-top:60px;"></div>
                <h2>
                <span class="f-right"><b><?php ''; ?></b></h2></span>
                </div>
            </div>
        </div>
        <!--
        <div class="card bg-c-pink order-card">
        -->

	</div>

    <div class="row">
    <div class="col-sm-3">
        <canvas id="cvs1X" width="350" height="350">
        [No canvas support]
        </canvas>
<!--
        <center>PLENO</center>
-->
    </div>
    <div class="col-sm-3">
        <canvas id="cvs2X" width="350" height="350">
        [No canvas support]
        </canvas>
        <!--
        <center>PENILAI 2</center>
-->
    </div>
        <div class="col-sm-3">
        <canvas id="cvs3X" width="350" height="350">
        [No canvas support]
        </canvas>
        <!--
        <center>PENILAI 1</center>
-->
    </div>
    <div class="col-sm-3">
        <canvas id="cvs4X" width="350" height="350">
        [No canvas support]
        </canvas>
        <!--
        <center>PEMERIKSAAN</center>
        -->
    </div>

    </div>



</div>
<script>
    segmented = new RGraph.Segmented({
        id: 'cvs1',
        max: 100,
        value: 30,
        options: {
            labelsCenterUnitsPost: '%',
            labelsCenterColor: '#aaa',
            backgroundColor: '#fff'

        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 200,height: 200,options:{width: 35,labelsCenterSize: 30},parentCss:{'float':'right', textAlign:'center'}},
//        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 35},parentCss:{'float':'none', textAlign:'center'}}
    ]);



    segmented.canvas.addEventListener('click', function (e)
    {
        var value = segmented.getValue(e);
        
        if (value) {
            segmented.value = value;
            segmented.grow();
        }
    }, false);
</script>
<script>
    segmented = new RGraph.Segmented({
        id: 'cvs2',
        max: 100,
        value: 70,
        options: {
            labelsCenterUnitsPost: '%',
            labelsCenterColor: '#aaa',
            backgroundColor: '#fff'

        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 200,height: 200,options:{width: 35,labelsCenterSize: 30},parentCss:{'float':'right', textAlign:'center'}},
//        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 35},parentCss:{'float':'none', textAlign:'center'}}
    ]);



    segmented.canvas.addEventListener('click', function (e)
    {
        var value = segmented.getValue(e);
        
        if (value) {
            segmented.value = value;
            segmented.grow();
        }
    }, false);
</script>
<script>
    segmented = new RGraph.Segmented({
        id: 'cvs3',
        max: 100,
        value: 70,
        options: {
            labelsCenterUnitsPost: '%',
            labelsCenterColor: '#aaa',
            backgroundColor: '#fff'
        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 200,height: 200,options:{width: 35,labelsCenterSize: 30},parentCss:{'float':'right', textAlign:'center'}},
//        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 35},parentCss:{'float':'none', textAlign:'center'}}
    ]);



    segmented.canvas.addEventListener('click', function (e)
    {
        var value = segmented.getValue(e);
        
        if (value) {
            segmented.value = value;
            segmented.grow();
        }
    }, false);
</script>

<script>
    segmented = new RGraph.Segmented({
        id: 'cvs4',
        max: 100,
        value: 70,
        options: {
            labelsCenterUnitsPost: '%',
            labelsCenterColor: '#aaa',
            backgroundColor: '#fff'
        }
    }).roundRobin({frames: 60}).responsive([
        {maxWidth: null,width: 200,height: 200,options:{width: 35,labelsCenterSize: 30},parentCss:{'float':'right', textAlign:'center'}},
//        {maxWidth: 700,width: 250,height: 250,options:{width: 40,labelsCenterSize: 35},parentCss:{'float':'none', textAlign:'center'}}
    ]);



    segmented.canvas.addEventListener('click', function (e)
    {
        var value = segmented.getValue(e);
        
        if (value) {
            segmented.value = value;
            segmented.grow();
        }
    }, false);
</script>

<style>  

.order-card {
    color: #fff;
}

.bg-c-blue {
    background: linear-gradient(45deg,#4099ff,#73b4ff);
}

.bg-c-green {
    background: linear-gradient(45deg,#2ed8b6,#59e0c5);
}

.bg-c-yellow {
    background: linear-gradient(45deg,#FFB64D,#ffcb80);
}

.bg-c-pink {
    background: linear-gradient(45deg,#FF5370,#ff869a);
}


.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.card .card-block {
    padding: 25px;
    height:200px;
}

.order-card i {
    font-size: 26px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}
</style>
<?php echo $this->endSection() ?>
