@extends('layouts.kaiadmin.master')

@section('template_title')
    Detalle de Servicios
@endsection

@section('content')
<br>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<section class="content container-fluid">
    <div class="row">
        <div class="col-md-12">
            <!-- Botón de regresar -->
            <div class="mb-3">
                <a class="btn btn-primary text-white" href="{{ route('usrservicio.index') }}">
                    <i class="fas fa-arrow-left"></i> Regresar
                </a>
            </div>

            @if($usrservicio->isEmpty())
                <div class="alert alert-info text-center">
                    <i class="fas fa-info-circle"></i> No hay detalles de servicio disponibles.
                </div>
            @else
            <!-- CARD: Servicio y Total Pendiente -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="card p-3 shadow-sm">
                        <div class="d-flex align-items-center">
                            <span>
                                <i class="fas fa-lightbulb text-warning me-2"></i>
                                <strong style="font-weight: bold;">Servicio: </strong>  {{ $usrservicio->first()->UsrSerCodigo }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card p-3 shadow-sm">
                        <div class="d-flex align-items-center">
                            @php
                                // Total pendiente (sin emisión)
                                $totalPendiente = $usrservicio->filter(function($d) {
                                    return empty($d->UsrFacEmiFechaEmision) && empty($d->UsrFacEmiCodigo);
                                })->sum('cargoQ');
                            @endphp
                            <span>
                                <i class="fas fa-money-bill-wave text-success me-2"></i>
                                <strong style="font-weight: bold;">Total Pendiente: </strong>  Q. {{ number_format($totalPendiente, 2) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- CARD: Tabla y Gráfica -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card shadow-sm">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-table"></i> Detalles Mensuales</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="detalle-servicios-table" class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="text-center">Mes / Descripción</th>
                                            <th class="text-center">Saldo</th>
                                            <th class="text-center">Estado</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($usrservicio as $detalle)
                                            <tr>
                                                <td class="text-center">{{ $detalle->descripcion }}</td>
                                                <td class="text-center"><strong>Q. {{ number_format($detalle->cargoQ ?? 0, 2) }}</strong></td>
                                                <td class="text-center">
                                                    @if (!empty($detalle->UsrFacEmiFechaEmision) || !empty($detalle->UsrFacEmiCodigo))
                                                        <span class="badge bg-success" style="font-size: 0.9em; padding: 0.5em 1.25em;">Emitido</span>
                                                    @else
                                                        <span class="badge bg-danger" style="font-size: 0.9em; padding: 0.5em 1.25em;">No Emitido</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CARD: Gráfica -->
                <div class="col-md-6">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0"><i class="fas fa-chart-bar"></i> Consumo KWH</h5>
                        </div>
                        <div class="card-body" style="height: 300px;">
                            <canvas id="consumoChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</section>
@endsection

@section('scripts')
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    $('#detalle-servicios-table').DataTable({
        paging: true,
        ordering: false,
        info: false,
        searching: false,
        columnDefs: [
            { targets: '_all', className: 'text-center' }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
        }
    });

    const datos = @json($usrservicio->take(5));
    if (datos.length === 0) return;

    const meses = datos.map(item => item.descripcion).reverse();
    const consumos = datos.map(item => item.valorKwh ?? (item.UsrCarKwhSocial > 0 ? item.UsrCarKwhSocial : item.UsrCarKwhSimple) ?? 0).reverse();

    const ctx = document.getElementById('consumoChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: meses,
            datasets: [{
                label: 'Consumo KWH',
                data: consumos,
                backgroundColor: 'rgba(75, 192, 192, 0.7)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                barThickness: 20
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Consumo KWH'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Mes'
                    }
                }
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `Consumo: ${context.raw} KWH`;
                        }
                    }
                },
                datalabels: {
                    anchor: 'end',
                    align: 'right',
                    formatter: function(value) {
                        return `${value} KWH`;
                    },
                    color: '#000',
                    font: { weight: 'bold' }
                }
            }
        },
        plugins: [ChartDataLabels]
    });
});
</script>
@endsection