@extends('layouts.default')

@section('title', 'Dashboard E-Maintenance')

@push('css')
<link href="{{ asset('assets/plugins/nvd3/nvd3.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/jquery-jvectormap/jquery-jvectormap.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/buttons/buttons.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/responsive/responsive.bootstrap4.css') }}" rel="stylesheet" />

<style>
    /* FIX DONUT HEIGHT */
    #donut-status svg {
        width: 100% !important;
        height: 180px !important;
    }

    .fade-up {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.6s ease forwards;
    }

    .fade-delay-1 { animation-delay: 0.1s; }
    .fade-delay-2 { animation-delay: 0.2s; }
    .fade-delay-3 { animation-delay: 0.3s; }
    .fade-delay-4 { animation-delay: 0.4s; }
    .fade-delay-5 { animation-delay: 0.5s; }
    .fade-delay-6 { animation-delay: 0.6s; }
    .fade-delay-7 { animation-delay: 0.7s; }
    .fade-delay-8 { animation-delay: 0.8s; }

    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

</style>
@endpush


@section('content')

<ol class="breadcrumb pull-right">
    <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
    <li class="breadcrumb-item active">Dashboard</li>
</ol>

<h1 class="page-header">Dashboard <small>Ringkasan aktivitas pemeliharaan</small></h1>


<!-- ==========================
     WIDGET STATISTIK
=========================== -->
<div class="row">

    <div class="col-lg-3 col-md-6 fade-up fade-delay-1" >
        <div class="widget widget-stats bg-gradient-green">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-suitcase"></i></div>
            <div class="stats-content">
                <div class="stats-title">TOTAL PENGAJUAN HARI INI</div>
                <div class="stats-number">{{ $totalToday }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 75%;"></div>
                </div>
                <div class="stats-desc">Update hari ini</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 fade-up fade-delay-2">
        <div class="widget widget-stats bg-gradient-blue">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-paper-plane"></i></div>
            <div class="stats-content">
                <div class="stats-title">PENGAJUAN BARU</div>
                <div class="stats-number">{{ $statusCounts['Pengajuan Baru'] ?? 0 }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 50%;"></div>
                </div>
                <div class="stats-desc">Masuk minggu ini</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 fade-up fade-delay-3">
        <div class="widget widget-stats bg-gradient-purple">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-spinner fa-spin"></i></div>
            <div class="stats-content">
                <div class="stats-title">DALAM PROSES</div>
                <div class="stats-number">{{ $statusCounts['Proses'] ?? 0 }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 65%;"></div>
                </div>
                <div class="stats-desc">Sedang dikerjakan</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 fade-up fade-delay-4">
        <div class="widget widget-stats bg-gradient-black">
            <div class="stats-icon stats-icon-lg"><i class="fa fa-check-circle"></i></div>
            <div class="stats-content">
                <div class="stats-title">SELESAI</div>
                <div class="stats-number">{{ $statusCounts['Selesai'] ?? 0 }}</div>
                <div class="stats-progress progress">
                    <div class="progress-bar" style="width: 80%;"></div>
                </div>
                <div class="stats-desc">Pekerjaan selesai</div>
            </div>
        </div>
    </div>

</div>

<!-- ==========================
     GRAFIK
=========================== -->
<div class="row">

 <div class="col-lg-12 fade-up fade-delay-1">
    <div class="widget-chart with-sidebar bg-black">

        <!-- LEFT CHART -->
        <div class="widget-chart-content">
            <h4 class="chart-title">
                PENGAJUAN PEMELIHARAAN
                <small>Statistik bulanan</small>
            </h4>

            <div id="chart-pengajuan"
                 class="widget-chart-full-width nvd3-inverse-mode"
                 style="height: 350px"></div>  <!-- FIX: Tinggikan -->
            </div>

        <!-- RIGHT SIDEBAR -->
        <div class="widget-chart-sidebar bg-black-darker">

            <div class="chart-number">
                {{ $totalYear }}
                <small>Total Pengajuan Tahun Ini</small>
            </div>

            <!-- DONUT CHART (TINGGI DIPERBAIKI) -->
            <div id="donut-status"
                 class="nvd3-inverse-mode p-t-10"
                 style="height: 260px; width:100%;">  <!-- FIX: Tinggikan -->
            </div>

            <!-- LEGEND -->
            <ul class="chart-legend f-s-11 m-t-10" id="donut-legend"></ul>

        </div>

    </div>
</div>

<style>
    /* Buat sidebar tidak menambah padding aneh */
    .widget-chart-sidebar {
        padding-top: 5px !important;
    }

    /* Hilangkan margin/padding default donut container */
    #donut-status {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Pasang donut SVG agar duduk tepat di atas */
    #donut-status svg {
        width: 100% !important;
        height: 220px !important; /* SESUAIKAN */
        margin-top: -10px !important; /* INI YANG MENGANGKAT PIE KE ATAS */
        display: block;
    }
</style>





</div>

<!-- ==========================
     DURATION CHART
=========================== -->
<div class="row">
    <div class="col-lg-12 fade-up fade-delay-2">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
                <h4 class="panel-title">
                    <i class="fa fa-clock"></i> Rata-rata Durasi per Status
                    <small>Waktu yang dibutuhkan di setiap tahap</small>
                </h4>
            </div>
            <div class="panel-body">
                <!-- Filter Form -->
                <form method="GET" action="{{ route('dashboard') }}" class="form-inline mb-3">
                    <div class="form-group mr-2">
                        <label class="mr-2">Periode:</label>
                        <input type="date" name="start_date" class="form-control form-control-sm" 
                               value="{{ request('start_date') }}" placeholder="Tanggal Mulai">
                    </div>
                    <div class="form-group mr-2">
                        <label class="mr-2">s/d</label>
                        <input type="date" name="end_date" class="form-control form-control-sm" 
                               value="{{ request('end_date') }}" placeholder="Tanggal Akhir">
                    </div>
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="fa fa-filter"></i> Filter
                    </button>
                    @if(request('start_date') || request('end_date'))
                    <a href="{{ route('dashboard') }}" class="btn btn-sm btn-secondary ml-2">
                        <i class="fa fa-redo"></i> Reset
                    </a>
                    @endif
                </form>

                <div id="chart-duration" style="height: 350px;"></div>
            </div>
        </div>
    </div>
</div>



<!-- ==========================
     DAFTAR PENGAJUAN BELUM SELESAI
=========================== -->
<div class="row">
    <div class="col-lg-12 fade-up fade-delay-3">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
                <h4 class="panel-title">Daftar Pengajuan Belum Selesai</h4>
            </div>
            <div class="panel-body">
                <table id="table-incomplete" class="table table-striped table-bordered m-b-0">
                    <thead>
                        <tr>
                            <th width="5%">No</th>
                            <th>Nomor Pengajuan</th>
                            <th>Nama Pengaju</th>
                            <th>Status</th>
                            <th>Durasi Waktu Tunggu</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($incompletePengajuan as $key => $item)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $item->nomor_pengajuan }}</td>
                            <td>{{ $item->nama_pengaju }}</td>
                            <td>@statusBadge($item->status_pengajuan)</td>
                            <td>{{ $item->durasi_tunggu }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ==========================
     TABEL + LOG
=========================== -->
<div class="row">

    <div class="col-lg-8 fade-up fade-delay-1">
        <div class="panel panel-inverse">
 			<div class="panel-heading">
					<div class="panel-heading-btn">
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
					</div>
					<h4 class="panel-title">Data Pengajuan Terbaru</h4>
			</div>
            <div class="panel-body p-t-10 p-0">

               <table id="table-pengajuan" class="table table-striped table-bordered m-b-0">

                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Unit</th>
                            <th>Kategori</th>
                            <th>Tanggal</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($latestPengajuan as $p)
                        <tr>
                            <td>{{ $p->nomor_pengajuan ?? $p->id }}</td>
                            <td>{{ $p->uraian_kerusakan }}</td>
                            <td>{{ $p->usulan_tindakan }}</td>
                            <td>{{ $p->created_at->format('Y-m-d') }}</td>
                            <td>@statusBadge($p->status_pengajuan)</td>
                        </tr>
                        @endforeach
                    </tbody>

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


    <div class="col-lg-4 fade-up fade-delay-2">
        <div class="panel panel-inverse">
 			<div class="panel-heading">
					<div class="panel-heading-btn">
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
						<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
					</div>
					<h4 class="panel-title">Aktifitas Terkini</h4>
			</div>
            <div class="panel-body">
                <ul class="list-group">
                    @foreach($activityLogs as $a)
                    <li class="list-group-item">
                        {{ $a->status ?? $a->message }}
                        <div class="text-muted f-s-10">{{ $a->created_at->format('Y-m-d H:i') }}</div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

</div>

@endsection



@push('scripts')
<script src="{{ asset('assets/plugins/nvd3/nvd3.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-jvectormap/jquery-jvectormap.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-jvectormap/jquery-jvectormap-world-merc-en.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/dataTables.buttons.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.flash.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/vfs_fonts.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.html5.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.print.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/dataTables.responsive.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/responsive.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/js/demo/table-manage-buttons.demo.js') }}"></script>


<script>
    var monthly = {!! json_encode($monthlyData) !!};
    var donut = {!! json_encode($donutData) !!};
    var monthlyData = {!! json_encode($monthlyData) !!};
    var durationStats = {!! json_encode($durationStats) !!};

    var monthly       = monthlyData.pengajuan;
    var monthlyBaru   = monthlyData.baru;
    var monthlyProses = monthlyData.proses;
    var monthlySelesai= monthlyData.selesai;


    // ==========================
    // LINE CHART MULTI SERIES
    // ==========================
    nv.addGraph(function () {

        var chart = nv.models.lineChart()
            .useInteractiveGuideline(true)
            .margin({ left: 60, right: 30 });

        // ----- X Axis labels (Jan, Feb, Mar...) -----
        chart.xAxis.tickFormat(function (d) {
            const month = monthly.find(m => m.x === d);
            return month ? month.label : d;
        });

        // ----- Y Axis -----
        chart.yAxis.tickFormat(d3.format(',.0f'));

        // Hapus SVG lama agar chart tidak menumpuk
        d3.select('#chart-pengajuan').selectAll("*").remove();

        // Render Chart
        d3.select('#chart-pengajuan')
            .append('svg')
            .datum([
                {
                    key: 'Total Pengajuan',
                    color: '#00c0ef',
                    values: monthly
                },
                {
                    key: 'Pengajuan Baru',
                    color: '#36cfc9',
                    values: monthlyBaru
                },
                {
                    key: 'Proses',
                    color: '#f39c12',
                    values: monthlyProses
                },
                {
                    key: 'Selesai',
                    color: '#00a65a',
                    values: monthlySelesai
                }
            ])
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });



    // ==========================
    // DONUT CHART FIXED
    // ==========================
	var donut = {!! json_encode($donutData) !!};

	// PIE CHART
	nv.addGraph(function () {

		var chart = nv.models.pieChart()
			.x(d => d.label)
			.y(d => d.value)
			.donut(true)
			.donutRatio(0.45)
			.showLabels(false)    // MATIKAN LABEL DI ATAS PIE
			.showLegend(false)    // MATIKAN LEGEND BAWAAN PIE
			.labelThreshold(0.05)
			.labelType("percent");

		// Hapus SVG lama
		d3.select('#donut-status').selectAll("*").remove();

		// Render chart
		var svg = d3.select('#donut-status')
			.append("svg")
			.datum(donut)
			.transition().duration(500)
			.call(chart);

		// === AUTO-GENERATE LEGEND DI BAWAH DONUT ===
		nv.utils.windowResize(chart.update);

		setTimeout(() => {
			var legend = '';
			var color = chart.color(); // warna slice dari pie

			donut.forEach((d, i) => {
				legend += `
					<li>
						<i class="fa fa-circle m-r-5" style="color:${color(i)}"></i>
						${d.label} (${d.value})
					</li>
				`;
			});

			document.getElementById('donut-legend').innerHTML = legend;
		}, 600);

		return chart;
	});


    // ==========================
    // DURATION HORIZONTAL BAR CHART
    // ==========================
    nv.addGraph(function() {
        var chart = nv.models.multiBarHorizontalChart()
            .x(d => d.label)
            .y(d => d.value)
            .margin({top: 30, right: 20, bottom: 50, left: 150})
            .showValues(true)
            .showControls(false)
            .showLegend(false);

        // Format Y-axis (duration values)
        chart.yAxis.tickFormat(d => {
            if (d < 60) return d.toFixed(0) + ' mnt';
            if (d < 1440) return (d/60).toFixed(1) + ' jam';
            return (d/1440).toFixed(1) + ' hari';
        });

        // Tooltip with formatted duration
        chart.tooltip.contentGenerator(function(data) {
            var point = data.data;
            return '<div style="padding:10px;">' +
                   '<strong>' + point.label + '</strong><br/>' +
                   '<span style="color:#00c0ef">Rata-rata: ' + point.formatted + '</span><br/>' +
                   '<small>(' + point.value.toFixed(2) + ' menit)</small>' +
                   '</div>';
        });

        // Color mapping for each status
        var colorMap = {
            'Pengajuan Baru': '#007bff',
            'Verifikasi TURT': '#ffc107',
            'Verifikasi Pejabat Pengadaan': '#17a2b8',
            'Verifikasi PPK': '#17a2b8',
            'Pengerjaan': '#e74c3c',
            'Selesai': '#28a745',
            'Ditolak': '#dc3545'
        };

        chart.barColor(d => colorMap[d.label] || '#6c757d');

        // Clear and render
        d3.select('#chart-duration').selectAll("*").remove();
        d3.select('#chart-duration')
            .append('svg')
            .datum([{
                key: 'Durasi',
                values: durationStats
            }])
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });


    // MAP (demo)
    $('#visitors-map').vectorMap({
        map: 'world_merc_en',
        backgroundColor: 'black',
        zoomOnScroll: false
    });

    $('#table-pengajuan').DataTable({
        responsive: true,
        pageLength: 10,
        lengthMenu: [[5, 10, 20, 50], [5, 10, 20, 50]],
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
            paginate: {
                previous: "Sebelumnya",
                next: "Berikutnya"
            }
        }
    });

    $('#table-incomplete').DataTable({
        responsive: true,
        pageLength: 10,
        lengthMenu: [[5, 10, 20, 50], [5, 10, 20, 50]],
        language: {
            search: "Cari:",
            lengthMenu: "Tampilkan _MENU_ data",
            info: "Menampilkan _START_ - _END_ dari _TOTAL_ data",
            paginate: {
                previous: "Sebelumnya",
                next: "Berikutnya"
            }
        }
    });




</script>
@endpush