@extends('layouts.dashboardnew')

@section('content')


@php
    $totalTickets    = ($datos['abiertos'] ?? 0) + ($datos['cerrados'] ?? 0);
    $tasaResolucion  = $totalTickets > 0 ? round((($datos['cerrados'] ?? 0) / $totalTickets) * 100, 1) : 0;
@endphp

<div class="row g-3 mb-4">

    {{-- Tickets abiertos --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-info-subtle text-info-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-inbox fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-info-subtle text-info-emphasis fw-semibold">
                        <i class="fa-solid fa-circle-dot me-1"></i> En proceso
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Tickets abiertos</p>
                <div class="d-flex align-items-end justify-content-between">
                    <h3 class="fw-bold mb-0">{{ number_format($datos['abiertos']) }}</h3>
                    <div id="ticket_abiertos" style="width:200px;height:70px;"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tickets cerrados --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-success-subtle text-success-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-circle-check fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-success-subtle text-success-emphasis fw-semibold">
                        <i class="fa-solid fa-check me-1"></i> Resueltos
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Tickets cerrados</p>
                <div class="d-flex align-items-end justify-content-between">
                    <h3 class="fw-bold mb-0">{{ number_format($datos['cerrados']) }}</h3>
                    <div id="ticket_cerrados" style="width:200px;height:70px;"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tickets de hoy --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-warning-subtle text-warning-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-regular fa-clock fs-5"></i>
                    </div>
                    <span class="badge rounded-pill bg-warning-subtle text-warning-emphasis fw-semibold">
                        <i class="fa-solid fa-bolt me-1"></i> Hoy
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Creados hoy</p>
                <div class="d-flex align-items-end justify-content-between">
                    <h3 class="fw-bold mb-0">{{ number_format($datos['hoy']) }}</h3>
                    <div id="ticket_hoy" style="width:200px;height:70px;"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tasa de resolución --}}
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-body p-4">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div class="d-inline-flex align-items-center justify-content-center bg-primary-subtle text-primary-emphasis rounded-3" style="width:48px;height:48px;">
                        <i class="fa-solid fa-chart-line fs-5"></i>
                    </div>
                    <span class="badge rounded-pill {{ $tasaResolucion >= 70 ? 'bg-success-subtle text-success-emphasis' : ($tasaResolucion >= 40 ? 'bg-warning-subtle text-warning-emphasis' : 'bg-danger-subtle text-danger-emphasis') }} fw-semibold">
                        <i class="fa-solid {{ $tasaResolucion >= 70 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down' }} me-1"></i>
                        {{ $tasaResolucion >= 70 ? 'Bueno' : ($tasaResolucion >= 40 ? 'Regular' : 'Bajo') }}
                    </span>
                </div>
                <p class="text-muted text-uppercase small fw-semibold mb-1" style="letter-spacing:.5px;">Tasa de resolución</p>
                <h3 class="fw-bold mb-2">{{ $tasaResolucion }}%</h3>
                <div class="progress" style="height:6px;">
                    <div class="progress-bar bg-info" role="progressbar"
                         style="width:{{ $tasaResolucion }}%;"
                         aria-valuenow="{{ $tasaResolucion }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>

</div>



<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="fa-solid fa-chart-column text-info me-1"></i> Tickets anuales
                </h5>
                <p class="text-muted small mb-0">Evolución mensual de tickets en el año seleccionado</p>
            </div>

            <div class="d-flex align-items-center gap-2">
                <label class="small text-muted fw-semibold mb-0 me-1">Año:</label>
                <select id="yearFilter" class="form-select form-select-sm" style="width:auto;">
                    @for($i=0; $i<5; $i++)
                        <option value="{{ (date('Y') - $i) }}">{{ (date('Y') - $i) }}</option>
                    @endfor
                </select>
            </div>
        </div>

        <div id="chartdiv" data-url="{{ route('chart.panel.ticket') }}" style="width:100%;height:450px;"></div>

    </div>
</div>



<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-4">

        <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
                <h5 class="fw-bold mb-1">
                    <i class="fa-solid fa-tags text-info me-1"></i> Tipos de ticket
                </h5>
                <p class="text-muted small mb-0">Distribución por categoría</p>
            </div>
            <span class="badge bg-info-subtle text-info-emphasis rounded-pill px-3 py-2 fw-semibold">
                {{ count($datos['array_datos']) }} categorías
            </span>
        </div>

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

            {{-- Lista de tipos con barras de progreso --}}
            <div class="col-lg-5 order-lg-1 order-2">
                @php
                    $totalTipos = collect($datos['array_datos'])->sum('total');
                @endphp

                @forelse($datos['array_datos'] as $array)
                    @php
                        $pct = $totalTipos > 0 ? round(($array['total'] / $totalTipos) * 100, 1) : 0;
                    @endphp
                    <div class="mb-3 {{ !$loop->last ? 'pb-3 border-bottom' : '' }}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="d-flex align-items-center gap-2 min-w-0">
                                <span class="rounded-circle flex-shrink-0" style="width:12px;height:12px;background-color:{{ $array['color'] }};"></span>
                                <span class="fw-semibold text-truncate">{{ $array['tipo'] }}</span>
                            </div>
                            <div class="d-flex align-items-center gap-2 flex-shrink-0 ms-2">
                                <span class="fw-bold">{{ $array['total'] }}</span>
                                <small class="text-muted">({{ $pct }}%)</small>
                            </div>
                        </div>
                        <div class="progress" style="height:6px;background:#f0f4f8;">
                            <div class="progress-bar" role="progressbar"
                                 style="width:{{ $pct }}%;background-color:{{ $array['color'] }};"
                                 aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4">
                        <i class="fa-solid fa-tags text-muted fs-1 mb-2"></i>
                        <p class="text-muted mb-0">Sin tipos registrados</p>
                    </div>
                @endforelse
            </div>


            <div class="col-lg-7 order-lg-2 order-1">
                <div class="bg-light rounded-4 p-3">
                    <div id="pieChartDiv" data-url="{{ route('chart.panel.ticket-todos') }}" style="width:100%;height:340px;"></div>
                </div>
            </div>

        </div>
    </div>
</div>

 
@endsection

@push('script')

{{-- amcharts --}}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src ="{{ asset('assets/plugins/amcharts/graficas_ticket.js') }}"></script>
<script src ="{{ asset('assets/plugins/amcharts/graficas_ticket_estaticas.js') }}"></script>
@endpush