@extends('indexlayout')

@section('title', 'kolaborator')
@push('style')
@endpush
@section('content')
    <div class="row">
        <main id="js-page-content" role="main" class="page-content">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Pendukung</a></li>
                <li class="breadcrumb-item active">Kolaborator</li>
                {{-- <li class="breadcrumb-item active">UPSBA</li>
                <li class="breadcrumb-item active">Alat Berat</li> --}}
                <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
            </ol>

            <div class="row">
                <div class="col-lg-4">
                    <div id="panel-6" class="panel">
                        <div class="panel-hdr">
                            <h2>
                                Statistik Kolaborator
                            </h2>
                        </div>
                        <div class="panel-container show" style="padding: 80px">
                            <div id="chartkolaborator">
                            </div>
                        </div>
                    </div>
                </div>


                <div id="panel-6" class="panel col-lg-8">
                    <div class="panel-hdr">
                        <h2>Lokasi Bantuan</h2>
                    </div>
                    <div class="panel-container show">

                        <div class="panel-content">
                            <div class="card-deck" style="text-align: center;">
                                <div class="card col-xl-6">
                                    <div class=""></div>
                                    <div class="card-body">
                                        <h5 class="card-title"><i class="fas fa-users"
                                                style="font-size: 4rem; color:rgb(67, 152, 250)"></i></h5>
                                        <h1 style="font-size: 2rem; color:black">63</h1>
                                        <strong style="font-size: 1rem; color:black">Total Mitra</strong>
                                    </div>
                                </div>
                                <div class="card col-xl-6">
                                    <div class=""></div>
                                    <div class="card-body">
                                        <h5 class="card-title"><i class="fas fa-hand-holding-heart"
                                                style="font-size: 4rem; color:rgb(255, 208, 0)"></i></h5>
                                        <h1 style="font-size: 2rem; color:black">63</h1>
                                        <strong style="font-size: 1rem; color:black">Total Mitra</strong>
                                    </div>
                                </div>
                            </div>
                            <div class="row" style="text-align: center; padding:50px 0 0">
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <i class="fal fa-home" style="font-size: 4rem; text-align:center; color:blueviolet">
                                            <h1 style="font-size: 2rem; color:black">88</h1>
                                            <h1 style="font-size: 1rem; color:black">BPSRW</h1>
                                        </i>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <i class="fas fa-recycle"
                                        style="font-size: 4rem; text-align:center; color:rgb(11, 214, 11)">
                                        <h1 style="font-size: 2rem; color:black">80</h1>
                                        <h1 style="font-size: 1rem; color:black">Bank Sampah</h1>
                                    </i>
                                </div>
                                <div class="col-lg-3">
                                    <i class="fal fa-user"
                                        style="font-size: 4rem; text-align:center; color:rgb(226, 43, 83)">
                                        <h1 style="font-size: 2rem; color:black">30</h1>
                                        <h1 style="font-size: 1rem; color:black">Sekolah</h1>
                                    </i>
                                </div>
                                <div class="col-lg-3">
                                    <i class="fal fa-user" style="font-size: 4rem; text-align:center; color:green">
                                        <h1 style="font-size: 2rem; color:black">9</h1>
                                        <h1 style="font-size: 1rem; color:black">RPTRA</h1>
                                    </i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </main>

    @endsection

    @push('script')
        <!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
        <script src="{{ asset('layout/dist/js/statistics/peity/peity.bundle.js') }}"></script>
        <script src="{{ asset('layout/dist/js/statistics/flot/flot.bundle.js') }}"></script>
        <script src="{{ asset('layout/dist/js/statistics/easypiechart/easypiechart.bundle.js') }}"></script>
        <script src="{{ asset('layout/dist/js/datagrid/datatables/datatables.bundle.js') }}"></script>
        {{-- <script src="{{  asset('layout/dist/js/statistics/chartjs/chartjs.bundle.js') }}"></script> --}}
        {{-- <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> --}}
        <script src="{{ asset('layout/dist/js/alatberat.js') }}"></script>
        <script src="{{ asset('layout/dist/js/kolaborator.js') }}"></script>
    @endpush
