@extends('client.layouts.app')

@section('content')
    <div class="row">
        <div class="col-md-12 mb-4">
            <h4>Bienvenido, {{ $cliente->nombre }}</h4>
            <p class="text-muted">Resumen de tu cuenta</p>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row">
        <div class="col-md-4 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="counter">${{ number_format($stats['total_facturado'], 2) }}</h2>
                            <p class="mb-0 text-muted">Total Facturado</p>
                        </div>
                        <div class="bg-primary-subtle rounded p-3">
                            <svg width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.334 2.75H7.665C4.644 2.75 2.75 4.889 2.75 7.916V16.084C2.75 19.111 4.635 21.25 7.665 21.25H16.333C19.364 21.25 21.25 19.111 21.25 16.084V7.916C21.25 4.889 19.364 2.75 16.334 2.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="counter text-danger">${{ number_format($stats['saldo_pendiente'], 2) }}</h2>
                            <p class="mb-0 text-muted">Saldo Pendiente</p>
                        </div>
                        <div class="bg-danger-subtle rounded p-3">
                            <svg width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 13C11.45 13 11 12.55 11 12V8C11 7.45 11.45 7 12 7C12.55 7 13 7.45 13 8V12C13 12.55 12.55 13 12 13ZM11 15V17H13V15H11Z" fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="counter">{{ $stats['cotizaciones_pendientes'] }}</h2>
                            <p class="mb-0 text-muted">Cotizaciones Pendientes</p>
                        </div>
                        <div class="bg-warning-subtle rounded p-3">
                            <svg width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.4" d="M16.191 2H7.81C4.77 2 3 3.78 3 6.83V17.16C3 20.26 4.77 22 7.81 22H16.191C19.28 22 21 20.26 21 17.16V6.83C21 3.78 19.28 2 16.191 2Z" fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="counter">{{ $stats['tickets_abiertos'] }}</h2>
                            <p class="mb-0 text-muted">Tickets Abiertos</p>
                        </div>
                        <div class="bg-info-subtle rounded p-3">
                            <svg width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path opacity="0.4" d="M13.7505 9.70303V7.68318C13.354 7.68318 13.0251 7.36377 13.0251 6.97859V4.57356C13.0251 4.2532 12.764 4.00049 12.4352 4.00049H5.7911C3.70213 4.00049 2 5.653 2 7.68318V10.1155C2 10.3043 2.07737 10.4828 2.21277 10.6143C2.34816 10.7449 2.53191 10.8201 2.72534 10.8201C3.46035 10.8201 4.02128 11.3274 4.02128 11.9944C4.02128 12.6905 3.45068 13.2448 2.73501 13.2533C2.33849 13.2533 2 13.5257 2 13.9203V16.3262C2 18.3555 3.70213 19.9995 5.78143 19.9995H12.4352C12.764 19.9995 13.0251 19.745 13.0251 19.4265V17.3963C13.0251 17.0027 13.354 16.6917 13.7505 16.6917V14.8701C13.354 14.8701 13.0251 14.5497 13.0251 14.1655V10.4076C13.0251 10.0224 13.354 9.70303 13.7505 9.70303Z" fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <!-- Ultimas Facturas -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title mb-0">Ultimas Facturas</h5>
                    <a href="{{ route('client.invoices.index') }}" class="btn btn-sm btn-primary">Ver todas</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>Folio</th>
                                    <th>Total</th>
                                    <th>Pendiente</th>
                                    <th>Fecha</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ultimasFacturas as $factura)
                                    <tr>
                                        <td>
                                            <a href="{{ route('client.invoices.show', $factura->id) }}">
                                                {{ $factura->folio }}
                                            </a>
                                        </td>
                                        <td>${{ number_format($factura->total, 2) }}</td>
                                        <td>
                                            @if($factura->saldo_pendiente > 0)
                                                <span class="text-danger">${{ number_format($factura->saldo_pendiente, 2) }}</span>
                                            @else
                                                <span class="badge bg-success">Pagado</span>
                                            @endif
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($factura->created_at)->format('d/m/Y') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">No hay facturas</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ultimas Cotizaciones -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title mb-0">Ultimas Cotizaciones</h5>
                    <a href="{{ route('client.quotes.index') }}" class="btn btn-sm btn-primary">Ver todas</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>Folio</th>
                                    <th>Total</th>
                                    <th>Estado</th>
                                    <th>Fecha</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ultimasCotizaciones as $cotizacion)
                                    <tr>
                                        <td>
                                            <a href="{{ route('client.quotes.show', $cotizacion->id) }}">
                                                #{{ $cotizacion->id }}
                                            </a>
                                        </td>
                                        <td>${{ number_format($cotizacion->total, 2) }}</td>
                                        <td>
                                            @if($cotizacion->autorizado)
                                                <span class="badge bg-success">Aprobada</span>
                                            @else
                                                <span class="badge bg-warning">Pendiente</span>
                                            @endif
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($cotizacion->created_at)->format('d/m/Y') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">No hay cotizaciones</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Ultimos Tickets -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5 class="card-title mb-0">Ultimos Tickets</h5>
                    <a href="{{ route('client.tickets.index') }}" class="btn btn-sm btn-primary">Ver todos</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Titulo</th>
                                    <th>Prioridad</th>
                                    <th>Estado</th>
                                    <th>Fecha</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ultimosTickets as $ticket)
                                    <tr>
                                        <td>
                                            <a href="{{ route('client.tickets.show', $ticket->id) }}">
                                                #{{ $ticket->id }}
                                            </a>
                                        </td>
                                        <td>{{ Str::limit($ticket->titulo, 40) }}</td>
                                        <td>{!! $ticket->prioridad_badge !!}</td>
                                        <td>{!! $ticket->estatus_badge !!}</td>
                                        <td>{{ $ticket->created_at->format('d/m/Y') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">No hay tickets</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection