@extends('layouts.menu')

@section('title', 'Dashboard')

@section('contenido')
    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Resumen General {{$fecha_hoy_formato_mx}}</b></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 col-xl-4">
                    <div class="card bg-c-blue order-card">
                        <div class="card-block">
                            <h4 class="m-b-20">Retardos</h4>
                            <h2 class="text-right"><i
                                        class="fa-solid fa-clipboard-list me-2"></i><span>{{$retardos}}</span></h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xl-4">
                    <div class="card bg-c-yellow order-card">
                        <div class="card-block">
                            <h4 class="m-b-20">Dobletes</h4>
                            <h2 class="text-right"><i
                                        class="fa-solid fa-clipboard-user me-2"></i><span>{{$dobletes}}</span></h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-xl-4">
                    <div class="card bg-c-pink order-card">
                        <div class="card-block">
                            <h4 class="m-b-20">Faltas</h4>
                            <h2 class="text-right"><i
                                        class="fa-solid fa-clipboard-list me-2"></i><span>{{$faltas}}</span></h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="table-responsive mt-2" style="overflow-x: clip;">
                        <table class="table table-striped compact">
                            <thead class="table-dark">
                            <tr>
                                <td colspan="6"><h3 class="text-center">Ultimas 5
                                        Incidencias {{$fecha_hoy_formato_mx}}</h3></td>
                            </tr>
                            <tr>
                                <td>Asunto</td>
                                <td>Fecha Registro</td>
                                <td>Hora Registro</td>
                                <td>Vehiculo</td>
                                <td>Odometro</td>
                                <td>Evidencia</td>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($tickets) > 0)
                                @foreach ($tickets as $key => $item)
                                    <tr>
                                        <td>{{$item->asunto}}</td>
                                        <td>{{$item->fecha_registro}}</td>
                                        <td>{{$item->horario_registro}}</td>
                                        <td>{{$item->vehiculo}}</td>
                                        <td>{{$item->odometro}}</td>
                                        <td>
                                            <div class="row">
                                                @foreach($item->evidencias as $image)
                                                    <div class="col-md-2 me-1">
                                                        <a href="{{'storage/'.$image->image}}" target="_blank"
                                                           class="btn btn-primary me-1 ms-1">
                                                            <i class="fa-solid fa-image"></i>
                                                        </a>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <div class="row">
                                                <div class="col-md-2 ms-1 mt-1">
                                                    <a class="btn btn-danger" target="_blank"
                                                       href="{{route('tickets.generar_reporte',[base64_encode($item->id),base64_encode(0)])}}"><i
                                                                class="fa-solid fa-file-pdf"></i></a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6" class="text-center">
                                        <strong>Sin registros</strong>
                                    </td>
                                </tr>
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="table-responsive mt-2" style="overflow-x: clip;">
                        <table class="table table-striped compact">
                            <thead class="table-dark">
                            <tr>
                                <td colspan="6"><h3 class="text-center">Ultimos 5 Empleados
                                        Registrados {{$fecha_hoy_formato_mx}}</h3>
                                </td>
                            </tr>
                            <tr>
                                <td>Nombre</td>
                                <td>Turno</td>
                                <td>Puesto</td>
                                <td>Horario</td>
                                <td>Servicio</td>
                                <td>Puerta</td>
                            </tr>
                            </thead>
                            <tbody>
                            @if(count($empleados) > 0)
                                @foreach ($empleados as $key => $item)
                                    <tr>
                                        <td>{{$item->nombre}} {{$item->apellido_paterno}} {{$item->apellido_materno}}</td>
                                        <td>{{$item->turno}}</td>
                                        <td>{{$item->puesto}}</td>
                                        <td>{{$item->horario}}</td>
                                        <td>{{$item->servicio}}</td>
                                        <td>{{$item->puerta}}</td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6" class="text-center">
                                        <strong>Sin registros</strong>
                                    </td>
                                </tr>
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop
<style>
    body {
        margin-top: 20px;
        background: #FAFAFA;
    }

    .order-card {
        color: #fff;
    }

    .bg-c-blue {
        background: linear-gradient(45deg, #4099ff, #73b4ff);
    }

    .bg-c-green {
        background: linear-gradient(45deg, #2ed8b6, #59e0c5);
    }

    .bg-c-yellow {
        background: linear-gradient(45deg, #FFB64D, #ffcb80);
    }

    .bg-c-pink {
        background: linear-gradient(45deg, #FF5370, #ff869a);
    }

    .card {
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
        box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
        border: none;
        margin-bottom: 30px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .card .card-block {
        padding: 25px;
    }

    .order-card i {
        font-size: 26px;
    }

    .f-left {
        float: left;
    }

    .f-right {
        float: right;
    }
</style>
@section('scripts')
@stop