@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
@stop

@section('content')
<br>
<div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">Pabellones</h4>
    <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#create">
        Agregar Pabellon
    </button>
</div>

<div class="row">
    @foreach($pabellon as $PABELLON)
    <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5">
    
            <div class="card card-custom-size">
                <img src="{{ asset($PABELLON->imagen_Pabellon) }}" class="card-img-top" alt="{{ $PABELLON->nombre_pabellon }}">
                <div class="card-body">
                    <h5 class="card-title text-center font-weight-bold">{{ $PABELLON->nombre_pabellon }}</h5>
                    <h3 class="card-title text-center font-weight-bold">LADO: "{{ $PABELLON->lado_pabellon }}"</h3>
                    
                    <div class="btn-group mt-2"> <!-- Added mt-2 class for margin top -->
                        <a href="{{ route('cinerarios', ['pabellon_id' => $PABELLON->id]) }}" class="btn btn-outline-secondary btn-sm modern-button">
                            <i class="fas fa-church"></i>
                        </button>
                        <a href="{{ route('nichos', ['pabellon_id' => $PABELLON->id]) }}" class="btn btn-outline-secondary btn-sm modern-button">
                            <i class="fas fa-fw fa-monument"></i>
                        </a>
                    </div>
                </div>
            </div>
        </a>
    </div>
    @endforeach
</div>
@include('pabellones.create')

@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    <style>
        .card-title {
            color: black; /* Text color */
        }

        .card-custom-size {
            width: 100%;
            height: 330px; /* Adjust height as needed */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-custom-size .card-img-top {
            width: 100%;
            height: 200px; /* Adjust height as needed */
            object-fit: cover; /* Ensures the image covers the entire area without distortion */
        }

        .btn-group {
            display: flex;
            gap: 0.5rem;
            margin-top: auto; /* Ensure the button group is at the bottom */
        }

        .btn-outline-primary, .btn-outline-secondary {
            border-radius: 50%;
            padding: 0.25rem 0.5rem;
        }

        .btn-outline-primary:hover {
            background-color: #007bff;
            color: #fff;
        }

        .btn-outline-secondary:hover {
            background-color: #6c757d;
            color: #fff;
        }

        /* Estilo para el botón "Agregar Inmueble" */
        .btn-primary {
            background-color: #4CAF50; /* Cambia el color de fondo */
            border-color: #4CAF50; /* Cambia el color del borde */
        }

        .btn-primary:hover {
            background-color: #45a049; /* Cambia el color de fondo al pasar el ratón */
            border-color: #45a049; /* Cambia el color del borde al pasar el ratón */
        }
        
        /* Estilo adicional para centrar el h3 verticalmente */
        .card-body {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
@stop

@section('js')
    <script> console.log("Hi, I'm using the Laravel-AdminLTE package!"); </script>
@stop