@extends('layouts.app')

@section('title', 'Portal del Cliente')

@section('content')
<div class="container-fluid p-0">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold text-gradient"><i class="fa-solid fa-briefcase text-primary me-2"></i> Portal del Cliente</h2>
            <p class="text-muted">Bienvenido, {{ $cliente->nombre_completo }}. Aquí puede realizar el seguimiento en tiempo real de sus causas legales.</p>
        </div>
    </div>

    <!-- Metrics row -->
    <div class="row g-3 mb-4">
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 bg-white p-3 shadow-sm text-center">
                <h6 class="text-muted fw-semibold">Mis Causas Activas</h6>
                <h3 class="fw-bold mb-0 text-primary">{{ $expedientes->whereIn('estado', ['Nuevo', 'En Proceso', 'En Audiencia', 'En Apelación'])->count() }}</h3>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 bg-white p-3 shadow-sm text-center">
                <h6 class="text-muted fw-semibold">Causas Concluidas</h6>
                <h3 class="fw-bold mb-0 text-success">{{ $expedientes->whereIn('estado', ['Archivado', 'Ganado', 'Perdido'])->count() }}</h3>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 bg-white p-3 shadow-sm text-center">
                <h6 class="text-muted fw-semibold">Próximas Audiencias</h6>
                <h3 class="fw-bold mb-0 text-gold" style="color: #C9A227;">{{ $audiencias->count() }}</h3>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card border-0 bg-white p-3 shadow-sm text-center">
                <h6 class="text-muted fw-semibold">Documentos Disponibles</h6>
                <h3 class="fw-bold mb-0 text-info">{{ $documentos->count() }}</h3>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Cases List -->
        <div class="col-12 col-lg-8">
            <div class="card border-0 bg-white p-4 shadow-sm h-100">
                <h5 class="fw-bold mb-3"><i class="fa-solid fa-list-check text-primary me-2"></i> Estado de mis Causas</h5>
                <hr>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>Número de Expediente</th>
                                <th>Materia / Proceso</th>
                                <th>Abogado Asignado</th>
                                <th>Juzgado</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($expedientes as $exp)
                                <tr>
                                    <td>
                                        <span class="fw-bold text-dark">{{ $exp->numero_expediente }}</span>
                                        <div class="small text-muted">Código: {{ $exp->codigo_interno }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $exp->materia }}</div>
                                        <div class="small text-muted">{{ $exp->tipo_proceso }}</div>
                                    </td>
                                    <td>{{ $exp->abogados->isNotEmpty() ? $exp->abogados->pluck('nombre_completo')->join(', ') : 'No asignado' }}</td>
                                    <td>{{ $exp->juzgado?->nombre ?? 'No asignado' }}</td>
                                    <td>
                                        <span class="badge py-1.5 px-3 rounded-pill 
                                            @if($exp->estado === 'Nuevo') bg-info-subtle text-info
                                            @elseif($exp->estado === 'En Proceso') bg-primary-subtle text-primary
                                            @elseif($exp->estado === 'En Audiencia') badge-gold
                                            @elseif($exp->estado === 'Ganado') bg-success-subtle text-success
                                            @elseif($exp->estado === 'Perdido') bg-danger-subtle text-danger
                                            @else bg-secondary-subtle text-secondary
                                            @endif">
                                            {{ $exp->estado }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">
                                        No hay causas judiciales asociadas a su cuenta.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Sidebar events & documents -->
        <div class="col-12 col-lg-4">
            <!-- Events -->
            <div class="card border-0 bg-white p-4 shadow-sm mb-4">
                <h5 class="fw-bold mb-3"><i class="fa-regular fa-calendar-days text-primary me-2"></i> Próximas Audiencias</h5>
                <hr>
                <div class="list-group list-group-flush">
                    @forelse($audiencias as $aud)
                        <div class="list-group-item px-0 border-0 mb-3 bg-transparent">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="badge bg-light text-dark">{{ $aud->fecha->format('d-m-Y') }} {{ \Carbon\Carbon::parse($aud->hora)->format('H:i') }}</span>
                                <span class="badge bg-primary">{{ $aud->tipo_actividad }}</span>
                            </div>
                            <h6 class="fw-bold mb-1">{{ $aud->expediente->numero_expediente }}</h6>
                            <p class="small text-muted mb-0">{{ $aud->descripcion }}</p>
                        </div>
                    @empty
                        <p class="text-center text-muted small py-3">No hay audiencias programadas próximamente.</p>
                    @endforelse
                </div>
            </div>

            <!-- Documents -->
            <div class="card border-0 bg-white p-4 shadow-sm">
                <h5 class="fw-bold mb-3"><i class="fa-solid fa-file-arrow-down text-primary me-2"></i> Documentos Autorizados</h5>
                <hr>
                <div class="list-group list-group-flush">
                    @forelse($documentos as $doc)
                        <div class="list-group-item px-0 d-flex justify-content-between align-items-center bg-transparent border-bottom">
                            <div>
                                <h6 class="fw-bold mb-0 small">{{ $doc->nombre }}</h6>
                                <span class="small text-muted" style="font-size: 0.75rem;">Expediente: {{ $doc->expediente->numero_expediente }}</span>
                            </div>
                            <div class="d-flex gap-1">
                                @if(Str::endsWith($doc->ruta_archivo, '.pdf'))
                                    <a href="{{ route('documentos.preview', $doc->id) }}" target="_blank" class="btn btn-sm btn-light p-1.5 rounded-circle" title="Previsualizar PDF"><i class="fa-regular fa-eye text-info"></i></a>
                                @endif
                                <a href="{{ route('documentos.download', $doc->id) }}" class="btn btn-sm btn-light p-1.5 rounded-circle" title="Descargar"><i class="fa-solid fa-download text-success"></i></a>
                            </div>
                        </div>
                    @empty
                        <p class="text-center text-muted small py-3">No hay documentos autorizados para descarga aún.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
@endsection