@extends('layouts.panel.app', ['title' => 'Dashboard'])

@section('content')

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-statistic-1">
                <div class="row">
                    <div class="col-lg-2 col-sm-2">
                        <div class="card-icon shadow-primary bg-danger">
                            <img src="{{asset('assets-panel/img/icon/ic_pengajuan.png')}}" alt="Gambar" style="width: 40px; height: 40px" />
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-3">
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4>Total Pengajuan</h4>
                            </div>
                            <div class="card-body">
                                {{ $application->count() }}
                                <br>
                                <a href="{{ route('admin.recommendation') }}" class="text-info" style="font-size: small;">Lihat Detail</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-sm-7">
                        <div class="card-stats">
                            <div class="card-stats-title">
                                @php
                                $new = 0;
                                $reject = 0;
                                $verified = 0;
                                @endphp

                                @foreach($application as $value)
                                @if($value->application_status == 'N' || $value->application_status == 'W' || $value->application_status == 'E')
                                @php
                                $new++;
                                @endphp
                                @elseif($value->application_status == 'R' || $value->application_status == 'X' || $value->application_status == 'F' || $value->application_status == 'D' || $value->application_status == 'G')
                                @php
                                $reject++;
                                @endphp
                                @elseif($value->application_status == 'V' || $value->application_status == 'L' || $value->application_status == 'C')
                                @php
                                $verified++;
                                @endphp
                                @endif
                                @endforeach
                            </div>
                            <div class="card-stats-items">
                                <div class="card-stats-item">
                                    <div class="card-stats-item-count">{{ $new }}</div>
                                    <div class="card-stats-item-label">
                                        <img src="{{asset('assets-panel/img/icon/ic_status_proses.png')}}" alt="Gambar" class="rounded-circle mr-1" style="width: 10px; height: 10px" />
                                        Proses
                                    </div>
                                </div>
                                <div class="card-stats-item">
                                    <div class="card-stats-item-count">{{ $reject }}</div>
                                    <div class="card-stats-item-label">
                                        <img src="{{asset('assets-panel/img/icon/ic_status_gagal.png')}}" alt="Gambar" class="rounded-circle mr-1" style="width: 10px; height: 10px" />
                                        Gagal
                                    </div>
                                </div>
                                <div class="card-stats-item">
                                    <div class="card-stats-item-count">{{ $verified }}</div>
                                    <div class="card-stats-item-label">
                                        <img src="{{asset('assets-panel/img/icon/ic_status_berhasil.png')}}" alt="Gambar" class="rounded-circle mr-1" style="width: 10px; height: 10px" />
                                        Berhasil
                                    </div>
                                </div>
                            </div>
                            <div class="card-wrap">
                                <div class="card-header">

                                </div>
                                <div class="card-body">

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

        <div class="col-lg-12">
            <div class="card card-statistic-1">
                <div class="row mt-4">
                    <div class="col-lg-6 col-sm-6">
                        <div class="card-stats text-center">
                            <canvas style="position:relative; margin: auto;" id="chartAnggota"></canvas>
                            <div class="card-stats-title">
                                <h5>Total Anggota</h5>
                                <p id="totAnggota"></p>
                            </div>
                            <div class="card-stats-items justify-content-center align-items-center">
                                <div class="card-stats-item">
                                    <div id="countL" class="card-stats-item-count"></div>
                                    <div class="card-stats-item-label">
                                        <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #4287FF; border-radius: 4px;"></div>
                                        <span>Laki-laki</span>
                                    </div>
                                </div>
                                <div class="card-stats-item">
                                    <div id="countP" class="card-stats-item-count"></div>
                                    <div class="card-stats-item-label">
                                        <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #B668DC; border-radius: 4px;"></div>
                                        <span>Perempuan</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6">
                        <div class="card-stats text-center">
                            <canvas style="position:relative; margin: auto;" id="chartNonAnggota"></canvas>
                            <div class="card-stats-title">
                                <h5>Total Non Anggota</h5>
                                <p id="totNonAnggota"></p>
                            </div>
                            <div class="card-stats-items justify-content-center align-items-center">
                                <div class="card-stats-item">
                                    <div id="countNonL" class="card-stats-item-count"></div>
                                    <div class="card-stats-item-label">
                                        <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #4287FF; border-radius: 4px;"></div>
                                        <span>Laki-laki</span>
                                    </div>
                                </div>
                                <div class="card-stats-item">
                                    <div id="countNonP" class="card-stats-item-count"></div>
                                    <div class="card-stats-item-label">
                                        <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #B668DC; border-radius: 4px;"></div>
                                        <span>Perempuan</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="card-wrap">
                    <div class="card-header">

                    </div>
                    <div class="card-body">

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

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h4>Income</h4>
                        <a href="{{ route('admin.confirm') }}" class="text-info" style="font-size: small;">
                            <i class="fas fa-light fa-eye"></i> Lihat Detail
                        </a>
                    </div>
                    <div class="row">
                        <div class="col">
                            <!-- <input type="date" class="form-control" id="yearsPicker" max="2026-11-12" placeholder="Pilih Tahun" style="width: 200px; height: 35px; border-radius: 8px; border: 1px solid #E4E4E4; padding-left: 15px; padding-right: 15px;"> -->
                            <select class="form-control" id="yearsPicker" style="width: 200px; height: 40px; border-radius: 8px; border: 1px solid #E4E4E4; padding-left: 15px; padding-right: 15px;">
                                <script>
                                    var currentYear = new Date().getFullYear();
                                    for (var year = currentYear; year >= 2021; year--) {
                                        document.write("<option value='" + year + "'>" + year + "</option>");
                                    }
                                </script>
                            </select>
                        </div>
                        <div class="col">
                            <button type="submit" style="width: 100px" class="btn btn-info btn-action" data-toggle="tooltip" title="Tekan Enter" onclick="loadDataGraphIncome(false)">Filter</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="text-center" style="background-color: #F4ECFF; border-radius: 8px;">
                                <h5 id="incomeAnggota" style="text-align: center; padding-top: 15px;"></h5>
                                <div style="display: flex; justify-content: center; padding-bottom: 15px;">
                                    <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #9752FB; border-radius: 4px;"></div>
                                    <span>Income Anggota</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="text-center" style="background-color: #E4F8F1; border-radius: 8px;">
                                <h5 id="incomeRecomendation" style="text-align: center; padding-top: 15px;"></h5>
                                <div style="display: flex; justify-content: center; padding-bottom: 15px;">
                                    <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #3BAB8A; border-radius: 4px;"></div>
                                    <span>Income Rekomendasi</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="text-center" style="background-color: #FDF6EB; border-radius: 8px;">
                                <h5 id="incomePosibilities" style="text-align: center; padding-top: 15px;"></h5>
                                <div style="display: flex; justify-content: center; padding-bottom: 15px;">
                                    <div class="rounded mr-1" style="width: 10px; height: 10px; background-color: #EDD18D; border-radius: 4px;"></div>
                                    <span>Posibilities Income</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <canvas id="detailIncome">
                    </canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>Monitoring Surat</h4>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <form id="fm-filter" action="{{ route('admin.monitoring') }}" method="GET" class="needs-validation" onkeypress="return event.keyCode != 13;">
                            @csrf
                            @method('GET')
                            <div class="d-flex mb-3">
                                <input type="text" name="search" id="search" class="form-control me-2" placeholder="Masukan Pencarian..." value="{{ request()->query('search')  }}">
                                <button id="filterButton" class="btn btn-info" onclick="event.preventDefault(); document.getElementById('fm-filter').submit();">Cari</button>
                            </div>
                        </form>
                        <table class="table table-striped mb-0">
                            <thead>
                                <tr>
                                    <th>Nama</th>
                                    <th>Status</th>
                                    <th>NPAC / NPA IDI</th>
                                    <th>Jumlah Surat dimiliki</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $item)
                                <tr>
                                    <td>
                                        {{ $item->front_degree ?? '' }} {{ $item->name ?? '??' }} {{ $item->back_degree ?? '' }}
                                    </td>
                                    <td>
                                        @php
                                        $access = \App\Models\Role::where('id', $item->role)->first();
                                        @endphp
                                        <span class="badge badge-{{ $access->code == 'A' ? 'success' : ($access->code == 'N.A' ? 'warning' : 'danger') }}">{{ $access->name }}</span>
                                    </td>
                                    <td>
                                        {{ $item->npac_npa ?? '??' }} / {{ $item->central_idi_npa ?? '??' }}
                                    </td>
                                    <td>
                                        {{ $item->total_count }}
                                    </td>
                                    <td>
                                        @if($item->id)
                                        <a href="{{ route('admin.monitoring.letter', $item->id) }}" class="btn btn-success btn-action print-letter mt-1" data-id="{{ $item->id }}" data-toggle="tooltip" title="Lihat"><i class="fas fa-eye"></i></a>
                                        @else
                                        <a href="#" class="btn btn-light btn-action print-letter mt-1" data-id="0" data-toggle="tooltip" title="Lihat"><i class="fas fa-question"></i></a>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <div class="alert alert-danger">
                                    Data surat belum tersedia.
                                </div>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="d-felx justify-content-center">
                    <div class="card-footer text-right">
                        {{ $data->links('vendor.pagination.bootstrap-5') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function() {
        loadDataChartAnggota(onReload = true);
        loadDataChartNonAnggota(onReload = true);
        loadDataGraphIncome(onReload = true);
    });

    function loadDataChartAnggota(onReload) {
        $.ajax({
            url: '/admin/monitoring/data-chart-anggota',
            type: "GET",
            dataType: "json",
            success: function(data) {
                loadChartAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });

    }

    function loadChartAnggota(dataAnggota) {
        const _chartAnggota = document.getElementById('chartAnggota');

        const _totAnggota = document.getElementById('totAnggota');
        const _countL = document.getElementById('countL');
        const _countP = document.getElementById('countP');

        const totAnggota = dataAnggota['totAnggota'];

        const countL = dataAnggota['countL'];
        const countP = dataAnggota['countP'];

        const txtL = "Laki-laki ( " + countL + " )";
        const txtP = "Perempuan ( " + countP + " )";

        $(_totAnggota).text(totAnggota)
        $(_countL).text(countL)
        $(_countP).text(countP)


        let chartStatus = Chart.getChart("chartAnggota");
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        new Chart(_chartAnggota, {
            type: 'doughnut',
            data: {
                labels: [txtL, txtP],
                datasets: [{
                    data: [countL, countP],
                    backgroundColor: [
                        '#4287FF',
                        '#B668DC'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 25,
                    }
                },
                cutout: 85,
                legend: {
                    display: false,
                },
                title: {
                    display: false,
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            },
            plugins: [{
                id: 'text',
                beforeDraw: function(chart, a, b) {
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = totAnggota,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }]
        });

    }


    function loadDataChartNonAnggota(onReload) {
        $.ajax({
            url: '/admin/monitoring/data-chart-non-anggota',
            type: "GET",
            dataType: "json",
            success: function(data) {
                loadChartNonAnggota(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });

    }

    function loadChartNonAnggota(dataAnggota) {
        const _chartAnggota = document.getElementById('chartNonAnggota');

        const _totAnggota = document.getElementById('totNonAnggota');
        const _countL = document.getElementById('countNonL');
        const _countP = document.getElementById('countNonP');

        const totAnggota = dataAnggota['totNonAnggota'];

        const countL = dataAnggota['countNonL'];
        const countP = dataAnggota['countNonP'];

        const txtL = "Laki-laki ( " + countL + " )";
        const txtP = "Perempuan ( " + countP + " )";

        $(_totAnggota).text(totAnggota)
        $(_countL).text(countL)
        $(_countP).text(countP)


        let chartStatus = Chart.getChart("chartNonAnggota");
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        new Chart(_chartAnggota, {
            type: 'doughnut',
            data: {
                labels: [txtL, txtP],
                datasets: [{
                    data: [countL, countP],
                    backgroundColor: [
                        '#4287FF',
                        '#B668DC'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                aspectRatio: 1,
                responsive: true,
                maintainAspectRatio: true,
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 10,
                        bottom: 25,
                    }
                },
                cutout: 85,
                legend: {
                    display: false,
                },
                title: {
                    display: false,
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            },
            plugins: [{
                id: 'text',
                beforeDraw: function(chart, a, b) {
                    var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;

                    ctx.restore();
                    var fontSize = (height / 114).toFixed(2);
                    ctx.font = fontSize + "em sans-serif";
                    ctx.textBaseline = "middle";

                    var text = totAnggota,
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;

                    ctx.fillText(text, textX, textY);
                    ctx.save();
                }
            }]
        });

    }

    function loadDataGraphIncome(onReload) {
        var year = $("#yearsPicker").val();

        if (onReload === true || year === undefined || year === null || year === "") {
            year = new Date().getFullYear();
        } else {
            year = new Date(year).getFullYear();
        }


        $.ajax({
            url: '/admin/monitoring/data-chart-income/' + year,
            type: "GET",
            dataType: "json",
            success: function(data) {
                loadDetailIncome(data);
            },
            error: function(xhr, status, error) {
                console.log(xhr.responseText);
            }
        });
    }

    function loadDetailIncome(dataIncome) {

        const _income = document.getElementById('detailIncome');

        const _incomeAnggota = document.getElementById('incomeAnggota');
        const _incomeRecomendation = document.getElementById('incomeRecomendation');
        const _incomePosibilities = document.getElementById('incomePosibilities');

        const totIncomeAnggota = dataIncome['totIncomeAnggota'];
        const totIncomeRecomendation = dataIncome['totIncomeRecomendation'];
        const totIncomePosibilities = dataIncome['totIncomePosibilities'];

        const labelIncomeAnggota = dataIncome['labelIncomeAnggota'];
        const labelIncomeRecomendation = dataIncome['labelIncomeRecomendation'];
        const labelIncomePosibilities = dataIncome['labelIncomePosibilities'];

        const labelIncomeAnggotaFormatted = labelIncomeAnggota.toLocaleString('en-US');
        const labelIncomeRecomendationFormatted = labelIncomeRecomendation.toLocaleString('en-US');
        const labelIncomePosibilitiesFormatted = labelIncomePosibilities.toLocaleString('en-US');

        $(_incomeAnggota).text("Rp " + labelIncomeAnggotaFormatted);
        $(_incomeRecomendation).text("Rp " + labelIncomeRecomendationFormatted);
        $(_incomePosibilities).text("Rp " + labelIncomePosibilitiesFormatted);


        let chartStatus = Chart.getChart("detailIncome");
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        const data = {
            labels: dataIncome['months'],
            datasets: [{
                    label: 'Income Anggota',
                    data: dataIncome['totIncomeAnggota'],
                    backgroundColor: '#9752FB'
                },
                {
                    label: 'Income Rekomendasi',
                    data: dataIncome['totIncomeRecomendation'],
                    backgroundColor: '#4ED1AB'
                },
                {
                    label: 'Posibilities Income',
                    data: dataIncome['totIncomePosibilities'],
                    backgroundColor: '#F6D279'
                },
            ]
        }

        new Chart(_income, {
            type: 'bar',

            data: data,

            options: {
                responsive: true,
                layout: {
                    padding: 30
                },
                categoryPercentage: 1.0,
                barPercentage: 1.0,
                barThickness: 15,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        }
                    },
                }
            },
        });
    }
</script>

@endsection