@extends('Dashboard.layouts.main')

@section('title', 'Dashboard Admin')

@section('css')
<!-- Plugins css -->
<link href="{{ asset('DB/assets/libs/morris-js/morris.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('DB/assets/libs/chartist/chartist.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
<li class="breadcrumb-item active">Dashboard Admin</li>
@endsection

@section('page-title', 'Dashboard Admin')

@section('content')
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="{{ route('services.index') }}" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>

            <h4 class="header-title mt-0 mb-4">Total Layanan</h4>

            <div class="widget-chart-1">
           

                <div class="widget-detail-1 text-right">
                    <h2 class="font-weight-normal pt-2 mb-1"> {{ $totalServices }} </h2>
                    <p class="text-muted mb-1">Total Layanan</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>

            <h4 class="header-title mt-0 mb-4">Total Pelanggan</h4>

            <div class="widget-chart-1">
             

                <div class="widget-detail-1 text-right">
                    <h2 class="font-weight-normal pt-2 mb-1"> {{ $totalCustomers }} </h2>
                    <p class="text-muted mb-1">Pelanggan</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="{{ route('complaints.index') }}" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>

            <h4 class="header-title mt-0 mb-4">Total Keluhan</h4>

            <div class="widget-chart-1">
           

                <div class="widget-detail-1 text-right">
                    <h2 class="font-weight-normal pt-2 mb-1"> {{ $totalComplaints }} </h2>
                    <p class="text-muted mb-1">Keluhan</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="{{ route('satisfactions.index') }}" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>

            <h4 class="header-title mt-0 mb-4">Total Survey Kepuasan</h4>

            <div class="widget-chart-1">
             

                <div class="widget-detail-1 text-right">
                    <h2 class="font-weight-normal pt-2 mb-1"> {{ $totalSatisfactions }} </h2>
                    <p class="text-muted mb-1">Survey</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end row -->

<div class="row">
    <div class="col-xl-6">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="{{ route('services.index') }}" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>
            <h4 class="header-title mb-3">Status Layanan</h4>

            <div class="row text-center">
                <div class="col-md-6 mb-3">
                    <h3 class="font-weight-light">
                        <span data-plugin="counterup">{{ $serviceStats['Menunggu'] }}</span>
                    </h3>
                    <p class="text-muted font-13 mb-0">Menunggu</p>
                </div>
                <div class="col-md-6 mb-3">
                    <h3 class="font-weight-light">
                        <span data-plugin="counterup">{{ $serviceStats['Diterima'] }}</span>
                    </h3>
                    <p class="text-muted font-13 mb-0">Diterima</p>
                </div>
                <div class="col-md-4">
                    <h3 class="font-weight-light">
                        <span data-plugin="counterup">{{ $serviceStats['Diproses'] }}</span>
                    </h3>
                    <p class="text-muted font-13 mb-0">Diproses</p>
                </div>
                <div class="col-md-4">
                    <h3 class="font-weight-light">
                        <span data-plugin="counterup">{{ $serviceStats['Selesai'] }}</span>
                    </h3>
                    <p class="text-muted font-13 mb-0">Selesai</p>
                </div>
                <div class="col-md-4">
                    <h3 class="font-weight-light">
                        <span data-plugin="counterup">{{ $serviceStats['Ditolak'] }}</span>
                    </h3>
                    <p class="text-muted font-13 mb-0">Ditolak</p>
                </div>
            </div>

            <div id="morris-donut-example" style="height: 320px;" class="morris-chart mt-3"></div>
        </div>
    </div><!-- end col -->

    <div class="col-xl-6">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>
            <h4 class="header-title mb-3">Distribusi Pengujian Kualitas Air</h4>

            <div id="morris-bar-example" style="height: 320px;" class="morris-chart"></div>
        </div>
    </div><!-- end col -->
</div>
<!-- end row -->

<div class="row">
    <div class="col-xl-8">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>
            <h4 class="header-title mb-3">Data Layanan Terbaru</h4>

            <div class="table-responsive">
                <table class="table table-hover table-centered m-0">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Pelanggan</th>
                            <th>Jenis Permintaan</th>
                            <th>Pengujian</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($latestServices as $service)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $service->user->name }}</td>
                            <td>{{ $service->jenis_permintaan }}</td>
                            <td>{{ $service->pengujian_kualitas_air }}</td>
                            <td>
                                @if($service->status == 'Menunggu')
                                <span class="badge badge-warning">Menunggu</span>
                                @elseif($service->status == 'Diterima')
                                <span class="badge badge-info">Diterima</span>
                                @elseif($service->status == 'Diproses')
                                <span class="badge badge-primary">Diproses</span>
                                @elseif($service->status == 'Selesai')
                                <span class="badge badge-success">Selesai</span>
                                @elseif($service->status == 'Ditolak')
                                <span class="badge badge-danger">Ditolak</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('services.show', $service->id) }}" class="btn btn-sm btn-info">
                                    <i class="fe-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col-xl-4">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>
            <h4 class="header-title mb-3">Jenis Permintaan</h4>

            <div id="morris-pie-example" style="height: 320px;" class="morris-chart"></div>
        </div>
    </div><!-- end col -->
</div>
<!-- end row -->

{{-- <div class="row">
    <div class="col-xl-12">
        <div class="card-box">
            <div class="dropdown float-right">
                <a href="#" class="dropdown-toggle arrow-none card-drop">
                    <i class="fe-more-vertical"></i>
                </a>
            </div>
            <h4 class="header-title mb-3">Layanan Per Bulan ({{ date('Y') }})</h4>

            <div id="morris-line-example" style="height: 280px;" class="morris-chart"></div>
        </div>
    </div><!-- end col -->
</div>
<!-- end row --> --}}
@endsection

@section('scripts')
<!-- Plugins js-->
<script src="{{ asset('DB/assets/libs/morris-js/morris.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/raphael/raphael.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/chart-js/Chart.bundle.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/chartist/chartist.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/chartist-plugin-tooltips/chartist-plugin-tooltip.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/jquery-knob/jquery.knob.min.js') }}"></script>
<script src="{{ asset('DB/assets/libs/peity/jquery.peity.min.js') }}"></script>

<script>
    $(document).ready(function() {
        // Morris Donut Chart - Status Layanan
        Morris.Donut({
            element: 'morris-donut-example',
            data: [
                {label: "Menunggu", value: {{ $serviceStats['Menunggu'] }}},
                {label: "Diterima", value: {{ $serviceStats['Diterima'] }}},
                {label: "Diproses", value: {{ $serviceStats['Diproses'] }}},
                {label: "Selesai", value: {{ $serviceStats['Selesai'] }}},
                {label: "Ditolak", value: {{ $serviceStats['Ditolak'] }}}
            ],
            colors: ['#ffbd4a', '#4fc6e1', '#6658dd', '#1abc9c', '#d9534f'],
            resize: true
        });

        // Menentukan nilai maksimum untuk grafik bar
        var maxValue = Math.max(
            @foreach($waterTestTypes as $type => $count)
            {{ $count }},
            @endforeach
            0
        );
        
        // Menentukan jumlah garis untuk grafik berdasarkan nilai maksimum
        var numLines = maxValue <= 1 ? 2 : Math.ceil(maxValue) + 1;
        
        // Morris Bar Chart - Distribusi Pengujian Kualitas Air
        Morris.Bar({
            element: 'morris-bar-example',
            data: [
                @foreach($waterTestTypes as $type => $count)
                {y: '{{ $type }}', a: {{ $count }}},
                @endforeach
            ],
            xkey: 'y',
            ykeys: ['a'],
            labels: ['Jumlah'],
            barSizeRatio: 0.4,
            hideHover: 'auto',
            resize: true,
            gridLineColor: '#eef0f2',
            barColors: ['#4a81d4'],
            ymax: maxValue <= 1 ? 1 : Math.ceil(maxValue),
            ymin: 0,
            numLines: numLines,
            yLabelFormat: function(y) {
                return Math.round(y); // Hanya menampilkan angka bulat
            }
        });

        // Morris Pie Chart - Jenis Permintaan
        Morris.Donut({
            element: 'morris-pie-example',
            data: [
                @foreach($serviceTypes as $type => $count)
                {label: "{{ $type }}", value: {{ $count }}},
                @endforeach
            ],
            colors: ['#6658dd', '#4fc6e1'],
            resize: true
        });

        // Morris Line Chart - Layanan Per Bulan
        Morris.Line({
            element: 'morris-line-example',
            data: [
                { y: 'Jan', a: {{ $chartData[0] }} },
                { y: 'Feb', a: {{ $chartData[1] }} },
                { y: 'Mar', a: {{ $chartData[2] }} },
                { y: 'Apr', a: {{ $chartData[3] }} },
                { y: 'Mei', a: {{ $chartData[4] }} },
                { y: 'Jun', a: {{ $chartData[5] }} },
                { y: 'Jul', a: {{ $chartData[6] }} },
                { y: 'Agu', a: {{ $chartData[7] }} },
                { y: 'Sep', a: {{ $chartData[8] }} },
                { y: 'Okt', a: {{ $chartData[9] }} },
                { y: 'Nov', a: {{ $chartData[10] }} },
                { y: 'Des', a: {{ $chartData[11] }} }
            ],
            xkey: 'y',
            ykeys: ['a'],
            labels: ['Jumlah Layanan'],
            lineColors: ['#1abc9c'],
            lineWidth: 2,
            pointSize: 3,
            gridLineColor: '#eef0f2',
            resize: true,
            parseTime: false
        });
    });
</script>
@endsection