@extends('layouts.admin')

@section('title', 'Dashboard')
@section('plugins.Chartjs', true)

@section('content_header')
    <div>
        <h1 class="mb-0">Dashboard</h1>
        <small class="text-muted">Vista general de operación de patio</small>
    </div>
@stop

@section('admin_content')

<style>
    .table td, .table th {
        vertical-align: middle !important;
    }

    .table tbody tr {
        background-color: #fff !important;
    }
</style>

<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $enPatio }}</h3>
                <p>Contenedores en Patio</p>
            </div>
            <div class="icon">
                <i class="fas fa-warehouse"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $entradasHoy }}</h3>
                <p>Entradas Hoy</p>
            </div>
            <div class="icon">
                <i class="fas fa-sign-in-alt"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $salidasHoy }}</h3>
                <p>Salidas Hoy</p>
            </div>
            <div class="icon">
                <i class="fas fa-sign-out-alt"></i>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $incidenciasAbiertas }}</h3>
                <p>Incidencias Abiertas</p>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-primary"><i class="fas fa-plug"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Integraciones Pendientes</span>
                <span class="info-box-number">{{ $integracionesPendientes }}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-success"><i class="fas fa-calendar-week"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Entradas Semana</span>
                <span class="info-box-number">{{ $entradasSemana }}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-warning"><i class="fas fa-calendar-week"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Salidas Semana</span>
                <span class="info-box-number">{{ $salidasSemana }}</span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-secondary"><i class="fas fa-calendar-alt"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Movimientos Mes</span>
                <span class="info-box-number">{{ $entradasMes + $salidasMes }}</span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Movimientos últimos 14 días</h3>
            </div>
            <div class="card-body">
                <canvas id="movimientosChart" height="110"></canvas>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card card-outline card-info">
            <div class="card-header">
                <h3 class="card-title">Distribución por Estado</h3>
            </div>
            <div class="card-body">
                <canvas id="estadosChart" height="220"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card card-outline card-success">
            <div class="card-header">
                <h3 class="card-title">Contenedores por Naviera</h3>
            </div>
            <div class="card-body">
                <canvas id="navierasChart" height="140"></canvas>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Últimos movimientos</h3>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-bordered table-striped table-hover text-nowrap mb-0">
                    <thead class="bg-primary">
                        <tr>
                            <th>ID</th>
                            <th>Contenedor</th>
                            <th>Movimiento</th>
                            <th>Fecha</th>
                            <th>Hora</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($ultimosMovimientos as $mov)
                            <tr>
                                <td>{{ $mov->id }}</td>
                                <td>{{ $mov->contenedor->contenedor ?? 'N/A' }}</td>
                                <td>
                                    @if($mov->tipo_movimiento === 'ENTRADA')
                                        <span class="badge badge-success">ENTRADA</span>
                                    @elseif($mov->tipo_movimiento === 'SALIDA')
                                        <span class="badge badge-warning">SALIDA</span>
                                    @else
                                        <span class="badge badge-info">{{ $mov->tipo_movimiento }}</span>
                                    @endif
                                </td>
                                <td>{{ optional($mov->fecha)->format('Y-m-d') }}</td>
                                <td>{{ $mov->hora }}</td>
                                <td>
                                    @php $estadoActual = $mov->contenedor->estado ?? null; @endphp
                                    @if($estadoActual === 'EN_PATIO')
                                        <span class="badge badge-primary">EN PATIO</span>
                                    @elseif($estadoActual === 'CON_INCIDENCIA')
                                        <span class="badge badge-danger">CON INCIDENCIA</span>
                                    @elseif($estadoActual === 'SALIO')
                                        <span class="badge badge-success">SALIO</span>
                                    @elseif($estadoActual)
                                        <span class="badge badge-secondary">{{ $estadoActual }}</span>
                                    @else
                                        <span class="text-muted">N/A</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted">Sin movimientos registrados</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@stop

@section('js')
<script>
    const movimientosLabels = @json($movimientosLabels);
    const movimientosEntradasData = @json($movimientosEntradasData);
    const movimientosSalidasData = @json($movimientosSalidasData);
    const navierasLabels = @json($navierasLabels);
    const navierasData = @json($navierasData);
    const estadosLabels = @json($estadosLabels);
    const estadosData = @json($estadosData);

    const colorTexto = '#6c757d';
    const colorGrid = 'rgba(0, 0, 0, 0.08)';

    new Chart(document.getElementById('movimientosChart'), {
        type: 'line',
        data: {
            labels: movimientosLabels,
            datasets: [
                {
                    label: 'Entradas',
                    data: movimientosEntradasData,
                    borderColor: '#28a745',
                    backgroundColor: 'rgba(40, 167, 69, 0.15)',
                    pointBackgroundColor: '#28a745',
                    pointBorderColor: '#28a745',
                    pointRadius: 4,
                    pointHoverRadius: 5,
                    borderWidth: 3,
                    tension: 0.35,
                    fill: true
                },
                {
                    label: 'Salidas',
                    data: movimientosSalidasData,
                    borderColor: '#ffc107',
                    backgroundColor: 'rgba(255, 193, 7, 0.12)',
                    pointBackgroundColor: '#ffc107',
                    pointBorderColor: '#ffc107',
                    pointRadius: 4,
                    pointHoverRadius: 5,
                    borderWidth: 3,
                    tension: 0.35,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    labels: {
                        color: colorTexto
                    }
                }
            },
            scales: {
                x: {
                    ticks: {
                        color: colorTexto
                    },
                    grid: {
                        color: colorGrid
                    }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: colorTexto,
                        precision: 0
                    },
                    grid: {
                        color: colorGrid
                    }
                }
            }
        }
    });

    new Chart(document.getElementById('navierasChart'), {
        type: 'bar',
        data: {
            labels: navierasLabels,
            datasets: [{
                label: 'Contenedores',
                data: navierasData,
                backgroundColor: [
                    '#17a2b8',
                    '#28a745',
                    '#ffc107',
                    '#dc3545',
                    '#6f42c1',
                    '#fd7e14'
                ],
                borderColor: [
                    '#17a2b8',
                    '#28a745',
                    '#ffc107',
                    '#dc3545',
                    '#6f42c1',
                    '#fd7e14'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    labels: {
                        color: colorTexto
                    }
                }
            },
            scales: {
                x: {
                    ticks: {
                        color: colorTexto
                    },
                    grid: {
                        display: false
                    }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: colorTexto,
                        precision: 0
                    },
                    grid: {
                        color: colorGrid
                    }
                }
            }
        }
    });

    new Chart(document.getElementById('estadosChart'), {
        type: 'doughnut',
        data: {
            labels: estadosLabels,
            datasets: [{
                data: estadosData,
                backgroundColor: [
                    '#007bff',
                    '#dc3545',
                    '#28a745',
                    '#ffc107',
                    '#6c757d',
                    '#17a2b8'
                ],
                borderColor: '#ffffff',
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        color: colorTexto,
                        padding: 15
                    }
                }
            }
        }
    });
</script>
@stop