@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">

    <div class="row mb-4">
        <div class="col-12">
            <h2 class="font-weight-light text-secondary"><i class="fa fa-cash-register mr-2 text-primary"></i> Gestión de Caja y Reportes</h2>
            <p class="text-muted">Filtra y genera los documentos administrativos de la clínica.</p>
            <hr>
        </div>
    </div>

    <div class="row">
        {{-- SECCIÓN: INGRESOS Y EGRESOS --}}
        @can('caja_filtrado_gastos')
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-left-danger h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="icon-circle bg-danger text-white mr-3">
                            <i class="fa fa-arrow-down"></i>
                        </div>
                        <h4 class="card-title mb-0 text-danger font-weight-bold">GASTOS</h4>
                    </div>
                    <p class="small text-muted text-uppercase">Listado de salidas de efectivo por fecha</p>

                    <form action="{{route('caja.salidaReport')}}" method="post" class="mt-4">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="small font-weight-bold">Desde:</label>
                                <input type="date" class="form-control form-control-sm" name="desde" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="small font-weight-bold">Hasta:</label>
                                <input type="date" class="form-control form-control-sm" name="hasta" required>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-danger btn-block shadow-sm">
                            <i class="fa fa-file-pdf mr-1"></i> Generar Reporte de Gastos
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endcan

        @can('caja_filtrado_cajachica')
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-left-success h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="icon-circle bg-success text-white mr-3">
                            <i class="fa fa-wallet"></i>
                        </div>
                        <h4 class="card-title mb-0 text-success font-weight-bold">CAJA CHICA</h4>
                    </div>
                    <p class="small text-muted text-uppercase">Listado de entradas a caja chica</p>

                    <form action="{{route('caja.entradasReport')}}" method="post" class="mt-4">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label class="small font-weight-bold">Desde:</label>
                                <input type="date" class="form-control form-control-sm" name="desde" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label class="small font-weight-bold">Hasta:</label>
                                <input type="date" class="form-control form-control-sm" name="hasta" required>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success btn-block shadow-sm">
                            <i class="fa fa-file-invoice-dollar mr-1"></i> Generar Reporte Entradas
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endcan
    </div>

    @can('caja_movimientos_filtrados')
    <div class="row mb-4">
        <div class="col-12 mt-2">
            <h5 class="text-uppercase text-muted font-weight-bold small"><i class="fa fa-history mr-1"></i> Auditoría y Cuadres</h5>
            <hr>
        </div>

        {{-- SECCIÓN: CUADRES --}}
        <div class="col-md-6 mb-4">
            <div class="card h-100 border-0 shadow-sm bg-primary text-white">
                <div class="card-body d-flex flex-column justify-content-center text-center">
                    <i class="fa fa-print fa-3x mb-3 opacity-5"></i>
                    <h4 class="font-weight-bold">Cuadres del Mes</h4>
                    <p>Acceso rápido al reporte de todos los cuadres realizados en el mes actual.</p>
                    <a class="btn btn-light btn-lg font-weight-bold" href="{{route('caja.cuadreReport')}}">
                        IMPRIMIR ACTUAL
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-body">
                    <h5 class="card-title font-weight-bold"><i class="fa fa-search-plus mr-2"></i>Histórico de Cuadres</h5>
                    <form action="{{route('caja.cuadrereportFilter')}}" method="get" class="mt-3">
                        <div class="row">
                            <div class="col-6">
                                <label class="small">Año</label>
                                <select class="form-control custom-select" name="ano">
                                    @for($i = date('Y'); $i >= 2021; $i--)
                                    <option value="{{$i}}">{{$i}}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="small">Mes</label>
                                <select class="form-control custom-select" name="mes">
                                    @php $meses = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']; @endphp
                                    @foreach($meses as $key => $mes)
                                    <option value="{{$key + 1}}">{{$mes}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <button class="btn btn-outline-primary btn-block mt-3" type="submit">
                            <i class="fa fa-print"></i> Consultar Histórico
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- SECCIÓN: MOVIMIENTOS --}}
        <div class="col-md-6">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h5 class="card-title font-weight-bold"><i class="fa fa-calendar-day mr-2"></i>Movimientos por Día</h5>
                    <form action="{{route('caja.movimientos_dia')}}" method="post">
                        @csrf
                        <div class="input-group">
                            <input type="date" name="fecha" class="form-control" required>
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-dark px-4">
                                    <i class="fa fa-eye"></i>
                                </button>
                            </div>
                        </div>
                        <small class="form-text text-muted mt-2">Ver transacciones específicas de una fecha.</small>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h5 class="card-title font-weight-bold"><i class="fa fa-calendar-alt mr-2"></i>Rango de Movimientos</h5>
                    <form action="{{route('caja.moviemintentoToDates')}}" method="post">
                        @csrf
                        <div class="row">
                            <div class="col-6"><input type="date" class="form-control form-control-sm" name="inicio" required></div>
                            <div class="col-6"><input type="date" class="form-control form-control-sm" name="fin" required></div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block btn-sm mt-3">
                            <i class="fa fa-filter"></i> Filtrar Movimientos
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endcan
</div>

<style>
    .icon-circle {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .border-left-danger {
        border-left: 5px solid #e74a3b !important;
    }

    .border-left-success {
        border-left: 5px solid #1cc88a !important;
    }

    .border-left-primary {
        border-left: 5px solid #4e73df !important;
    }

    .opacity-5 {
        opacity: 0.3;
    }

    .card {
        transition: transform 0.2s;
    }

    .card:hover {
        transform: translateY(-3px);
    }
</style>
@endsection