@extends('layouts.app')
@section('content')
    <div class="container-fluid">
        <div class="row border-bottom p-3 mb-4">
            <a href="{{ route('quality.customer', ['id' => $customer->id]) }}" class="col-auto btn-primary p-0">
                <i class="bi bi-arrow-left m-3 fs-4"></i>
            </a>
            <h1 class="col-auto fs-2 fw-bold m-0">{{ $customer->name }} - Analíticas</h1>
        </div>

        <!-- Total Orders Summary Card -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">Resumen de Órdenes</h5>
                        <span class="badge bg-primmary fs-5">Total: {{ $totalOrders }}</span>
                    </div>
                    <div class="card-body">
                        <h6 class="card-subtitle mb-3 text-muted">Últimas Órdenes Modificadas</h6>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Folio</th>
                                        <th>Estado</th>
                                        <th>Última Modificación</th>
                                        <th>Servicios</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($lastModifiedOrders as $order)
                                        <tr>
                                            <td>{{ $order->folio }}</td>
                                            <td>
                                                @switch($order->status_id)
                                                    @case(1)
                                                        <span class="badge bg-warning">Pendiente</span>
                                                        @break
                                                    @case(3)
                                                        <span class="badge bg-primary">En Proceso</span>
                                                        @break
                                                    @case(5)
                                                        <span class="badge bg-success">Aprobada</span>
                                                        @break
                                                    @default
                                                        <span class="badge bg-secondary">Otro</span>
                                                @endswitch
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($order->updated_at)->format('d/m/Y H:i') }}</td>
                                            <td>
                                                @foreach($order->services as $service)
                                                    <span class="badge bg-primary">{{ $service->name }}</span>
                                                @endforeach
                                            </td>
                                            <td>
                                                <a href="{{ route('order.edit', ['id' => $order->id, 'section' => 1]) }}" 
                                                   class="btn btn-sm btn-primmary">
                                                    <i class="bi bi-eye"></i> Ver
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <!-- Monthly Orders Chart -->
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Órdenes Mensuales</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="monthlyOrdersChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Services Chart -->
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-success text-white">
                        <h5 class="card-title mb-0">Servicios Realizados</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="servicesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <!-- Technicians Chart -->
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">Técnicos Asignados</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="techniciansChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Orders Table -->
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-dark text-white">
                        <h5 class="card-title mb-0">Últimas Órdenes Aprobadas</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Folio</th>
                                        <th>Fecha</th>
                                        <th>Servicios</th>
                                        <th>Técnicos</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($approvedOrders->take(10) as $order)
                                        <tr>
                                            <td>{{ $order->folio }}</td>
                                            <td>{{ \Carbon\Carbon::parse($order->programmed_date)->format('d/m/Y') }}</td>
                                            <td>
                                                @foreach($order->services as $service)
                                                    <span class="badge bg-primary">{{ $service->name }}</span>
                                                @endforeach
                                            </td>
                                            <td>
                                                @foreach($order->technicians as $technician)
                                                    <span class="badge bg-info">{{ $technician->user->name }}</span>
                                                @endforeach
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Monthly Orders Chart
        const monthlyOrdersCtx = document.getElementById('monthlyOrdersChart').getContext('2d');
        new Chart(monthlyOrdersCtx, {
            type: 'line',
            data: {
                labels: {!! json_encode($monthlyOrders->map(fn($order) => Carbon\Carbon::create()->month($order->month)->year($order->year)->format('M Y'))) !!},
                datasets: [{
                    label: 'Órdenes por Mes',
                    data: {!! json_encode($monthlyOrders->pluck('total')) !!},
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 1
                }]
            }
        });

        // Services Chart
        const servicesCtx = document.getElementById('servicesChart').getContext('2d');
        new Chart(servicesCtx, {
            type: 'pie',
            data: {
                labels: {!! json_encode($serviceStats->pluck('name')) !!},
                datasets: [{
                    data: {!! json_encode($serviceStats->pluck('total')) !!},
                    backgroundColor: [
                        'rgb(72, 239, 155)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)',
                        'rgb(255, 99, 132)',
                        'rgb(153, 102, 255)',
                        'rgb(255, 159, 64)'
                    ]
                }]
            }
        });

        // Technicians Chart
        const techniciansCtx = document.getElementById('techniciansChart').getContext('2d');
        new Chart(techniciansCtx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($technicianStats->pluck('name')) !!},
                datasets: [{
                    label: 'Órdenes Atendidas',
                    data: {!! json_encode($technicianStats->pluck('total')) !!},
                    backgroundColor: 'rgb(54, 162, 235)'
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endsection