@extends('layouts.app')

@section('titulo', 'Lista de Revisiones')
@section('contenido1')

<div class="card border-0">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title my-0 py-3 px-1">
            @yield('titulo')
        </h5>
        <a href="{{ route('revision.create') }}" class="btn btn-primary ms-auto"><i class="fa-solid fa-plus"></i> NUEVO</a>
    </div>
    <div class="card-body">


        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-light">
                    <tr class="text-center text-uppercase">
                        <th>Lugar</th>
                        <th>Fecha Finalización</th>
                        <th>Porcentaje</th>
                        <th>Completada</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    @foreach ($revisiones as $revision)
                    <tr onclick="window.location.href='{{ route('revision.show', $revision->id) }}'" style="cursor: pointer;">
                        <td>{{ $revision->lugar->nombre }}</td>
                        <td>
                            @if($revision->fecha_fin)
                                {{ \Carbon\Carbon::parse($revision->fecha_fin)->format('d/m/Y') }}
                            @else
                                <span class="text-muted">Pendiente</span>
                            @endif
                        </td>
                        <td>{{ $revision->porcentaje }}/100</td>
                        <td>@if($revision->completada) <i class='fa-solid fa-check text-success'></i> @else <i class='fa-regular fa-hourglass-half'></i>@endif</td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                <a href="{{ route('revision.monitor', $revision->id) }}" class="btn btn-sm btn-info" onclick="event.stopPropagation();" title="Abrir Monitor">
                                    <i class="fas fa-desktop"></i>
                                </a>
                                <a href="{{ route('revision.show', $revision->id) }}" class="btn btn-sm btn-primary" onclick="event.stopPropagation();">Ver</a>
                                <a href="{{ route('revision.edit', $revision->id) }}" class="btn btn-sm btn-warning" onclick="event.stopPropagation();">Editar</a>
                                <form action="{{ route('revision.destroy', $revision->id) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Estás seguro de que quieres eliminar esta revisión?')" onclick="event.stopPropagation();">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">Eliminar</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>





</div>
</div>








@endsection

@section('css')
<style>
    /* Estilos para hacer la tabla más responsive */
    .table-responsive {
        border-radius: 0.375rem;
        overflow-x: auto;
    }
    
    /* Mejorar la apariencia de los botones en dispositivos móviles */
    @media (max-width: 768px) {
        .btn-group-sm .btn {
            padding: 0.25rem 0.4rem;
            font-size: 0.75rem;
        }
        
        .btn-group-sm .btn i {
            font-size: 0.7rem;
        }
        
        /* Hacer que las columnas sean más compactas en móviles */
        .table th,
        .table td {
            padding: 0.5rem 0.25rem;
            font-size: 0.875rem;
        }
        
        /* Ocultar texto en botones pequeños en móviles */
        .btn-group-sm .btn:not(.btn-info) {
            min-width: 35px;
        }
        
        .btn-group-sm .btn:not(.btn-info) span {
            display: none;
        }
    }
    
    /* Estilos para el botón de monitor */
    .btn-info {
        background-color: #0dcaf0;
        border-color: #0dcaf0;
    }
    
    .btn-info:hover {
        background-color: #0bb5d4;
        border-color: #0bb5d4;
    }
    
    /* Mejorar el hover de las filas */
    .table tbody tr:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }
    
    /* Estilos para el estado de completada */
    .fa-check {
        color: #198754 !important;
    }
    
    .fa-hourglass-half {
        color: #fd7e14 !important;
    }
</style>
@endsection