@props([
    'id',
    'title',
    'size' => 'md',
    'formAction' => null,
    'formMethod' => 'POST',
    'closeText' => 'Cerrar',
    'submitText' => 'Guardar Cambios',
    'submitColor' => 'primary',
    'static' => false,
    'blur' => true, // Nuevo: Efecto blur en el fondo
])

@php
    $realMethod = strtoupper($formMethod);
    $htmlMethod = in_array($realMethod, ['PUT', 'PATCH', 'DELETE']) ? 'POST' : $realMethod;
    $needsMethodSpoofing = $htmlMethod !== $realMethod;
    $backdropClass = $blur ? 'modal-backdrop-blur' : '';
@endphp

<div class="modal fade {{ $backdropClass }}" id="{{ $id }}" tabindex="-1" role="dialog" aria-hidden="true"
     @if($static) data-backdrop="static" data-keyboard="false" @endif>
    <div class="modal-dialog modal-{{ $size }} modal-dialog-centered" role="document">
        <div class="modal-content shadow-lg border-0">
            
            {{-- Header --}}
            <div class="modal-header bg-light border-bottom-0">
                <h5 class="modal-title text-dark font-weight-bold">{{ $title }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            {{-- Wrapper de formulario condicional --}}
            @if($formAction)
                <form action="{{ $formAction }}" method="{{ $htmlMethod }}" enctype="multipart/form-data">
                    @csrf
                    @if($needsMethodSpoofing)
                        @method($realMethod)
                    @endif
            @endif

                <div class="modal-body p-4">
                    {{ $slot }}
                </div>

                <div class="modal-footer bg-light border-top-0">
                    @if(isset($footer))
                        {{ $footer }}
                    @else
                        <button type="button" class="btn btn-outline-secondary font-weight-bold" data-dismiss="modal">{{ $closeText }}</button>
                        @if($formAction)
                            <button type="submit" class="btn btn-{{ $submitColor }} shadow-sm font-weight-bold px-4">{{ $submitText }}</button>
                        @endif
                    @endif
                </div>

            @if($formAction)
                </form>
            @endif

        </div>
    </div>
</div>

@pushonce('css')
<style>
    /* Efecto Blur para el backdrop (Requiere que el CSS se cargue globalmente,
       pero como el backdrop se inserta al final del body, esto funciona visualmente
       siempre que la clase esté presente en el DOM o se aplique genericamente) 
       
       Bootstrap 4 pone el .modal-backdrop al final del body. 
       No podemos inyectar clases al backdrop fácilmente sin JS.
       Así que usaremos un override global sutil si se usa este componente.
    */
    .modal-backdrop.show {
        opacity: 0.6; /* Un poco más oscuro */
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
</style>
@endpushonce