@section('title', 'Dashboard')
@php
    use Carbon\Carbon;
@endphp
<div>
    {{-- <div class="row g-3">
        <div class="col-12">
            <div class="card">
                <table>
                    <tbody>
                        @foreach ($users as $user)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ Str::title(Str::replace('-', ' ', $user->roles()->first()->name)) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div> --}}
    <div class="row g-3">
        @foreach ($research_categories as $item)
            <div class="col-12 col-lg-4">
                <div class="card h-100" style="background-color: {{ $item->background_color }}">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-9">
                                <h3 class="mb-0 fw-bold text-white">
                                    @if ($item->name != 'Manusia Sebagai Subyek')
                                        Penelitian<br>
                                    @endif
                                    {{ $item->name }}
                                </h3>
                                <div class="mt-3" wire:key="{{ rand() }}">
                                    @if ($auth->hasAnyRole('mahasiswa', 'dosen', 'umum'))
                                        <a class="btn btn-white btn-lg" wire:click="chooseResearchCategory('{{ $item->id }}')">Pilih Ini <i class="fa-solid fa-circle-check fa-fw ms-2"></i></a>
                                    @elseif($auth->hasAnyRole('sekretaris'))
                                        <h1 class="mb-0 fw-bold text-white">{{ $item->research()->whereIn('status', ['awaiting-secretary-verification', 'unreviewed', 'under-review', 'revision', 'done'])->count() }}</h1>
                                    @elseif($auth->hasAnyRole('penelaah'))
                                        <h1 class="mb-0 fw-bold text-white">{{ $item->research()->whereHas('researchReviewers', function ($query) use ($auth) {
                                                $query->where('reviewer_id', $auth->id);
                                            })->whereIn('status', ['awaiting-secretary-verification', 'unreviewed', 'under-review', 'revision', 'done'])->count() }}</h1>
                                    @elseif($auth->hasAnyRole('admin', 'ketua', 'wakil-dekan'))
                                        <h1 class="mb-0 fw-bold text-white">{{ $item->research()->whereIn('status', ['awaiting-admin-verification', 'awaiting-secretary-verification', 'unreviewed', 'under-review', 'revision', 'done'])->count() }}</h1>
                                    @endif
                                </div>
                            </div>
                            <div class="col-3">
                                <img src="{{ asset('storage/' . $item->image) }}" class="w-100" style="height: 130px;" loading="lazy">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        @if ($auth->hasAnyRole('mahasiswa', 'dosen', 'umum', 'admin', 'ketua'))
            <div class="col-12 col-lg-6">
                <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between mb-lg-n4">
                        <div class="card-title mb-0">
                            <h6 class="mb-0 text-black">Pembayaran</h6>
                            <small class="text-muted">Pembayaran Tertinggi</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row d-flex align-items-center">
                            <div class="col-12 col-md-4">
                                <h4 class="mb-2 fw-bold text-primary">@rupiah($revenue_this_year)</h4>
                                <small class="text-muted">Informasi ini menampilkan statistik riwayat pembayaran</small>
                            </div>
                            <div class="col-12 col-md-8">
                                <div id="payment_chart"></div>
                            </div>
                        </div>
                        <div class="border rounded p-3 mt-2">
                            <div class="row g-3">
                                <div class="col-6 col-lg-4">
                                    <div class="d-flex gap-2 mb-2">
                                        <div>
                                            <img src="{{ asset('assets/image/payment-total.png') }}" alt="Payment This Month" style="object-fit: contain;width: 40px;" loading="lazy">
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">Pembayaran<br>Bulan Ini</h6>
                                        </div>
                                    </div>
                                    <h5 class="mb-0 fw-bold" style="color: #5fa776;">@rupiah($revenue_this_month)</h5>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="d-flex gap-2 mb-2">
                                        <div>
                                            <img src="{{ asset('assets/image/payment-thisyear.png') }}" alt="Payment This Week" style="object-fit: contain;width: 40px;" loading="lazy">
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">Pembayaran<br>Minggu Ini</h6>
                                        </div>
                                    </div>
                                    <h5 class="mb-0 fw-bold" style="color: #ef8781;">@rupiah($revenue_this_week)</h5>
                                </div>
                                <div class="col-6 col-lg-4">
                                    <div class="d-flex gap-2 mb-2">
                                        <div>
                                            <img src="{{ asset('assets/image/payment-thismonth.png') }}" alt="Payment This Week" style="object-fit: contain;width: 40px;" loading="lazy">
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">Pembayaran<br>Hari Ini</h6>
                                        </div>
                                    </div>
                                    <h5 class="mb-0 fw-bold" style="color: #fdd100;">@rupiah($revenue_this_day)</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between pb-0">
                        <div class="card-title mb-0">
                            <h5 class="mb-0">Progress Status</h5>
                            <small class="text-muted">Untuk Penelitian Aktif Saat Ini</small>
                        </div>
                    </div>
                    <div class="card-body">
                        @if ($latest_research)
                            <div class="row">
                                <div class="col-12 col-sm-4 col-md-12 col-lg-6">
                                    <div class="mb-lg-4 mb-2">
                                        <h1 class="mb-0 fw-bold text-primary">{{ $latest_research->created_at->diffInDays(Carbon::now()) }}</h1>
                                        <p class="mb-0">Terhitung Sejak Tanggal Submit</p>
                                    </div>
                                    <ul class="p-0 m-0">
                                        <li class="d-flex gap-3 align-items-center mb-lg-3 pt-2 pb-1">
                                            <div class="badge rounded bg-label-primary p-2">
                                                <i class="fa-duotone fa-filters fa-fw fa-3x"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted">Kategori</small>
                                                <h6 class="mb-0 text-nowrap fw-bold">{{ $latest_research->research_type ? Str::title(Str::replace('-', ' ', $latest_research->research_type)) : '-' }}</h6>
                                            </div>
                                        </li>
                                        <li class="d-flex gap-3 align-items-center mb-lg-3 pt-2 pb-1">
                                            <div class="badge rounded bg-label-warning p-2">
                                                <i class="fa-duotone fa-users fa-fw fa-3x"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted">Jumlah Penelaah</small>
                                                <h6 class="mb-0 text-nowrap fw-bold">{{ $latest_research->researchReviewers?->count() ?? '-' }} Orang</h6>
                                            </div>
                                        </li>
                                        <li class="d-flex gap-3 align-items-center pt-2">
                                            <div class="badge rounded bg-label-success p-2">
                                                <i class="fa-duotone fa-calendar-days fa-fw fa-3x"></i>
                                            </div>
                                            <div>
                                                <small class="text-muted">Tanggal Pengajuan</small>
                                                <h6 class="mb-0 text-nowrap fw-bold">{{ $latest_research->created_at?->format('d/m/Y') ?? '-' }}</h6>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-12 col-sm-8 col-md-12 col-lg-6">
                                    <div id="status_chart"></div>
                                </div>
                            </div>
                        @else
                            <div class="d-flex align-items-center justify-content-center h-100">
                                <div class="text-center">
                                    <div class="mb-3 text-center">
                                        <img src="{{ asset('assets/image/no-data.png') }}" style="object-fit: contain;width: 300px;" loading="lazy">
                                    </div>
                                    <small class="fst-italic text-muted">
                                        Belum Ada Penelitian Aktif / Penelitian Anda Sedang Dalam Pengerjaan
                                    </small>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @elseif ($auth->hasAnyRole('sekretaris'))
            <div class="col-12">
                <div class="card h-100">
                    <div class="card-header pb-0 d-flex justify-content-between mb-3">
                        <div class="card-title mb-0">
                            <h5 class="mb-0">Statistik Tipe Telaah Penelitian</h5>
                            <small class="text-muted">Rekapitulasi Tahun Berjalan</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="research_type_chart"></div>
                    </div>
                </div>
            </div>
        @elseif ($auth->hasAnyRole('penelaah'))
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0 d-flex justify-content-between mb-lg-n4">
                        <div class="card-title mb-0">
                            <h5 class="mb-0">Statistik Penelitian</h5>
                            <small class="text-muted">Penelitian Tertinggi</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row d-flex align-items-center">
                            <div class="col-12 col-md-4">
                                <h4 class="mb-0 fw-bold text-primary">{{ $total_research }}</h4>
                                <small class="text-muted">Informasi ini menampilkan statistik penelitian yang Anda telaah.</small>
                            </div>
                            <div class="col-12 col-md-8">
                                <div id="research_chart"></div>
                            </div>
                        </div>
                        {{-- <div class="border rounded p-3 mt-2">
                            <div class="row gap-4 gap-sm-0">
                                <div class="col-12 col-sm-4">
                                    <div class="d-flex gap-2 mb-2">
                                        <div>
                                            <img src="{{ asset('assets/image/payment-total.png') }}" alt="Payment Total" style="object-fit: contain;width: 40px;" loading="lazy">
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">Total Penelitian</h6>
                                        </div>
                                    </div>
                                    <h5 class="mb-0 fw-bold" style="color: #5fa776;">{{ $total_research }}</h5>
                                </div>
                                <div class="col-12 col-sm-4">
                                    <div class="d-flex gap-2 mb-2">
                                        <div>
                                            <img src="{{ asset('assets/image/payment-thisyear.png') }}" alt="Payment This Year" style="object-fit: contain;width: 40px;" loading="lazy">
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">Penelitian Tahun Ini</h6>
                                        </div>
                                    </div>
                                    <h5 class="mb-0 fw-bold" style="color: #ef8781;">{{ $research_thisyear }}</h5>
                                </div>
                                <div class="col-12 col-sm-4">
                                    <div class="d-flex gap-2 mb-2">
                                        <div>
                                            <img src="{{ asset('assets/image/payment-thismonth.png') }}" alt="Payment This Month" style="object-fit: contain;width: 40px;" loading="lazy">
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">Penelitian Bulan Ini</h6>
                                        </div>
                                    </div>
                                    <h5 class="mb-0 fw-bold" style="color: #fdd100;">{{ $research_thisyear }}</h5>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        @elseif($auth->hasAnyRole('wakil-dekan'))
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0 d-flex justify-content-between mb-lg-n4">
                        <div class="card-title mb-0">
                            <h5 class="mb-0">Penelitian</h5>
                            <small class="text-muted">Daftar Penelitian Terbaru</small>
                        </div>
                    </div>
                    <div class="table-responsive scrollbar-x">
                        <table class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center">NO</th>
                                    <th>Peneliti</th>
                                    <th class="text-center">Tgl Pengajuan</th>
                                    <th class="text-center">Kategori</th>
                                    <th class="text-center">Tipe</th>
                                    <th class="text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($research as $result)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td>
                                            <p class="mb-0">{{ $result->researcher?->name ?? '-' }}</p>
                                            <small class="d-block text-secondary">{{ ($result->researcher?->hasRole('dosen') ? 'NIP' : 'NIM') }} : {{ $result->researcher?->master_number ?? '-' }}</small>
                                            <small class="d-block text-secondary">Institusi : {{ $result->researcher?->researcherDetail?->institution_name ?? '-' }}</small>
                                        </td>
                                        <td class="text-center">{{ $result->created_at->format('d/m/Y') }}</td>
                                        <td class="text-center">{{ $result->researchCategory->name }}</td>
                                        <td class="text-center">
                                            <p class="mb-0">{{ $result->research_type ? Str::replace('-', ' ', Str::title($result->research_type)) : '-' }}</p>
                                            @if ($result->fullBoardMeetingSchedule)
                                                <small>Meeting : {{ $result->fullBoardMeetingSchedule->datetime->format('d/m/Y H:i') }}</small>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($result->status == 'awaiting-admin-verification')
                                                <span class="badge rounded-pill bg-warning">Menunggu Verifikasi Admin</span>
                                            @elseif($result->status == 'awaiting-secretary-verification')
                                                <span class="badge rounded-pill bg-warning">Menunggu Verifikasi Sekretaris</span>
                                            @elseif($result->status == 'unreviewed')
                                                <span class="badge rounded-pill bg-secondary">Belum Ditinjau Penelaah</span>
                                            @elseif($result->status == 'under-review')
                                                <span class="badge rounded-pill bg-primary">Sedang Ditinjau Penelaah</span>
                                            @elseif($result->status == 'revision')
                                                <span class="badge rounded-pill bg-danger">Direvisi Penelaah</span>
                                            @elseif($result->status == 'done')
                                                <span class="badge rounded-pill bg-success">Selesai</span>
                                            @elseif($result->status == 'rejected')
                                                <span class="badge rounded-pill bg-danger">Ditolak</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="fw-bold text-center">Belum Ada Data</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    @if ($auth->hasAnyRole('mahasiswa', 'dosen', 'umum', 'admin', 'ketua'))
        <script>
            var options = {
                series: [{
                    name: 'Total',
                    data: JSON.parse('null')
                }],
                chart: {
                    type: 'bar',
                    height: 250,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 6
                    },
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: JSON.parse('null'),
                },
                fill: {
                    opacity: 1,
                    colors: ['#188fd0']
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return "Rp. " + val.toLocaleString('id-ID')
                        }
                    }
                },
            };

            var chart = new ApexCharts(document.querySelector("#payment_chart"), options);
            chart.render();
        </script>
        @if ($latest_research_percentage)
            <script>
                var options = {
                    series: [JSON.parse('')],
                    labels: ["Completed Task"],
                    chart: {
                        height: 360,
                        type: "radialBar"
                    },
                    plotOptions: {
                        radialBar: {
                            offsetY: 10,
                            startAngle: -140,
                            endAngle: 130,
                            hollow: {
                                size: "65%"
                            },
                            track: {
                                background: config.colors.cardColor,
                                strokeWidth: "100%"
                            },
                            dataLabels: {
                                name: {
                                    offsetY: -20,
                                    color: config.colors.textMuted,
                                    fontSize: "13px",
                                    fontWeight: "400",
                                    fontFamily: "Poppins"
                                },
                                value: {
                                    offsetY: 10,
                                    color: config.colors.headingColor,
                                    fontSize: "38px",
                                    fontWeight: "600",
                                    fontFamily: "Poppins"
                                }
                            }
                        }
                    },
                    colors: [config.colors.primary],
                    fill: {
                        type: "gradient",
                        gradient: {
                            shade: "dark",
                            shadeIntensity: .5,
                            gradientToColors: [config.colors.primary],
                            inverseColors: !0,
                            opacityFrom: 1,
                            opacityTo: .6,
                            stops: [30, 70, 100]
                        }
                    },
                    stroke: {
                        dashArray: 10
                    },
                    grid: {
                        padding: {
                            top: -20,
                            bottom: 5
                        }
                    },
                    responsive: [{
                        breakpoint: 1025,
                        options: {
                            chart: {
                                height: 330
                            }
                        }
                    }, {
                        breakpoint: 769,
                        options: {
                            chart: {
                                height: 280
                            }
                        }
                    }]
                };

                var chart = new ApexCharts(document.querySelector("#status_chart"), options);
                chart.render();

                console.log(config.colors.primary);
            </script>
        @endif
    @elseif ($auth->hasAnyRole('sekretaris'))
        <script>
            var options = {
                series: [{
                    data: JSON.parse('null')
                }],
                chart: {
                    height: 400,
                    type: 'bar',
                    toolbar: {
                        show: false
                    }
                },
                colors: ['#efc16c', '#e88248'],
                plotOptions: {
                    bar: {
                        columnWidth: '45%',
                        distributed: true,
                        borderRadius: 6
                    }
                },
                xaxis: {
                    categories: JSON.parse('null'),
                    labels: {
                        offsetY: 17,
                        style: {
                            colors: ['#efc16c', '#e88248'],
                            fontSize: '40px',
                            fontWeight: 'bold',
                            fontFamily: 'Poppins',
                        }
                    },
                },
                tooltip: {
                    enabled: false
                },
                states: {
                    hover: {
                        filter: {
                            type: 'none',
                        }
                    },
                },
                legend: {
                    customLegendItems: ['Expedited', 'Full Board']
                },
                dataLabels: {
                    enabled: false
                }
            };

            var chart = new ApexCharts(document.querySelector("#research_type_chart"), options);
            chart.render();
        </script>
    @elseif ($auth->hasAnyRole('penelaah'))
        <script>
            var options = {
                series: [{
                    name: 'Total',
                    data: JSON.parse('null')
                }],
                chart: {
                    type: 'bar',
                    height: 250,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '55%',
                        borderRadius: 6
                    },
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    categories: JSON.parse('null'),
                },
                fill: {
                    opacity: 1,
                    colors: ['#188fd0']
                },
                tooltip: {
                    y: {
                        formatter: function(val) {
                            return "Rp. " + val.toLocaleString('id-ID')
                        }
                    }
                },
            };

            var chart = new ApexCharts(document.querySelector("#research_chart"), options);
            chart.render();
        </script>
    @endif
@endpush