{{-- resources/views/dashboard/reportes.blade.php --}}
@extends('layouts.app')

@section('title', 'Reportes')

@push('styles')
<style>
    .report-card {
        transition: all 0.3s;
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .report-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    .card-header-custom {
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 600;
    }
    .list-group-item-action-custom {
        transition: all 0.2s;
        padding: 10px 16px;
        font-size: 13px;
    }
    .list-group-item-action-custom:hover {
        background-color: var(--bs-gray-100);
        padding-left: 20px;
    }
    .card-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-right: 8px;
    }
</style>
@endpush

@section('content')
<div class="content">
    {{-- Cabecera --}}
    <div class="d-flex align-items-center gap-2 mb-4">
        <div>
            <h1 class="fw-bold mb-0 fs-4">
                <i class="fa fa-chart-bar me-2 text-warning"></i>Reportes
            </h1>
            <p class="text-muted mt-1 mb-0 fs-sm">Generación de reportes del sistema</p>
        </div>
    </div>

    <div class="row g-3">

        {{-- Reportes de Contratos --}}
        <div class="col-md-6 col-xl-4">
            <div class="card report-card h-100">
                <div class="card-header-custom bg-primary text-white">
                    <i class="fa fa-file-contract me-2"></i>Reportes de Contratos
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('reportes.contratos.form') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-file-pdf me-2 text-danger"></i>Reporte de Contratos
                    </a>
                    <a href="{{ route('reportes.saldo-por-cobrar.form') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-dollar-sign me-2 text-warning"></i>Estado de Cuentas
                    </a>
                </div>
            </div>
        </div>

        {{-- Reportes de Lotes --}}
        <div class="col-md-6 col-xl-4">
            <div class="card report-card h-100">
                <div class="card-header-custom bg-success text-white">
                    <i class="fa fa-th-large me-2"></i>Reportes de Lotes
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('reportes.lotes-por-estado.form') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-file-pdf me-2 text-danger"></i>Lotes por Estado
                    </a>
                    <a href="{{ route('reportes.estados-sector') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-map-marker-alt me-2 text-info"></i>Estados de Lotes por Sector
                    </a>
                </div>
            </div>
        </div>

        {{-- Reportes de Trámites --}}
        <div class="col-md-6 col-xl-4">
            <div class="card report-card h-100">
                <div class="card-header-custom bg-danger text-white">
                    <i class="fa fa-clipboard-list me-2"></i>Reportes de Trámites
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('reportes.orden-tramite.form') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-file-pdf me-2 text-danger"></i>Orden de Trámite
                    </a>
                    <a href="{{ route('reportes.notas-entrega') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-file-pdf me-2 text-danger"></i>Notas de Entrega
                    </a>
                </div>
            </div>
        </div>

        {{-- Reportes de Cobranza --}}
        <div class="col-md-6 col-xl-4">
            <div class="card report-card h-100">
                <div class="card-header-custom bg-info text-white">
                    <i class="fa fa-dollar-sign me-2"></i>Reportes de Cobranza
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('reportes.reporte-diario.form') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-file-excel me-2 text-success"></i>Reporte Diario de Caja
                    </a>
                    <a href="{{ route('reportes.recibos-anulados') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-ban me-2 text-danger"></i>Recibos Anulados
                    </a>
                </div>
            </div>
        </div>

        {{-- Reportes de Gestión --}}
        <div class="col-md-6 col-xl-4">
            <div class="card report-card h-100">
                <div class="card-header-custom bg-secondary text-white">
                    <i class="fa fa-users-cog me-2"></i>Reportes de Gestión
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('reportes.seguimiento.form') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-file-pdf me-2 text-danger"></i>Seguimiento de Usuarios
                    </a>
                    <a href="{{ route('reportes.resumen-situacion') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-chart-pie me-2 text-warning"></i>Resumen de Situación
                    </a>
                </div>
            </div>
        </div>

        {{-- Listados del Sistema --}}
        <div class="col-md-6 col-xl-4">
            <div class="card report-card h-100">
                <div class="card-header-custom bg-dark text-white">
                    <i class="fa fa-list me-2"></i>Listados del Sistema
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ route('reportes.clientes') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-users me-2 text-primary"></i>Listado de Clientes
                    </a>
                    <a href="{{ route('reportes.urbanizaciones') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-city me-2 text-success"></i>Listado de Urbanizaciones
                    </a>
                    <a href="{{ route('reportes.distritos') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-map-marker-alt me-2 text-info"></i>Listado de Distritos
                    </a>
                    <a href="{{ route('reportes.cobradores') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-user-tie me-2 text-warning"></i>Listado de Cobradores
                    </a>
                    <a href="{{ route('reportes.vendedores') }}" class="list-group-item list-group-item-action list-group-item-action-custom">
                        <i class="fa fa-chalkboard-user me-2 text-secondary"></i>Listado de Vendedores
                    </a>
                </div>
            </div>
        </div>

    </div>

    {{-- Footer --}}
    <div class="text-center text-muted fs-sm py-3 mt-3">
        <i class="fa fa-database me-1"></i> Base: {{ session('ubicacion') === 'cosmos79' ? 'Cosmos 79' : 'Tarapacá' }}
        <span class="mx-2">•</span>
        <i class="fa fa-calendar me-1"></i> {{ session('fecha_sistema', now('America/La_Paz')->format('d/m/Y')) }}
    </div>
</div>
@endsection