@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Dashboard</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active">Dashboard</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
        <div class="row">
            
            <!-- Filter Period -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Filter Periode</h5>
                        <form method="GET" action="{{ route('dashboard') }}" class="row g-3">
                            <div class="col-md-4">
                                <select name="period" class="form-select" onchange="this.form.submit()">
                                    <option value="daily" {{ $period == 'daily' ? 'selected' : '' }}>Hari Ini</option>
                                    <option value="weekly" {{ $period == 'weekly' ? 'selected' : '' }}>Minggu Ini</option>
                                    <option value="monthly" {{ $period == 'monthly' ? 'selected' : '' }}>Bulan Ini</option>
                                    <option value="yearly" {{ $period == 'yearly' ? 'selected' : '' }}>Tahun Ini</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <small class="text-muted">
                                    Periode: {{ $startDate->format('d M Y') }} - {{ $endDate->format('d M Y') }}
                                </small>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Statistics Cards Row 1 -->
            <div class="col-lg-3 col-md-6">
                <div class="card info-card sales-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Order</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-cart"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ number_format($totalOrders) }}</h6>
                                <span class="text-muted small pt-2">Order</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card revenue-card">
                    <div class="card-body">
                        <h5 class="card-title">Order Completed</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-check-circle"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ number_format($totalPendapatan) }}</h6>
                                <span class="text-success small pt-1 fw-bold">Selesai</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card customers-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Customer</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                                <i class="bi bi-people"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ number_format($totalCustomers) }}</h6>
                                <span class="text-muted small pt-2">Pelanggan</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="card info-card">
                    <div class="card-body">
                        <h5 class="card-title">Total Teknisi</h5>
                        <div class="d-flex align-items-center">
                            <div class="card-icon rounded-circle d-flex align-items-center justify-content-center" style="background: #f6f9ff; color: #4154f1;">
                                <i class="bi bi-tools"></i>
                            </div>
                            <div class="ps-3">
                                <h6>{{ number_format($totalTeknisi) }}</h6>
                                <span class="text-muted small pt-2">Pekerja</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order by Type & Status -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Order by Type</h5>
                        <canvas id="orderTypeChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Order by Status</h5>
                        <canvas id="orderStatusChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- Sub-Category Breakdown (Umum) -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Order Umum - Sub Category</h5>
                        <canvas id="subCategoryChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- Trend Chart -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Trend Order (7 Hari Terakhir)</h5>
                        <canvas id="trendChart" style="max-height: 300px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- Top 5 Teknisi -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Top 5 Teknisi Terbaik</h5>
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Rank</th>
                                    <th>Nama Teknisi</th>
                                    <th class="text-center">Completed</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topTeknisi as $index => $item)
                                    <tr>
                                        <td>
                                            @if($index == 0)
                                                <span class="badge bg-warning"><i class="bi bi-trophy-fill"></i> #1</span>
                                            @elseif($index == 1)
                                                <span class="badge bg-secondary"><i class="bi bi-trophy-fill"></i> #2</span>
                                            @elseif($index == 2)
                                                <span class="badge bg-info"><i class="bi bi-trophy-fill"></i> #3</span>
                                            @else
                                                <span class="badge bg-light text-dark">#{{ $index + 1 }}</span>
                                            @endif
                                        </td>
                                        <td>{{ $item->assignedTeknisi->name ?? 'N/A' }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-success">{{ $item->total_completed }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">Belum ada data</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Teknisi Performance -->
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Performa Teknisi</h5>
                        <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Nama</th>
                                        <th class="text-center">Assigned</th>
                                        <th class="text-center">Completed</th>
                                        <th class="text-center">Rate</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($teknisiPerformance as $teknisi)
                                        @php
                                            $rate = $teknisi->total_assigned > 0 
                                                ? round(($teknisi->total_completed / $teknisi->total_assigned) * 100, 1) 
                                                : 0;
                                        @endphp
                                        <tr>
                                            <td>{{ $teknisi->name }}</td>
                                            <td class="text-center">{{ $teknisi->total_assigned }}</td>
                                            <td class="text-center">{{ $teknisi->total_completed }}</td>
                                            <td class="text-center">
                                                <span class="badge {{ $rate >= 80 ? 'bg-success' : ($rate >= 50 ? 'bg-warning' : 'bg-danger') }}">
                                                    {{ $rate }}%
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">Belum ada data</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Orders -->
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Order Terbaru (10 Terakhir)</h5>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Customer</th>
                                        <th>Type</th>
                                        <th>Sub Category</th>
                                        <th>Teknisi</th>
                                        <th>Status</th>
                                        <th>Tanggal</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentOrders as $order)
                                        <tr>
                                            <td><strong>#{{ $order->id }}</strong></td>
                                            <td>{{ $order->customer->name ?? 'N/A' }}</td>
                                            <td>
                                                @if($order->type == 'psb')
                                                    <span class="badge bg-primary">PSB</span>
                                                @else
                                                    <span class="badge bg-info">Umum</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($order->type == 'umum')
                                                    @if($order->sub_category == 'dismantle')
                                                        <span class="badge bg-warning">Dismantle</span>
                                                    @elseif($order->sub_category == 'gangguan')
                                                        <span class="badge bg-danger">Gangguan</span>
                                                    @elseif($order->sub_category == 'relokasi')
                                                        <span class="badge bg-secondary">Relokasi</span>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($order->assignedTeknisi)
                                                    {{ $order->assignedTeknisi->name }}
                                                @elseif($order->assignedRombongan && $order->assignedRombongan->ketua)
                                                    {{ $order->assignedRombongan->ketua->name }} (Ketua Rombongan)
                                                @else
                                                    Belum ditugaskan
                                                @endif
                                            </td>
                                            <td>
                                                @if($order->status == 'pending')
                                                    <span class="badge bg-warning">Pending</span>
                                                @elseif($order->status == 'assigned')
                                                    <span class="badge bg-info">Assigned</span>
                                                @elseif($order->status == 'in_progress')
                                                    <span class="badge bg-primary">In Progress</span>
                                                @elseif($order->status == 'completed')
                                                    <span class="badge bg-success">Completed</span>
                                                @elseif($order->status == 'rejected')
                                                    <span class="badge bg-danger">Rejected</span>
                                                @endif
                                            </td>
                                            <td>{{ $order->created_at->format('d M Y H:i') }}</td>
                                            <td>
                                                <a href="{{ route('orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center text-muted">Belum ada order</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- Chart.js Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Order Type Chart (Doughnut)
        const orderTypeCtx = document.getElementById('orderTypeChart').getContext('2d');
        new Chart(orderTypeCtx, {
            type: 'doughnut',
            data: {
                labels: ['PSB', 'Umum'],
                datasets: [{
                    data: [{{ $ordersPSB }}, {{ $ordersUmum }}],
                    backgroundColor: ['#4154f1', '#2eca6a'],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed || 0;
                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return label + ': ' + value + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });

        // Order Status Chart (Pie)
        const orderStatusCtx = document.getElementById('orderStatusChart').getContext('2d');
        new Chart(orderStatusCtx, {
            type: 'pie',
            data: {
                labels: ['Pending', 'Assigned', 'In Progress', 'Completed', 'Rejected'],
                datasets: [{
                    data: [
                        {{ $ordersPending }},
                        {{ $ordersAssigned }},
                        {{ $ordersInProgress }},
                        {{ $ordersCompleted }},
                        {{ $ordersRejected }}
                    ],
                    backgroundColor: [
                        '#ffc107',
                        '#17a2b8',
                        '#4154f1',
                        '#2eca6a',
                        '#ff5370'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed || 0;
                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return label + ': ' + value + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });

        // Sub-Category Chart (Doughnut)
        const subCategoryCtx = document.getElementById('subCategoryChart').getContext('2d');
        new Chart(subCategoryCtx, {
            type: 'doughnut',
            data: {
                labels: ['Dismantle', 'Gangguan', 'Relokasi'],
                datasets: [{
                    data: [
                        {{ $ordersDismantle }},
                        {{ $ordersGangguan }},
                        {{ $ordersRelokasi }}
                    ],
                    backgroundColor: [
                        '#ffc107',
                        '#ff5370',
                        '#6c757d'
                    ],
                    borderWidth: 2,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed || 0;
                                let total = context.dataset.data.reduce((a, b) => a + b, 0);
                                let percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return label + ': ' + value + ' (' + percentage + '%)';
                            }
                        }
                    }
                }
            }
        });

        // Trend Chart (Line)
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: [
                    @foreach($dailyTrend as $item)
                        '{{ $item['date'] }}',
                    @endforeach
                ],
                datasets: [{
                    label: 'Jumlah Order',
                    data: [
                        @foreach($dailyTrend as $item)
                            {{ $item['count'] }},
                        @endforeach
                    ],
                    borderColor: '#4154f1',
                    backgroundColor: 'rgba(65, 84, 241, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointBackgroundColor: '#4154f1'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        }
                    }
                }
            }
        });
    </script>
@endsection