@extends('layouts.erp')

@section('title', 'Dashboard ASITEC')

@section('content')

<style>

/* =========================================
   HEADER
========================================== */

.dashboard-header{

    margin-bottom:35px;
}

.dashboard-header h1{

    font-size:38px;

    font-weight:800;

    color:#111827;

    margin-bottom:8px;
}

.dashboard-header p{

    margin:0;

    color:#6b7280;

    font-size:16px;
}

/* =========================================
   KPI
========================================== */

.kpi-card{

    background:white;

    border-radius:24px;

    padding:28px;

    position:relative;

    overflow:hidden;

    height:100%;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

    transition:.25s;
}

.kpi-card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 35px rgba(0,0,0,.06);
}

.kpi-number{

    font-size:52px;

    font-weight:800;

    line-height:1;

    color:#111827;
}

.kpi-title{

    margin-top:12px;

    font-size:14px;

    letter-spacing:1px;

    color:#6b7280;

    font-weight:700;
}

.kpi-icon{

    position:absolute;

    top:22px;
    right:22px;

    font-size:54px;

    opacity:.08;
}

.kpi-primary{

    border-top:4px solid #7A0014;
}

.kpi-warning{

    border-top:4px solid #f4b400;
}

.kpi-info{

    border-top:4px solid #17a2b8;
}

.kpi-success{

    border-top:4px solid #22c55e;
}

.kpi-danger{

    border-top:4px solid #ff0055;
}

/* =========================================
   ERP CARD
========================================== */

.erp-card{

    background:white;

    border-radius:24px;

    padding:30px;

    margin-top:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);
}

.erp-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:28px;

    font-weight:800;

    color:#111827;

    margin-bottom:28px;
}

/* =========================================
   PIPELINE
========================================== */

.pipeline{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:20px;
}

.pipeline-item{

    background:#f9fafb;

    border-radius:20px;

    padding:24px;

    text-align:center;

    border:1px solid #edf2f7;
}

.pipeline-item h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;
}

.pipeline-item span{

    color:#6b7280;

    font-weight:700;

    letter-spacing:.5px;
}

/* =========================================
   ALERTAS
========================================== */

.alerta-card{

    border-radius:20px;

    background:white;

    padding:24px;

    margin-bottom:16px;

    border-left:6px solid #d1d5db;

    transition:.2s;
}

.alerta-card:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);
}

.alerta-danger{

    border-left:6px solid #ff0055;
}

.alerta-warning{

    border-left:6px solid #f4b400;
}

.alerta-dark{

    border-left:6px solid #111827;
}

/* =========================================
   BADGES
========================================== */

.badge-custom{

    padding:10px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;
}

.badge-danger-custom{

    background:#ff0055;

    color:white;
}

.badge-warning-custom{

    background:#f4b400;

    color:#111827;
}

.badge-dark-custom{

    background:#111827;

    color:white;
}

.badge-primary-custom{

    background:#2563eb;

    color:white;
}

/* =========================================
   TABLES
========================================== */

.erp-table{

    width:100%;
}

.erp-table tr{

    border-bottom:1px solid #f1f5f9;
}

.erp-table td{

    padding:16px 0;
}

.erp-table strong{

    color:#111827;
}

.erp-table small{

    color:#9ca3af;
}

/* =========================================
   ACTIVITY
========================================== */

.activity-item{

    display:flex;

    align-items:flex-start;

    margin-bottom:24px;
}

.activity-dot{

    width:14px;
    height:14px;

    border-radius:50%;

    background:#7A0014;

    margin-right:16px;

    margin-top:7px;

    flex-shrink:0;
}

/* =========================================
   RESPONSIVE
========================================== */

@media(max-width:991px){

    .pipeline{

        grid-template-columns:
        repeat(2,1fr);
    }
}

</style>

<!-- =========================================
HEADER
========================================= -->

<div class="dashboard-header">

    <h1>
        Dashboard Empresarial
    </h1>

    <p>
        Plataforma integral de control y certificaciones NOM
    </p>

</div>

<!-- =========================================
KPIs
========================================= -->

<div class="row g-4">

    <div class="col-lg-3 col-md-6">

        <div class="kpi-card kpi-primary">

            <div class="kpi-number">
                {{ $total }}
            </div>

            <div class="kpi-title">
                SERVICIOS TOTALES
            </div>

            <div class="kpi-icon text-danger">
                <i class="fas fa-folder"></i>
            </div>

        </div>

    </div>

    <div class="col-lg-3 col-md-6">

        <div class="kpi-card kpi-warning">

            <div class="kpi-number">
                {{ $pendientes }}
            </div>

            <div class="kpi-title">
                PENDIENTES
            </div>

            <div class="kpi-icon text-warning">
                <i class="fas fa-clock"></i>
            </div>

        </div>

    </div>

    <div class="col-lg-3 col-md-6">

        <div class="kpi-card kpi-info">

            <div class="kpi-number">
                {{ $esteMes }}
            </div>

            <div class="kpi-title">
                ESTE MES
            </div>

            <div class="kpi-icon text-info">
                <i class="fas fa-chart-line"></i>
            </div>

        </div>

    </div>

    <div class="col-lg-3 col-md-6">

        <div class="kpi-card kpi-danger">

            <div class="kpi-number">
                {{ $sinAsignar }}
            </div>

            <div class="kpi-title">
                SIN ASIGNAR
            </div>

            <div class="kpi-icon text-danger">
                <i class="fas fa-user-slash"></i>
            </div>

        </div>

    </div>

</div>

<!-- =========================================
PIPELINE
========================================= -->

<div class="erp-card">

    <div class="erp-title">

        <i class="fas fa-diagram-project text-danger"></i>

        Pipeline Operacional

    </div>

    <div class="pipeline">

        <div class="pipeline-item">

            <h2 class="text-warning">

                {{ $pipeline['revision'] }}

            </h2>

            <span>
                Revisión
            </span>

        </div>

        <div class="pipeline-item">

            <h2 class="text-info">

                {{ $pipeline['laboratorio'] }}

            </h2>

            <span>
                Laboratorio
            </span>

        </div>

        <div class="pipeline-item">

            <h2 class="text-secondary">

                {{ $pipeline['proceso'] }}

            </h2>

            <span>
                Pruebas
            </span>

        </div>

        <div class="pipeline-item">

            <h2 style="color:#7A0014;">

                {{ $pipeline['validacion'] }}

            </h2>

            <span>
                Validación
            </span>

        </div>

        <div class="pipeline-item">

            <h2 class="text-success">

                {{ $pipeline['emitidos'] }}

            </h2>

            <span>
                Emitidos
            </span>

        </div>

    </div>

</div>

<!-- =========================================
ALERTAS
========================================= -->

<div class="erp-card">

    <div class="erp-title">

        <i class="fas fa-triangle-exclamation text-warning"></i>

        Próximos a Emisión

    </div>

    @forelse($alertas as $servicio)

        @php

            $dias = intval(
                now()->diffInDays(
                    $servicio->fecha_emision,
                    false
                )
            );

        @endphp

        <div class="alerta-card

            @if($dias <= 3 && $dias >= 0)
                alerta-danger
            @endif

            @if($dias > 3)
                alerta-warning
            @endif

            @if($dias < 0)
                alerta-dark
            @endif

        ">

            <div class="row align-items-center">

                <div class="col-md-2">

                    <strong style="
                        font-size:22px;
                    ">

                        {{ $servicio->no_servicio }}

                    </strong>

                </div>

                <div class="col-md-4">

                    {{ $servicio->cliente }}

                </div>

                <div class="col-md-3">

                    {{ $servicio->fecha_emision }}

                </div>

                <div class="col-md-3 text-md-end">

                    @if($dias < 0)

                        <span class="badge-custom badge-dark-custom">

                            Vencido

                        </span>

                    @elseif($dias == 0)

                        <span class="badge-custom badge-primary-custom">

                            Hoy

                        </span>

                    @elseif($dias == 1)

                        <span class="badge-custom badge-danger-custom">

                            1 día

                        </span>

                    @elseif($dias <= 3)

                        <span class="badge-custom badge-danger-custom">

                            {{ abs($dias) }} días

                        </span>

                    @else

                        <span class="badge-custom badge-warning-custom">

                            {{ abs($dias) }} días

                        </span>

                    @endif

                </div>

            </div>

        </div>

    @empty

        <div class="alert alert-success">

            No existen servicios próximos a emisión.

        </div>

    @endforelse

</div>

<!-- =========================================
BOTTOM GRID
========================================= -->

<div class="row">

    <!-- ACTIVIDAD -->

    <div class="col-lg-6">

        <div class="erp-card">

            <div class="erp-title">

                <i class="fas fa-clock-rotate-left text-danger"></i>

                Servicios Recientes

            </div>

            @foreach($recientes as $servicio)

                <div class="activity-item">

                    <div class="activity-dot"></div>

                    <div>

                        <strong>

                            {{ $servicio->cliente }}

                        </strong>

                        <br>

                        <small>

                            {{ $servicio->producto }}

                            ·

                            {{ $servicio->estatus }}

                        </small>

                    </div>

                </div>

            @endforeach

        </div>

    </div>

    <!-- EMPRESAS -->

    <div class="col-lg-6">

        <div class="erp-card">

            <div class="erp-title">

                <i class="fas fa-building text-info"></i>

                Top Empresas

            </div>

            <table class="erp-table">

                @foreach($topEmpresas as $empresa)

                    <tr>

                        <td>

                            <strong>

                                {{ $empresa->cliente }}

                            </strong>

                        </td>

                        <td class="text-end">

                            {{ $empresa->total }}

                        </td>

                    </tr>

                @endforeach

            </table>

        </div>

    </div>

</div>

<!-- =========================================
BOTTOM GRID 2
========================================= -->

<div class="row">

    <!-- PRODUCTOS -->

    <div class="col-lg-6">

        <div class="erp-card">

            <div class="erp-title">

                <i class="fas fa-box text-warning"></i>

                Productos Más Certificados

            </div>

            <table class="erp-table">

                @foreach($topProductos as $producto)

                    <tr>

                        <td>

                            <strong>

                                {{ $producto->producto }}

                            </strong>

                        </td>

                        <td class="text-end">

                            {{ $producto->total }}

                        </td>

                    </tr>

                @endforeach

            </table>

        </div>

    </div>

    <!-- EJECUTIVOS -->

    <div class="col-lg-6">

        <div class="erp-card">

            <div class="erp-title">

                <i class="fas fa-users text-success"></i>

                Productividad Ejecutivos

            </div>

            @foreach($ejecutivos as $ejecutivo)

                <div class="mb-4">

                    <div class="d-flex justify-content-between mb-2">

                        <strong>

                            {{ $ejecutivo->name }}

                        </strong>

                        <span>

                            {{ $ejecutivo->total_servicios }}
                            servicios

                        </span>

                    </div>

                    <div class="progress">

                        @php

                            $porcentaje =
                            min(
                                ($ejecutivo->total_servicios * 10),
                                100
                            );

                        @endphp

                        <div class="progress-bar bg-danger"
                             style="width:{{ $porcentaje }}%">

                        </div>

                    </div>

                </div>

            @endforeach

        </div>

    </div>

</div>

@endsection