@props(['id' => null, 'name' => null, 'title' => '', 'size' => 'md', 'formAction' => null])

{{-- Estructura Modal Bootstrap 4 --}}
@php($modalId = $id ?? $name ?? 'modal-' . uniqid())
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-{{ $size }} modal-dialog-centered" role="document">
        <div class="modal-content">
            
            {{-- Header --}}
            <div class="modal-header bg-light">
                <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>

            {{-- Si pasamos 'formAction', el modal actúa como un formulario --}}
            @if($formAction)
                <form action="{{ $formAction }}" method="POST" enctype="multipart/form-data">
                    @csrf
            @endif

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

                <div class="modal-footer bg-white">
                    {{-- Si definimos un slot 'footer', usamos eso. Si no, botones por defecto --}}
                    @if(isset($footer))
                        {{ $footer }}
                    @else
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        @if($formAction)
                            <button type="submit" class="btn btn-primary shadow-sm">Guardar Cambios</button>
                        @endif
                    @endif
                </div>

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

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