@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">Inmuebles</h4>
    <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#create"> <!-- Cambiando el tamaño del botón a md y llamando al modal -->
        Agregar Inmueble
    </button>
</div>
<div class="row">
    @foreach($inmueble as $INMUEBLE)
    <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-5">
        <div class="card card-custom-size">
            <img src="{{ asset($INMUEBLE->imagen_inmueble) }}" class="card-img-top" alt="{{ $INMUEBLE->direccion }}">
            <div class="card-body p-2">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="card-text mb-0">{{$INMUEBLE->direccion}}</h6>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary btn-sm modern-button" data-toggle="modal" data-target="#view{{$INMUEBLE->id}}">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm modern-button" data-toggle="modal" data-target="#update{{$INMUEBLE->id}}">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('inmueble.view')
    @include('inmueble.update')
    @endforeach
</div>
@include('inmueble.create')
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
    .modern-button {
        transition: all 0.3s ease;
    }

    .modern-button:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .card {
        transition: transform 0.2s;
        width: 100%;
        height: 100%;
    }

    .card-custom-size {
        width: 100%;
        height: 250px; /* Adjust height as needed */
    }

    .card-img-top {
        width: 100%;
        height: 200px; /* Adjust height as needed */
        object-fit: cover;
    }

    .card:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .card-text {
        font-size: 0.9rem;
    }

    .btn-group {
        display: flex;
        gap: 0.5rem;
    }

    .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 */
    }
</style>
@stop

@section('js')
<script>
</script>
@stop