<div>

<div class="mb-4">

@foreach($tiposDocumentos as $tipo)

    @php
        $doc = $documentosPorTipo[$tipo->slug] ?? null;
    @endphp

    <div class="mb-2">

        @if($doc)

            @if($doc->status == 1)
                <div class="alert alert-success d-sm-flex align-items-center justify-content-between">
                    <strong>{{ strtoupper($tipo->name) }} : Validado</strong>

                    <button
                    onclick="verDocumento('{{ url('documento/ver/'.$doc->id) }}', {{ $doc->id }})"
                    class="btn btn-sm btn-primary mt-2">
                    <i class="fa-duotone fa-solid fa-eye"></i> Ver documento
                    </button>
                </div>
            @elseif($doc->status == 2)
                <div class="alert alert-danger">
                    <strong>{{ strtoupper($tipo->name) }} : Rechazado</strong>
                </div>

            @else
                <div class="alert alert-warning d-sm-flex align-items-center justify-content-between" >

                    <strong>{{ strtoupper($tipo->name) }} : Pendiente de revisión</strong>

                    <button
                    onclick="verDocumento('{{ url('documento/ver/'.$doc->id) }}', {{ $doc->id }})"
                    class="btn btn-sm btn-primary mt-2">
                    <i class="fa-duotone fa-solid fa-eye"></i> Ver documento
                    </button>

                </div>
            @endif

        @else
            <div class="alert alert-danger">
                <strong>{{ strtoupper($tipo->name) }} : Faltante</strong>
            </div>
        @endif

    </div>

@endforeach

</div>

<div wire:ignore.self
     class="modal fade"
     id="exampleModal"
     tabindex="-1"
     role="dialog"
     data-backdrop="static"
     data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Carga de documentos</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
@php
$pendientes = $tiposDocumentos->filter(function($tipo) {
    $doc = $this->documentosPorTipo[$tipo->slug] ?? null;
    return !$doc || $doc->status == 2;
});
@endphp

@if($pendientes->isEmpty())
    <div class="alert alert-success">
        ✔ Todos los documentos están validados
    </div>
@endif

<form wire:submit.prevent="store" enctype="multipart/form-data">

@foreach($tiposDocumentos as $tipo)

    @php
        $doc = $documentosPorTipo[$tipo->slug] ?? null;
    @endphp

    @if(!$doc || $doc->status == 2)

    <div class="mb-4">

        <label class="fw-bold">{{ $tipo->name }}</label>

        @if($doc && $doc->status == 2)
            <span class="badge bg-danger ms-2">Rechazado</span>
        @endif

        <div class="d-flex align-items-center gap-2 mt-2">

            {{-- input oculto --}}
            <input type="file"
                id="{{ $tipo->slug }}"
                wire:model="archivos.{{ $tipo->slug }}"
                class="d-none">

            {{-- botón bonito --}}
            <label for="{{ $tipo->slug }}" class="btn btn-outline-primary btn-sm">
                📄 Seleccionar archivo
            </label>

            {{-- nombre dinámico --}}
            <span class="text-muted small">
                @if(isset($archivos[$tipo->slug]))
                    &nbsp;&nbsp;&nbsp; {{ $archivos[$tipo->slug]->getClientOriginalName() }}
                @else

                @endif
            </span>

        </div>

    </div>

    @endif

@endforeach

<button class="btn btn-primary" type="submit">Subir</button>

</form>

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


</div>
