@extends('layouts.master')
@section('content')
    <div class="row">
        <div class="card">
            <div class="card-body">

                <h2>{{ $title }}</h2>

            </div>
        </div>
    </div>
    <div class="row">
        @can('jumlah permintaan')
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex text-muted">
                            <div class="flex-shrink-0  me-3 align-self-center">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                        <i class="mdi mdi-email-newsletter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="mb-1">Jumlah Permintaan</p>
                                <h5 class="mb-3">{{ $jumlahPermintaan }}</h5>

                            </div>
                        </div>
                    </div>
                    <!-- end card-body -->
                </div>
            </div>
        @endcan

        @can('jumlah permintaan pending')
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex text-muted">
                            <div class="flex-shrink-0  me-3 align-self-center">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                        <i class="mdi mdi-email-newsletter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="mb-1">Jumlah Permintaan Pending</p>
                                <h5 class="mb-3">{{ $jumlahPending }}</h5>

                            </div>
                        </div>
                    </div>
                    <!-- end card-body -->
                </div>
            </div>
        @endcan

        @can('jumlah permintaan selesai')
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex text-muted">
                            <div class="flex-shrink-0  me-3 align-self-center">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                        <i class="mdi mdi-email-newsletter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="mb-1">Jumlah Permintaan Proses</p>
                                <h5 class="mb-3">{{ $jumlahProses }}</h5>

                            </div>
                        </div>
                    </div>
                    <!-- end card-body -->
                </div>
            </div>
        @endcan

        @can('jumlah permintaan selesai')
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex text-muted">
                            <div class="flex-shrink-0  me-3 align-self-center">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                        <i class="mdi mdi-email-newsletter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="mb-1">Jumlah Permintaan Selesai</p>
                                <h5 class="mb-3">{{ $jumlahSelesai }}</h5>

                            </div>
                        </div>
                    </div>
                    <!-- end card-body -->
                </div>
            </div>
        @endcan

        @can('jumlah permintaan ditolak')
            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex text-muted">
                            <div class="flex-shrink-0  me-3 align-self-center">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                        <i class="mdi mdi-email-newsletter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="mb-1">Jumlah Permintaan Ditolak</p>
                                <h5 class="mb-3">{{ $jumlahTolak }}</h5>

                            </div>
                        </div>
                    </div>
                    <!-- end card-body -->
                </div>
            </div>
        @endcan

        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex text-muted">
                        <div class="flex-shrink-0  me-3 align-self-center">
                            <div class="avatar-sm">
                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                    <i class="mdi mdi-email-newsletter"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="mb-1">Total Permintaan Disetujui</p>
                            <h5 class="mb-3">{{ number_format($totalSelesai) }}</h5>

                        </div>
                    </div>
                </div>
                <!-- end card-body -->
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex text-muted">
                        <div class="flex-shrink-0  me-3 align-self-center">
                            <div class="avatar-sm">
                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                    <i class="mdi mdi-email-newsletter"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="mb-1">Total Permintaan Tahun Ini</p>
                            <h5 class="mb-3">{{ number_format($totalPermintaanTahun) }}</h5>

                        </div>
                    </div>
                </div>
                <!-- end card-body -->
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex text-muted">
                        <div class="flex-shrink-0  me-3 align-self-center">
                            <div class="avatar-sm">
                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                    <i class="mdi mdi-email-newsletter"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="mb-1">Total Permintaan Bulan Ini</p>
                            <h5 class="mb-3">{{ number_format($totalPermintaanBulan) }}</h5>

                        </div>
                    </div>
                </div>
                <!-- end card-body -->
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex text-muted">
                        <div class="flex-shrink-0  me-3 align-self-center">
                            <div class="avatar-sm">
                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                    <i class="mdi mdi-email-newsletter"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="mb-1">Total Pembayaran Tahun Ini</p>
                            <h5 class="mb-3">{{ number_format($totalPembayaranTahun) }}</h5>

                        </div>
                    </div>
                </div>
                <!-- end card-body -->
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex text-muted">
                        <div class="flex-shrink-0  me-3 align-self-center">
                            <div class="avatar-sm">
                                <div class="avatar-title bg-light rounded-circle text-primary font-size-20">
                                    <i class="mdi mdi-email-newsletter"></i>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="mb-1">Total Pembayaran Bulan Ini</p>
                            <h5 class="mb-3">{{ number_format($totalPembayaranBulan) }}</h5>

                        </div>
                    </div>
                </div>
                <!-- end card-body -->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="permintaan-1-tab" data-bs-toggle="tab"
                                data-bs-target="#permintaan-1" type="button" role="tab"
                                aria-controls="permintaan-1" aria-selected="true">Permintaan Per Departemen</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="permintaan-2-tab" data-bs-toggle="tab"
                                data-bs-target="#permintaan-2" type="button" role="tab"
                                aria-controls="permintaan-2" aria-selected="false">Permintaan Per Perusahaan</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="permintaan-5-tab" data-bs-toggle="tab"
                                data-bs-target="#permintaan-5" type="button" role="tab"
                                aria-controls="permintaan-5" aria-selected="true">Pembayaran Per Departemen</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="permintaan-3-tab" data-bs-toggle="tab"
                                data-bs-target="#permintaan-3" type="button" role="tab"
                                aria-controls="permintaan-3" aria-selected="false">Permintaan Per Tahun</button>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="permintaan-4-tab" data-bs-toggle="tab"
                                data-bs-target="#permintaan-4" type="button" role="tab"
                                aria-controls="permintaan-4" aria-selected="false">Permintaan Per Bulan</button>
                        </li>


                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="permintaan-1" role="tabpanel"
                            aria-labelledby="permintaan-1-tab" style="min-height: 500px;">
                            <div class="row">

                                @foreach ($divisiUser as $item)
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1">
                                                        <h3 class="">{{ $item->name }}</h3>
                                                    </div>

                                                </div>

                                                <div>
                                                    <canvas id="chart-departemen-permintaan-{{ $item->id }}"
                                                        height=220></canvas>
                                                    <div class="spinner-border" role="status"
                                                        id="loading-departemen-permintaan-{{ $item->id }}"
                                                        style="position: absolute;
                                                            margin: auto;
                                                            left: 0;
                                                            right: 0;
                                                            top: 0;
                                                            bottom: 0;">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end card-body -->

                                            <div class="card-body border-top">
                                                <div class="text-muted text-center">

                                                </div>
                                            </div>
                                            <!-- end card-body -->
                                        </div>
                                        <!-- end card -->
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="tab-pane fade" id="permintaan-2" role="tabpanel" aria-labelledby="permintaan-2-tab"
                            style="min-height: 500px;">
                            <div class="row">
                                @foreach ($perusahaanUser as $item)
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1">
                                                        <h3 class="">{{ $item->name }}</h3>
                                                    </div>

                                                </div>

                                                <div>
                                                    <canvas id="chart-perusahaan-permintaan-{{ $item->id }}"
                                                        height=220></canvas>
                                                    <div class="spinner-border" role="status"
                                                        id="loading-perusahaan-permintaan-{{ $item->id }}"
                                                        style="position: absolute;
                                                        margin: auto;
                                                        left: 0;
                                                        right: 0;
                                                        top: 0;
                                                        bottom: 0;">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end card-body -->

                                            <div class="card-body border-top">
                                                <div class="text-muted text-center">

                                                </div>
                                            </div>
                                            <!-- end card-body -->
                                        </div>
                                        <!-- end card -->
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="tab-pane fade" id="permintaan-5" role="tabpanel" aria-labelledby="permintaan-5-tab"
                            style="min-height: 500px;">
                            <div class="row">

                                @foreach ($divisiUser as $item)
                                    <div class="col-md-4">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-grow-1">
                                                        <h3 class="">{{ $item->name }}</h3>
                                                    </div>

                                                </div>

                                                <div>
                                                    <canvas id="chart-departemen-pembayaran-{{ $item->id }}"
                                                        height=220></canvas>
                                                    <div class="spinner-border" role="status"
                                                        id="loading-departemen-pembayaran-{{ $item->id }}"
                                                        style="position: absolute;
                                                            margin: auto;
                                                            left: 0;
                                                            right: 0;
                                                            top: 0;
                                                            bottom: 0;">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end card-body -->

                                            <div class="card-body border-top">
                                                <div class="text-muted text-center">

                                                </div>
                                            </div>
                                            <!-- end card-body -->
                                        </div>
                                        <!-- end card -->
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="tab-pane fade" id="permintaan-3" role="tabpanel" aria-labelledby="permintaan-3-tab"
                            style="min-height: 500px;">
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="">Permintaan Belum Dibayar</h3>
                                                </div>

                                            </div>

                                            <div>
                                                <canvas id="chart-tahun-permintaan-0" height=220></canvas>
                                                <div class="spinner-border" role="status"
                                                    id="loading-tahun-permintaan-0"
                                                    style="position: absolute;
                                                    margin: auto;
                                                    left: 0;
                                                    right: 0;
                                                    top: 0;
                                                    bottom: 0;">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end card-body -->

                                        <div class="card-body border-top">
                                            <div class="text-muted text-center">

                                            </div>
                                        </div>
                                        <!-- end card-body -->
                                    </div>
                                    <!-- end card -->
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="">Permintaan Sudah Dibayar</h3>
                                                </div>

                                            </div>

                                            <div>
                                                <canvas id="chart-tahun-permintaan-1" height=220></canvas>
                                                <div class="spinner-border" role="status"
                                                    id="loading-tahun-permintaan-1"
                                                    style="position: absolute;
                                                    margin: auto;
                                                    left: 0;
                                                    right: 0;
                                                    top: 0;
                                                    bottom: 0;">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end card-body -->

                                        <div class="card-body border-top">
                                            <div class="text-muted text-center">

                                            </div>
                                        </div>
                                        <!-- end card-body -->
                                    </div>
                                    <!-- end card -->
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="permintaan-4" role="tabpanel" aria-labelledby="permintaan-4-tab"
                            style="min-height: 500px;">
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="">Permintaan Belum Dibayar</h3>
                                                </div>

                                            </div>

                                            <div>
                                                <canvas id="chart-bulan-permintaan-0" height=220></canvas>
                                                <div class="spinner-border" role="status"
                                                    id="loading-bulan-permintaan-0"
                                                    style="position: absolute;
                                                    margin: auto;
                                                    left: 0;
                                                    right: 0;
                                                    top: 0;
                                                    bottom: 0;">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end card-body -->

                                        <div class="card-body border-top">
                                            <div class="text-muted text-center">

                                            </div>
                                        </div>
                                        <!-- end card-body -->
                                    </div>
                                    <!-- end card -->
                                </div>

                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <h3 class="">Permintaan Sudah Dibayar</h3>
                                                </div>

                                            </div>

                                            <div>
                                                <canvas id="chart-bulan-permintaan-1" height=220></canvas>
                                                <div class="spinner-border" role="status"
                                                    id="loading-bulan-permintaan-1"
                                                    style="position: absolute;
                                                    margin: auto;
                                                    left: 0;
                                                    right: 0;
                                                    top: 0;
                                                    bottom: 0;">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- end card-body -->

                                        <div class="card-body border-top">
                                            <div class="text-muted text-center">

                                            </div>
                                        </div>
                                        <!-- end card-body -->
                                    </div>
                                    <!-- end card -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(document).ready(function() {



            let departemens = @json($divisiUser);
            let perusahaans = @json($perusahaanUser);
            let permintaanTahunLabels = @json($permintaanTahunLabels);
            let permintaanBulanLabels = @json($permintaanBulanLabels);


            function generateChart(index, name, chartLabel, chartData, id, label = "Total (Rp)") {
                setTimeout(function() {
                    $("#loading-" + name + "-" + id).remove();
                    const lineData = {
                        labels: chartLabel,
                        datasets: [{
                            label: label,
                            backgroundColor: "rgb(255, 99, 132)",
                            borderColor: "rgb(255, 99, 132)",
                            data: chartData
                        }]
                    }
                    const config = {
                        type: "line",
                        data: lineData,
                        options: {
                            responsive: false,
                        }
                    }
                    console.log("chart-" + name + "-" + id);
                    const elm = document.getElementById("chart-" + name + "-" + id);
                    if (elm) {
                        const myChart = new Chart(
                            document.getElementById("chart-" + name + "-" + id),
                            config
                        );
                    }

                }, 500 * (index + 1));

            }

            function loadJsonData(url, name, list, multi = true, label = null) {
                //reequest ajax and create chart
                $.getJSON(url, function(data) {
                    var chartLabels = data.chartLabel;
                    var chartDatas = data.chartData;

                    if (multi) {
                        for (let i = 0; i < list.length; i++) {
                            var id = i;
                            if (typeof list[i] === "object") {
                                id = list[i].id;
                            }
                            generateChart(i, name, chartLabels[i], chartDatas[i], id, label ? label :
                                "Total Permintaan (Rp)");
                        }
                    } else {
                        generateChart(0, name, chartLabels, chartDatas, 0, label ? label :
                            "Total Permintaan (Rp)");
                    }

                }).fail(function() {
                    console.log("error");
                    alert("Gagal memuat data");
                });

            }
            loadJsonData('{{ route('dashboard.chart.permintaan.per-departemen') }}', 'departemen-permintaan',
                departemens);
            loadJsonData('{{ route('dashboard.chart.permintaan.per-perusahaan') }}', 'perusahaan-permintaan',
                perusahaans);
            loadJsonData('{{ route('dashboard.chart.permintaan.per-tahun') }}', 'tahun-permintaan',
                permintaanTahunLabels);
            loadJsonData('{{ route('dashboard.chart.permintaan.per-bulan') }}', 'bulan-permintaan',
                permintaanBulanLabels);

            loadJsonData('{{ route('dashboard.chart.pembayaran.per-departemen') }}', 'departemen-pembayaran',
                departemens, true, "Total Pembayaran (Rp)");
        });
    </script>
@endpush