@props([
    'label',
    'name',
    'file',
    'estatus',
    'estatusText',
    'claseEstatus',
    'cargarClass',
    'previewVisible',
    'route',
    'aula'
])

<div class="col-lg-6 mb-3 col-md-6">

    {{-- LABEL --}}
    <label class="form-label {{ $cargarClass }}">{{ $label }} (PDF)*</label>

    {{-- ESTATUS --}}
    <div class="{{ $claseEstatus }}" id="div{{ $name }}Estatus">
        <strong class="me-2" id="msg{{ $name }}">
            {{ $estatusText }}
        </strong>
    </div>

    {{-- FORMULARIO --}}
      @puede('Aulas', 'alta_aula')
    <form class="d-flex add-{{ strtolower($name) }} {{ $cargarClass }}"
          action="{{ route($route) }}"
          method="POST"
          enctype="multipart/form-data">

        @csrf

        <input class="form-control"
               type="file"
               name="file{{ $name }}"
               accept="application/pdf"
               required
               {{ $estatus == 1 ? 'disabled' : '' }}>

        <button type="submit"
                class="btn btn-success w-50 ms-3 {{ $cargarClass }}">
            Subir
        </button>

        <input type="hidden" name="id_aula" value="{{ $aula->aul_id }}">
        <input type="hidden" name="clave_aula" value="{{ $aula->aul_clave_registro }}">
        <input type="hidden" name="id_unidad" value="{{ $aula->aul_unidad }}">
    </form>
    @endpuede

    {{-- PREVIEW --}}
    <div class="accordion-item mt-2 {{ $previewVisible ? '' : 'd-none' }}">
        <h2 class="accordion-header accordion-header-primary">
            <button class="accordion-button btn light btn-primary collapsed"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#acc{{ $name }}">
                <span class="accordion-header-text">
                    {{ $label }}
                </span>
            </button>
        </h2>

        <div id="acc{{ $name }}"
             class="accordion-collapse collapse"
             data-bs-parent="#accordion-six">

            <div class="accordion-body" id="preview{{ $name }}">
                <iframe src="{{ asset($file) }}" width="100%" height="800px"></iframe>
            </div>
        </div>
    </div>


    {{-- VALIDAR / RECHAZAR --}}
    @puede('Aulas', 'rechazar_aula')
        <div class="row justify-content-center mt-2 gap-3 {{ $estatus == 1 ? '' : 'd-none' }}">
            <button class="btn btn-success col-lg-5"
                    data-bs-toggle="modal"
                    data-bs-target="#autorizar_documento"
                    type="button"
                    data-nombre="{{ strtolower($label) }}"
                    data-tipo="{{ $name }}">
                Validar
            </button>

            <button class="btn btn-danger col-lg-5" 
            type="button" data-bs-toggle="modal"                                                                
            data-bs-target="#rechazar_documento"
            data-nombre="el Reporte Final"                                                                  
            data-tipo="ReporteFinal"
            >
                Rechazar
            </button>
        </div>
    @endpuede

    <div id="message{{ $name }}" class="text-danger"></div>
</div>