@extends('adminlte::page')
@section('plugins.Toastr', true)
@section('content_header')
    <a class="btn btn-dark btn" href="javascript:history.back()"><i class="fas fa-solid fa-arrow-left"></i> REGRESAR</a>
@stop
@section('content')
    <div class="container-fluid">
        <br>
        <div class="container mt-4">
        </div>
        <div class="card-header">
            <h1 class="card-title"></h1>
        </div>
        @php
            // Recuperar la etapa con orden_etapa = 4
            $etapa4 = $etapas->firstWhere('orden_etapa', 4);
        @endphp
        <div class="card card-primary">
            <ul class="nav nav-tabs mb-4" id="etapasTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="detallesSolicitud-tab" data-toggle="tab" href="#detallesSolicitud"
                        role="tab" aria-controls="detallesSolicitud" aria-selected="true">Detalles de Solicitud</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="etapa1-tab" data-toggle="tab" href="#etapa1" role="tab"
                        aria-controls="etapa1" aria-selected="false">Etapa 1: Proceso Pre Contrato y Competencias</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="etapa2-tab" data-toggle="tab" href="#etapa2" role="tab"
                        aria-controls="etapa2" aria-selected="false">Etapa 2: Proceso de Contratacion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="etapa3-tab" data-toggle="tab" href="#etapa3" role="tab"
                        aria-controls="etapa3" aria-selected="false">Etapa 3: Obligación de Informar (O.D.I Especifico de
                        Servicio)</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="etapa4-tab" data-toggle="tab" href="#etapa4" role="tab"
                        aria-controls="etapa4" aria-selected="false"> {{ $nombre_etapa4 }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="etapa5-tab" data-toggle="tab" href="#etapa5" role="tab"
                        aria-controls="etapa5" aria-selected="false">Etapa 5: Proceso de Entrenamiento y Capacitación </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="etapa6-tab" data-toggle="tab" href="#etapa6" role="tab"
                        aria-controls="etapa6" aria-selected="false">Etapa 6: Evaluación De Competencias </a>
                </li>
            </ul>

            <form id="formulario" method="POST" action="{{ route('solicitudes.update', $solicitud->id) }}"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="card-body">
                    <div class="tab-content" id="etapasTabContent">
                        <div class="tab-pane fade show active" id="detallesSolicitud" role="tabpanel"
                            aria-labelledby="detallesSolicitud-tab">
                            <div class="container">
                                <!-- Card con los detalles -->
                                <div class="card-body">
                                    <form>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="correlativo" class="form-label"><strong>Correlativo de la
                                                        Solicitud:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="correlativo" class="form-control"
                                                    value="{{ $solicitud->correlativo }}" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="nombre" class="form-label"><strong>Nombre:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="nombre" class="form-control"
                                                    value="{{ $solicitud->nombre_trabajador }}" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="correo" class="form-label"><strong>RUT:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="correo" class="form-control"
                                                    value="{{ $solicitud->rut_trabajador }}" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="fecha_solicitud" class="form-label"><strong>Fecha de
                                                        Solicitud:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="fecha_solicitud" class="form-control"
                                                    value="{{ $solicitud->created_at }}" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="empresa" class="form-label"><strong>Empresa:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="empresa" class="form-control"
                                                    value="{{ $solicitud->empresa }}" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="cargo" class="form-label"><strong>Cargo:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="cargo" class="form-control"
                                                    value="{{ $solicitud->cargo }}" readonly>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="turno" class="form-label"><strong>Turno:</strong></label>
                                            </div>
                                            <div class="col-md-8">
                                                <input type="text" id="turno" class="form-control"
                                                    value="{{ $solicitud->turno }}" readonly>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="fileModal" tabindex="-1" role="dialog"
                            aria-labelledby="fileModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="fileModalLabel">Vista Previa del Archivo</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div id="filePreviewContainer"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Etapa 1 -->

                        <div class="tab-pane fade" id="etapa1" role="tabpanel" aria-labelledby="etapa1-tab">
                            <div class="tab-pane-content">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <table id="procesosTable1" class="table table-bordered table-striped">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th class="text-center">ETAPA 1: PROCESO PRE CONTRATO y COMPETENCIAS
                                                    </th>
                                                    <th class="text-center">Estado</th>
                                                    <th class="text-center">Subir Archivo</th>
                                                    <th class="text-center">Acciones</th>
                                                    <th class="text-center">Estado de Revision</th>
                                                    <th class="text-center">Observaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($actividades_Etapa1 as $actividad)
                                                    @php
                                                        $badgeClass = $estadoClasses[$actividad->estado] ?? 'Pediente';
                                                    @endphp
                                                    <tr>
                                                        <td class="tabla-nombre-proceso">
                                                            {{ $actividad->nombre_actividad }}</td>

                                                        <td class="status text-center">
                                                            <span
                                                                id="badge_{{ $actividad->id }}"class="badge badge-{{ $badgeClass }}">{{ $actividad->estado }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="custom-file">

                                                                <input type="file" name="file_{{ $actividad->id }}"
                                                                    class="custom-file-input"
                                                                    id="file_{{ $actividad->id }}_id"
                                                                    @cannot('servicio_integral.file-etapa1') disabled @endcannot
                                                                    @disabled(
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')>

                                                                <label class="custom-file-label"
                                                                    for="file_{{ $actividad->id }}_id">
                                                                    @if (
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')
                                                                        Archivo Subido
                                                                    @else
                                                                        Seleccione un archivo
                                                                    @endif
                                                                </label>
                                                            </div>
                                                            @cannot('servicio_integral.file-etapa1')
                                                                <span>No tiene permiso para subir archivo</span>
                                                            @endcannot
                                                        </td>
                                                        @php
                                                            $canViewImage = false;
                                                            $canDeleteImage = false;

                                                            if ($actividad->estado != 'Pendiente') {
                                                                $canViewImage = true;
                                                            }

                                                            if (Gate::check('servicio_integral.file-etapa1')) {
                                                                if (
                                                                    $actividad->estado == 'Rechazado' ||
                                                                    $actividad->estado == 'En espera de revisión'
                                                                ) {
                                                                    $canDeleteImage = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td>
                                                            <div class="btn-group">
                                                                <a @if ($canViewImage == false) style="display: none;" @endif
                                                                    class="btn btn-info ver-archivo"
                                                                    href="{{ route('actividad.show', $actividad->id) }}"
                                                                    title="Ver archivo" target="_blank">
                                                                    <i class="fas fa-solid fa-eye"></i>
                                                                </a>
                                                                <a @if ($canDeleteImage == false) style="display: none;" @endif
                                                                    class="btn btn-danger delete-file" href="#"
                                                                    data-id="{{ $actividad->id }}"
                                                                    title="Eliminar archivo">
                                                                    <i class="fas fa-solid fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        @php
                                                            $sePuedeAprobarEtapa1 = false;
                                                            if (Gate::check('servicio_integral.etapa1')) {
                                                                if ($actividad->tipo_aprobador == 'aprobador_etapa') {
                                                                    $sePuedeAprobarEtapa1 = true;
                                                                }
                                                            } elseif ($actividad->tipo_aprobador == 'supervisor') {
                                                                if (Gate::check('servicio_integral.file')) {
                                                                    $sePuedeAprobarEtapa1 = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="revision-status">

                                                            @if ($sePuedeAprobarEtapa1 == true)
                                                                <select class="form-control" @disabled($actividad->estado != 'En espera de revisión')
                                                                    name="procesos{{ $actividad->id }}"
                                                                    id="aprobacion_{{ $actividad->id }}">
                                                                    <option value="Pendiente" @selected($actividad->estado == 'Pendiente' || $actividad == 'En espera de revisión')>
                                                                        Pendiente revisión</option>
                                                                    <option value="Aprobado" @selected($actividad->estado == 'Aprobado')>
                                                                        Aprobado</option>
                                                                    <option value="Rechazado" @selected($actividad->estado == 'Rechazado')>
                                                                        Rechazado</option>
                                                                </select>
                                                            @endif

                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" rows="2" id="observaciones_{{ $actividad->id }}" disabled
                                                                placeholder="observaciones...">{{ $actividad->observacion }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Etapa 2 -->

                        <div class="tab-pane fade" id="etapa2" role="tabpanel" aria-labelledby="etapa2-tab">
                            <div class="tab-pane-content">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <table id="procesosTable2" class="table table-bordered table-striped">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th class="text-center">ETAPA 2: PROCESO DE CONTRATACIÓN</th>
                                                    <th class="text-center">Estado</th>
                                                    <th class="text-center">Subir Archivo</th>
                                                    <th class="text-center">Acciones</th>
                                                    <th class="text-center">Estado de Revision</th>
                                                    <th class="text-center">Observaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($actividades_Etapa2 as $actividad)
                                                    @php
                                                        $badgeClass = $estadoClasses[$actividad->estado] ?? 'Pediente';
                                                    @endphp
                                                    <tr>
                                                        <td class="tabla-nombre-proceso">
                                                            {{ $actividad->nombre_actividad }}</td>


                                                        <td class="status text-center">
                                                            <span
                                                                id="badge_{{ $actividad->id }}"class="badge badge-{{ $badgeClass }}">{{ $actividad->estado }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="custom-file">
                                                                <input type="file" name="file_{{ $actividad->id }}"
                                                                    class="custom-file-input"
                                                                    id="file_{{ $actividad->id }}_id"
                                                                    @cannot('servicio_integral.file-etapa2') disabled @endcannot
                                                                    @disabled(
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')>
                                                                <label class="custom-file-label"
                                                                    for="file_{{ $actividad->id }}_id">
                                                                    @if (
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')
                                                                        Archivo Subido
                                                                    @else
                                                                        Seleccione un archivo
                                                                    @endif
                                                                </label>
                                                            </div>

                                                            @cannot('servicio_integral.file-etapa2')
                                                                <span>No tiene permiso para subir archivo</span>
                                                            @endcannot
                                                        </td>
                                                        @php
                                                            $canViewImage = false;
                                                            $canDeleteImage = false;

                                                            if ($actividad->estado != 'Pendiente') {
                                                                $canViewImage = true;
                                                            }

                                                            if (Gate::check('servicio_integral.file-etapa2')) {
                                                                if (
                                                                    $actividad->estado == 'Rechazado' ||
                                                                    $actividad->estado == 'En espera de revisión'
                                                                ) {
                                                                    $canDeleteImage = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="text-center">
                                                            <div class="btn-group">
                                                                <a @if ($canViewImage == false) style="display: none;" @endif
                                                                    class="btn btn-info ver-archivo"
                                                                    href="{{ route('actividad.show', $actividad->id) }}"
                                                                    title="Ver archivo" target="_blank">
                                                                    <i class="fas fa-solid fa-eye"></i>
                                                                </a>
                                                                <a @if ($canDeleteImage == false) style="display: none;" @endif
                                                                    class="btn btn-danger delete-file" href="#"
                                                                    data-id="{{ $actividad->id }}"
                                                                    title="Eliminar archivo">
                                                                    <i class="fas fa-solid fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        @php
                                                            $sePuedeAprobarEtapa2 = false;
                                                            if (Gate::check('servicio_integral.etapa2')) {
                                                                if ($actividad->tipo_aprobador == 'aprobador_etapa') {
                                                                    $sePuedeAprobarEtapa2 = true;
                                                                }
                                                            } elseif ($actividad->tipo_aprobador == 'supervisor') {
                                                                if (Gate::check('servicio_integral.file')) {
                                                                    $sePuedeAprobarEtapa2 = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="revision-status">
                                                            @if ($sePuedeAprobarEtapa2 == true)
                                                                <select class="form-control" @disabled($actividad->estado != 'En espera de revisión')
                                                                    name="procesos{{ $actividad->id }}"
                                                                    id="aprobacion_{{ $actividad->id }}">
                                                                    <option value="Pendiente" @selected($actividad->estado == 'Pendiente' || $actividad == 'En espera de revisión')>
                                                                        Pendiente revisión</option>
                                                                    <option value="Aprobado" @selected($actividad->estado == 'Aprobado')>
                                                                        Aprobado</option>
                                                                    <option value="Rechazado" @selected($actividad->estado == 'Rechazado')>
                                                                        Rechazado</option>
                                                                </select>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" rows="2" name="observacion_{{ $actividad->id }}"
                                                                id="observaciones_{{ $actividad->id }}" disabled placeholder="observaciones...">{{ $actividad->observacion }}</textarea>

                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!-- Etapa 3 -->

                        <div class="tab-pane fade" id="etapa3" role="tabpanel" aria-labelledby="etapa3-tab">
                            <div class="tab-pane-content">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <table id="procesosTable3" class="table table-bordered table-striped">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th class="text-center">ETAPA 3: OBLIGACIÓN DE INFORMAR (O.D.I
                                                        ESPECÍFICO DEL SERVICIO)
                                                    </th>
                                                    <th class="text-center">Estado</th>
                                                    <th class="text-center">Subir Archivo</th>
                                                    <th class="text-center">Acciones</th>
                                                    <th class="text-center">Estado de Revision</th>
                                                    <th class="text-center">Observaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($actividades_Etapa3 as $actividad)
                                                    @php
                                                        $badgeClass = $estadoClasses[$actividad->estado] ?? 'Pediente';
                                                    @endphp
                                                    <tr>
                                                        <td class="tabla-nombre-proceso">
                                                            {!! $actividad->nombre_actividad !!}</td>

                                                        <td class="status text-center">
                                                            <span
                                                                id="badge_{{ $actividad->id }}"class="badge badge-{{ $badgeClass }}">{{ $actividad->estado }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="custom-file">
                                                                <input type="file" name="file_{{ $actividad->id }}"
                                                                    class="custom-file-input"
                                                                    id="file_{{ $actividad->id }}_id"
                                                                    @cannot('servicio_integral.file-etapa3') disabled @endcannot
                                                                    @disabled(
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')>
                                                                <label class="custom-file-label"
                                                                    for="file_{{ $actividad->id }}_id">
                                                                    @if (
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')
                                                                        Archivo Subido
                                                                    @else
                                                                        Seleccione un archivo
                                                                    @endif
                                                                </label>
                                                            </div>

                                                            @cannot('servicio_integral.file-etapa3')
                                                                <span>No tiene permiso para subir archivo</span>
                                                            @endcannot
                                                        </td>
                                                        @php
                                                            $canViewImage = false;
                                                            $canDeleteImage = false;

                                                            if ($actividad->estado != 'Pendiente') {
                                                                $canViewImage = true;
                                                            }

                                                            if (Gate::check('servicio_integral.file-etapa3')) {
                                                                if (
                                                                    $actividad->estado == 'Rechazado' ||
                                                                    $actividad->estado == 'En espera de revisión'
                                                                ) {
                                                                    $canDeleteImage = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="text-center">
                                                            <div class="btn-group">
                                                                <a @if ($canViewImage == false) style="display: none;" @endif
                                                                    class="btn btn-info ver-archivo"
                                                                    href="{{ route('actividad.show', $actividad->id) }}"
                                                                    title="Ver archivo" target="_blank">
                                                                    <i class="fas fa-solid fa-eye"></i>
                                                                </a>
                                                                <a @if ($canDeleteImage == false) style="display: none;" @endif
                                                                    class="btn btn-danger delete-file" href="#"
                                                                    data-id="{{ $actividad->id }}"
                                                                    title="Eliminar archivo">
                                                                    <i class="fas fa-solid fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        @php
                                                            $sePuedeAprobarEtapa3 = false;
                                                            if (Gate::check('servicio_integral.etapa3')) {
                                                                if ($actividad->tipo_aprobador == 'aprobador_etapa') {
                                                                    $sePuedeAprobarEtapa3 = true;
                                                                }
                                                            } elseif ($actividad->tipo_aprobador == 'supervisor') {
                                                                if (Gate::check('servicio_integral.file')) {
                                                                    $sePuedeAprobarEtapa3 = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="revision-status">
                                                            @if ($sePuedeAprobarEtapa3 == true)
                                                                <select class="form-control" @disabled($actividad->estado != 'En espera de revisión')
                                                                    name="procesos{{ $actividad->id }}"
                                                                    id="aprobacion_{{ $actividad->id }}">
                                                                    <option value="Pendiente"
                                                                        @selected($actividad->estado == 'Pendiente' || $actividad == 'En espera de revisión')>
                                                                        Pendiente revisión</option>
                                                                    <option value="Aprobado" @selected($actividad->estado == 'Aprobado')>
                                                                        Aprobado</option>
                                                                    <option value="Rechazado"
                                                                        @selected($actividad->estado == 'Rechazado')>
                                                                        Rechazado</option>
                                                                </select>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" rows="2" name="observacion_{{ $actividad->id }}"
                                                                id="observaciones_{{ $actividad->id }}" disabled placeholder="observaciones...">{{ $actividad->observacion }}</textarea>

                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- etapa 4 --}}


                        <div class="tab-pane fade" id="etapa4" role="tabpanel" aria-labelledby="etapa4-tab">
                            <div class="tab-pane-content">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <table id="procesosTable4" class="table table-bordered table-striped">
                                            <thead class="thead-dark">
                                                <tr>

                                                    <th class="text-center">ETAPA 4: {{ $etapa4->nombre_etapa }}</th>
                                                    <th class="text-center">Estado</th>
                                                    <th class="text-center">Subir Archivo</th>
                                                    <th class="text-center">Acciones</th>
                                                    <th class="text-center">Estado de Revision</th>
                                                    <th class="text-center">Observaciones</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($actividades_Etapa4 as $actividad)
                                                    @php
                                                        $badgeClass = $estadoClasses[$actividad->estado] ?? 'Pediente';
                                                    @endphp
                                                    <tr>
                                                        <td class="tabla-nombre-proceso">
                                                            {{ $actividad->nombre_actividad }}</td>


                                                        <td class="status text-center">

                                                            <span
                                                                id="badge_{{ $actividad->id }}"class="badge badge-{{ $badgeClass }}">{{ $actividad->estado }}</span>
                                                        </td>

                                                        <td>
                                                            <div class="custom-file">

                                                                <input type="file" name="file_{{ $actividad->id }}"
                                                                    class="custom-file-input"
                                                                    id="file_{{ $actividad->id }}_id"
                                                                    @cannot('servicio_integral.file-etapa4') disabled @endcannot
                                                                    @disabled(
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')>

                                                                <label class="custom-file-label"
                                                                    for="file_{{ $actividad->id }}_id">
                                                                    @if (
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')
                                                                        Archivo Subido
                                                                    @else
                                                                        Seleccione un archivo
                                                                    @endif
                                                                </label>
                                                            </div>
                                                            @cannot('servicio_integral.file-etapa4')
                                                                <span>No tiene permiso para subir archivo</span>
                                                            @endcannot
                                                        </td>
                                                        @php
                                                            $canViewImage = false;
                                                            $canDeleteImage = false;

                                                            if ($actividad->estado != 'Pendiente') {
                                                                $canViewImage = true;
                                                            }

                                                            if (Gate::check('servicio_integral.file-etapa4')) {
                                                                if (
                                                                    $actividad->estado == 'Rechazado' ||
                                                                    $actividad->estado == 'En espera de revisión'
                                                                ) {
                                                                    $canDeleteImage = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="text-center">
                                                            <div class="btn-group">
                                                                <a @if ($canViewImage == false) style="display: none;" @endif
                                                                    class="btn btn-info ver-archivo"
                                                                    href="{{ route('actividad.show', $actividad->id) }}"
                                                                    title="Ver archivo" target="_blank">
                                                                    <i class="fas fa-solid fa-eye"></i>
                                                                </a>
                                                                <a @if ($canDeleteImage == false) style="display: none;" @endif
                                                                    class="btn btn-danger delete-file" href="#"
                                                                    data-id="{{ $actividad->id }}"
                                                                    title="Eliminar archivo">
                                                                    <i class="fas fa-solid fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        @php
                                                            $sePuedeAprobarEtapa4 = false;
                                                            if ($actividad->tipo_aprobador == 'aprobador_etapa') {
                                                                if (
                                                                    $solicitud->tipo_fase_cuatro == 'trayectoria' &&
                                                                    Gate::check('servicio_integral.etapa4-trayectoria')
                                                                ) {
                                                                    $sePuedeAprobarEtapa4 = true;
                                                                } elseif (
                                                                    $solicitud->tipo_fase_cuatro == 'topografia' &&
                                                                    Gate::check(
                                                                        'servicio_integral.etapa4-topografia-sondaje',
                                                                    )
                                                                ) {
                                                                    $sePuedeAprobarEtapa4 = true;
                                                                } elseif (
                                                                    $solicitud->tipo_fase_cuatro == 'geomensor_mina' &&
                                                                    Gate::check(
                                                                        'servicio_integral.etapa4-geomensura-mina',
                                                                    )
                                                                ) {
                                                                    $sePuedeAprobarEtapa4 = true;
                                                                } elseif (
                                                                    $solicitud->tipo_fase_cuatro == 'geomensor_pv3' &&
                                                                    Gate::check(
                                                                        'servicio_integral.etapa4-geomensor-pv3',
                                                                    )
                                                                ) {
                                                                    $sePuedeAprobarEtapa4 = true;
                                                                } elseif (
                                                                    $solicitud->tipo_fase_cuatro == 'miscelaneos' &&
                                                                    Gate::check('servicio_integral.etapa4-miscelaneos')
                                                                ) {
                                                                    $sePuedeAprobarEtapa4 = true;
                                                                }
                                                            } elseif ($actividad->tipo_aprobador == 'supervisor') {
                                                                if (Gate::check('servicio_integral.file')) {
                                                                    $sePuedeAprobarEtapa4 = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="revision-status">
                                                            @if ($sePuedeAprobarEtapa4 == true)
                                                                <select class="form-control" @disabled($actividad->estado != 'En espera de revisión')
                                                                    name="procesos{{ $actividad->id }}"
                                                                    id="aprobacion_{{ $actividad->id }}">
                                                                    <option value="Pendiente"
                                                                        @selected($actividad->estado == 'Pendiente' || $actividad == 'En espera de revisión')>
                                                                        Pendiente revisión</option>
                                                                    <option value="Aprobado" @selected($actividad->estado == 'Aprobado')>
                                                                        Aprobado</option>
                                                                    <option value="Rechazado"
                                                                        @selected($actividad->estado == 'Rechazado')>
                                                                        Rechazado</option>
                                                                </select>
                                                            @endif

                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" rows="2" id="observaciones_{{ $actividad->id }}" disabled
                                                                placeholder="observaciones...">{{ $actividad->observacion }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <!-- Etapa 5 -->

                        <div class="tab-pane fade" id="etapa5" role="tabpanel" aria-labelledby="etapa5-tab">
                            <div class="tab-pane-content">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <table id="procesosTable5" class="table table-bordered table-striped">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th class="text-center">ETAPA 5: PROCESO DE ENTRENAMIENTO Y
                                                        CAPACITACIÓN</th>
                                                    <th class="text-center">Estado</th>
                                                    <th class="text-center">Subir Archivo</th>
                                                    <th class="text-center">Acciones</th>
                                                    <th class="text-center">Estado de Revision</th>
                                                    <th class="text-center">Obersavaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($actividades_Etapa5 as $actividad)
                                                    @php
                                                        $badgeClass = $estadoClasses[$actividad->estado] ?? 'Pediente';
                                                    @endphp
                                                    <tr>
                                                        <td class="tabla-nombre-proceso">
                                                            {{ $actividad->nombre_actividad }}</td>

                                                        <td class="status">
                                                            <span
                                                                id="badge_{{ $actividad->id }}"class="badge badge-{{ $badgeClass }}">{{ $actividad->estado }}</span>
                                                        </td>

                                                        <td>
                                                            <div class="custom-file">
                                                                <input type="file" name="file_{{ $actividad->id }}"
                                                                    class="custom-file-input"
                                                                    id="file_{{ $actividad->id }}_id"
                                                                    @cannot('servicio_integral.file-etapa5') disabled @endcannot
                                                                    @disabled(
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')>
                                                                <label class="custom-file-label"
                                                                    for="file_{{ $actividad->id }}_id">
                                                                    @if (
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')
                                                                        Archivo Subido
                                                                    @else
                                                                        Seleccione un archivo
                                                                    @endif
                                                                </label>
                                                            </div>
                                                            @cannot('servicio_integral.file-etapa5')
                                                                <span>No tiene permiso para subir archivo</span>
                                                            @endcannot
                                                        </td>
                                                        @php
                                                            $canViewImage = false;
                                                            $canDeleteImage = false;

                                                            if ($actividad->estado != 'Pendiente') {
                                                                $canViewImage = true;
                                                            }

                                                            if (Gate::check('servicio_integral.file-etapa5')) {
                                                                if (
                                                                    $actividad->estado == 'Rechazado' ||
                                                                    $actividad->estado == 'En espera de revisión'
                                                                ) {
                                                                    $canDeleteImage = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td>
                                                            <div class="btn-group">
                                                                <a @if ($canViewImage == false) style="display: none;" @endif
                                                                    class="btn btn-info ver-archivo"
                                                                    href="{{ route('actividad.show', $actividad->id) }}"
                                                                    title="Ver archivo" target="_blank">
                                                                    <i class="fas fa-solid fa-eye"></i>
                                                                </a>
                                                                <a @if ($canDeleteImage == false) style="display: none;" @endif
                                                                    class="btn btn-danger delete-file" href="#"
                                                                    data-id="{{ $actividad->id }}"
                                                                    title="Eliminar archivo">
                                                                    <i class="fas fa-solid fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        @php
                                                            $sePuedeAprobarEtapa5 = false;
                                                            if (Gate::check('servicio_integral.etapa5')) {
                                                                if ($actividad->tipo_aprobador == 'aprobador_etapa') {
                                                                    $sePuedeAprobarEtapa5 = true;
                                                                }
                                                            } elseif ($actividad->tipo_aprobador == 'supervisor') {
                                                                if (Gate::check('servicio_integral.file-etapa5')) {
                                                                    $sePuedeAprobarEtapa5 = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="revision-status">
                                                            @if ($sePuedeAprobarEtapa5 == true)
                                                                <select class="form-control" @disabled($actividad->estado != 'En espera de revisión')
                                                                    name="procesos{{ $actividad->id }}"
                                                                    id="aprobacion_{{ $actividad->id }}">
                                                                    <option value="Pendiente"
                                                                        @selected($actividad->estado == 'Pendiente' || $actividad == 'En espera de revisión')>
                                                                        Pendiente revisión</option>
                                                                    <option value="Aprobado" @selected($actividad->estado == 'Aprobado')>
                                                                        Aprobado
                                                                    </option>
                                                                    <option value="Rechazado"
                                                                        @selected($actividad->estado == 'Rechazado')>
                                                                        Rechazado</option>
                                                                </select>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" rows="2" name="observacion_{{ $actividad->id }}"
                                                                id="observaciones_{{ $actividad->id }}" disabled placeholder="observaciones...">{{ $actividad->observacion }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

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

                        <!-- Etapa 6 -->

                        <div class="tab-pane fade" id="etapa6" role="tabpanel" aria-labelledby="etapa6-tab">
                            <div class="tab-pane-content">
                                <div class="row mb-4">
                                    <div class="col-12">
                                        <table id="procesosTable5" class="table table-bordered table-striped">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th class="text-center">ETAPA 6: EVALUACIÓN DE COMPETENCIAS</th>
                                                    <th class="text-center">Estado</th>
                                                    <th class="text-center">Subir Archivo</th>
                                                    <th class="text-center">Acciones</th>
                                                    <th class="text-center">Estado de Revision</th>
                                                    <th class="text-center">Obersavaciones</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($actividades_Etapa6 as $actividad)
                                                    @php
                                                        $badgeClass = $estadoClasses[$actividad->estado] ?? 'Pediente';
                                                    @endphp
                                                    <tr>
                                                        <td class="tabla-nombre-proceso">
                                                            {{ $actividad->nombre_actividad }}</td>

                                                        <td class="status">
                                                            <span
                                                                id="badge_{{ $actividad->id }}"class="badge badge-{{ $badgeClass }}">{{ $actividad->estado }}</span>
                                                        </td>

                                                        <td>
                                                            <div class="custom-file">
                                                                <input type="file" name="file_{{ $actividad->id }}"
                                                                    class="custom-file-input"
                                                                    id="file_{{ $actividad->id }}_id"
                                                                    @cannot('servicio_integral.file-etapa6') disabled @endcannot
                                                                    @disabled(
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')>
                                                                <label class="custom-file-label"
                                                                    for="file_{{ $actividad->id }}_id">
                                                                    @if (
                                                                        $actividad->estado == 'Aprobado' ||
                                                                            $actividad->estado == 'En espera de revisión' ||
                                                                            $actividad->estado == 'Rechazado')
                                                                        Archivo Subido
                                                                    @else
                                                                        Seleccione un archivo
                                                                    @endif
                                                                </label>
                                                            </div>
                                                            @cannot('servicio_integral.file-etapa6')
                                                                <span>No tiene permiso para subir archivo</span>
                                                            @endcannot
                                                        </td>
                                                        @php
                                                            $canViewImage = false;
                                                            $canDeleteImage = false;

                                                            if ($actividad->estado != 'Pendiente') {
                                                                $canViewImage = true;
                                                            }

                                                            if (Gate::check('servicio_integral.file-etapa6')) {
                                                                if (
                                                                    $actividad->estado == 'Rechazado' ||
                                                                    $actividad->estado == 'En espera de revisión'
                                                                ) {
                                                                    $canDeleteImage = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td>
                                                            <div class="btn-group">
                                                                <a @if ($canViewImage == false) style="display: none;" @endif
                                                                    class="btn btn-info ver-archivo"
                                                                    href="{{ route('actividad.show', $actividad->id) }}"
                                                                    title="Ver archivo" target="_blank">
                                                                    <i class="fas fa-solid fa-eye"></i>
                                                                </a>
                                                                <a @if ($canDeleteImage == false) style="display: none;" @endif
                                                                    class="btn btn-danger delete-file" href="#"
                                                                    data-id="{{ $actividad->id }}"
                                                                    title="Eliminar archivo">
                                                                    <i class="fas fa-solid fa-trash"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        @php
                                                            $sePuedeAprobarEtapa6 = false;
                                                            if (Gate::check('servicio_integral.etapa6')) {
                                                                if ($actividad->tipo_aprobador == 'aprobador_etapa') {
                                                                    $sePuedeAprobarEtapa5 = true;
                                                                }
                                                            } elseif ($actividad->tipo_aprobador == 'supervisor') {
                                                                if (Gate::check('servicio_integral.file-etapa6')) {
                                                                    $sePuedeAprobarEtapa5 = true;
                                                                }
                                                            }
                                                        @endphp
                                                        <td class="revision-status">
                                                            @if ($sePuedeAprobarEtapa5 == true)
                                                                <select class="form-control" @disabled($actividad->estado != 'En espera de revisión')
                                                                    name="procesos{{ $actividad->id }}"
                                                                    id="aprobacion_{{ $actividad->id }}">
                                                                    <option value="Pendiente"
                                                                        @selected($actividad->estado == 'Pendiente' || $actividad == 'En espera de revisión')>
                                                                        Pendiente revisión</option>
                                                                    <option value="Aprobado" @selected($actividad->estado == 'Aprobado')>
                                                                        Aprobado
                                                                    </option>
                                                                    <option value="Rechazado"
                                                                        @selected($actividad->estado == 'Rechazado')>
                                                                        Rechazado</option>
                                                                </select>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" rows="2" name="observacion_{{ $actividad->id }}"
                                                                id="observaciones_{{ $actividad->id }}" disabled placeholder="observaciones...">{{ $actividad->observacion }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

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

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

    <div id="loadingOverlay"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
                <span class="sr-only">Cargando...</span>
            </div>
            <p style="color: white; text-align: center; margin-top: 10px;">Cargando...</p>
        </div>
    </div>
@endsection

@section('css')
    <style>
        .tab-content {
            padding-top: 20px;
        }

        .nav-tabs {
            border: none;
            background-color: #007bff;
        }

        .nav-item .nav-link {
            color: white;
        }

        .nav-link.active {
            background-color: #0056b3;
            color: white;
        }

        .tab-pane-content {
            background-color: #ffffff;
        }

        .btn-success {
            margin-top: 20px;
        }

        .status .badge-warning {
            background-color: #ffc107;
        }

        .status .badge-success {
            background-color: #28a745;
        }

        .custom-file-input:lang(en)~.custom-file-label::after {
            content: "Seleccionar archivo";
        }

        .custom-file-label.selected::after {
            content: "Archivo seleccionado";
        }

        #loadingOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;

        }

        #loadingOverlay .spinner-border {
            width: 10rem;
            height: 10rem;
        }

        #loadingOverlay p {
            color: white;
            text-align: center;
            margin-top: 10px;
        }
    </style>
@endsection


@section('js')
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function() {
            @foreach ($etapas as $etapa)
                $('#tabla_actividad{{ $etapa->id }}').DataTable({
                    "language": {
                        "url": "https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json"
                    },
                    "info": false,
                    "emptyTable": "Sin registros",
                    "infoEmpty": "No hay registros disponibles",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "paging": false,
                });
            @endforeach

            $(".custom-file-input").on("change", function() {
                var fileName = $(this).val().split("\\").pop();
                $(this).next(".custom-file-label").addClass("selected").html(fileName);
            });

            $('#etapasTabs a').on('click', function(e) {
                e.preventDefault();
                $(this).tab('show');
            });
        });
    </script>

    <script>
        document.querySelectorAll('.delete-file').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const fileInput = e.target.closest('tr').querySelector('.custom-file-input');
                const label = fileInput.nextElementSibling;
                const statusCell = fileInput.closest('tr').querySelector('.status');

                fileInput.value = '';
                label.innerText = 'Seleccionar archivo';
                label.classList.remove('selected');
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Selecciona todos los inputs de tipo file
            const fileInputs = document.querySelectorAll('input[type="file"]');
            fileInputs.forEach(input => {
                input.addEventListener('change', function(event) {
                    const file = event.target.files[0]; // Obtén el archivo seleccionado
                    const activityId = event.target.id.split('_')[
                        1]; // Extrae el ID de la actividad del ID del input

                    if (file) {
                        Swal.fire({
                            title: '¿Estas seguro?',
                            text: "¡Estas apunto de subir un archivo!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Si, Enviar',
                            cancelButtonText: 'No, cancelar',
                            confirmButtonColor: '#007BFF',
                            cancelButtonColor: '#BE2323',
                            reverseButtons: true,
                            padding: '20px',
                            backdrop: true,
                            allowOutsideClick: true,
                            allowEscapeKey: true,
                            allowEnterKey: false,
                        }).then((result) => {
                            if (result.isConfirmed) {
                                handleFileUpload(file, activityId, input.parentElement
                                    .parentElement.parentElement);
                            } else {
                                // Si el usuario cancela, restablece el input de archivo
                                input.value = '';
                                const label = input.nextElementSibling;
                                label.innerText = 'Seleccionar archivo';
                                label.classList.remove('selected');
                            }
                        });
                    }
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // Función para mostrar/ocultar los botones de acción
            /*function toggleActionButtons(row) {
                const fileInput = row.querySelector('input[type="file"]');
                const actionButtons = row.querySelector('.btn-group');
                const fileUploaded = fileInput && (fileInput.files.length > 0 || fileInput.disabled); 

                console.log("fileUploaded: ", fileUploaded); 
                if (fileUploaded) {
                    actionButtons.style.display = 'inline-flex'; 

                    if (!canViewImage) {
                        actionButtons.querySelector('.ver-archivo').style.display = 'none';
                    }

                    if (!canDeleteImage) {
                        actionButtons.querySelector('.delete-file').style.display = 'none';
                    }
                } else {
                    actionButtons.style.display = 'none';
                }
            }*/

            // Iterar sobre todas las filas de la tabla
            const rows = document.querySelectorAll(
                '#procesosTables1 tbody tr');
            rows.forEach(row => {

                // Evento para cuando el usuario sube un archivo
                const fileInput = row.querySelector('input[type="file"]');
                if (fileInput) {
                    fileInput.addEventListener('change', function(event) {
                        const file = event.target.files[0];
                        const activityId = event.target.id.split('_')[1];

                        if (file) {
                            Swal.fire({
                                title: '¿Estás seguro?',
                                text: "¡Estás a punto de subir un archivo!",
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Sí, Enviar',
                                cancelButtonText: 'No, Cancelar',
                                confirmButtonColor: '#007BFF',
                                cancelButtonColor: '#BE2323',
                                reverseButtons: true,
                                padding: '20px',
                                backdrop: true,
                                allowOutsideClick: true,
                                allowEscapeKey: true,
                                allowEnterKey: false,
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    handleFileUpload(file, activityId, row);
                                } else {
                                    fileInput.value = '';
                                    const label = fileInput.nextElementSibling;
                                    label.innerText = 'Seleccionar archivo';
                                    label.classList.remove('selected');
                                }
                            });
                        }
                    });
                }
            });
        });

        function handleFileUpload(file, activityId, row) {
            const actionButtons = row.querySelector('.btn-group');
            const formData = new FormData();
            formData.append('file', file);
            formData.append('id', activityId);
            formData.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: '{{ route('actividad.store') }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    document.getElementById('loadingOverlay').style.display = 'block';
                },
                success: function(data) {
                    actionButtons.querySelector('.ver-archivo').style.display = 'block';
                    actionButtons.querySelector('.delete-file').style.display = 'block';
                    const badge = document.getElementById(`badge_${activityId}`);
                    if (badge) {
                        badge.classList.remove('badge-primary', 'badge-danger');
                        badge.classList.add('badge-warning');
                        badge.textContent = 'En espera de revisión';

                    }
                    const fileInput = document.getElementById(`file_${activityId}_id`);
                    if (fileInput) {
                        fileInput.disabled = true;
                    }
                    const selectIput = document.getElementById(`aprobacion_${activityId}`);
                    if (selectIput) {
                        selectIput.disabled = false;
                    }
                    toastr["success"](data.success);

                },
                error: function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        toastr["error"](xhr.responseJSON.error);
                    } else {
                        toastr["error"]('Hubo un error al subir el archivo.');
                    }
                },
                complete: function() {
                    document.getElementById('loadingOverlay').style.display = 'none';
                }
            });
        }

        const deleteButtons = document.querySelectorAll('.delete-file');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function(event) {
                const actionButtons = button.parentElement;
                event.preventDefault();
                const activityId = this.getAttribute('data-id');
                const observacionInput = document.getElementById(`observaciones_${activityId}`);

                Swal.fire({
                    title: '¿Estás seguro?',
                    text: "¡No podrás revertir esto!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('actividad.destroy', '') }}/' + activityId,
                            type: 'DELETE',
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            beforeSend: function() {
                                document.getElementById('loadingOverlay').style
                                    .display = 'block';
                            },
                            success: function(data) {
                                actionButtons.querySelector('.ver-archivo').style
                                    .display = 'none';
                                actionButtons.querySelector('.delete-file').style
                                    .display = 'none';
                                observacionInput.value = "";
                                const badge = document.getElementById(
                                    `badge_${activityId}`);
                                if (badge) {
                                    badge.classList.remove('badge-warning',
                                        'badge-danger');
                                    badge.classList.add('badge-primary');
                                    badge.textContent = 'Pendiente';
                                }
                                const fileInput = document.getElementById(
                                    `file_${activityId}_id`);
                                if (fileInput) {
                                    fileInput.disabled = false;
                                }

                                const selectIput = document.getElementById(
                                    `aprobacion_${activityId}`);
                                if (selectIput) {
                                    selectIput.disabled = true;
                                    selectIput.value = 'Pendiente';
                                }
                                toastr["success"](data.success);
                            },
                            error: function(xhr) {
                                if (xhr.responseJSON && xhr.responseJSON.error) {
                                    toastr["error"](xhr.responseJSON.error);
                                } else {
                                    toastr["error"](
                                        'Hubo un error al eliminar el archivo.');
                                }
                            },

                            complete: function() {
                                document.getElementById('loadingOverlay').style
                                    .display = 'none';
                            }
                        });
                    }
                });
            });
        });


        document.addEventListener('DOMContentLoaded', function() {
            // Selecciona todos los select de aprobación
            const approvalSelects = document.querySelectorAll('.revision-status select');

            approvalSelects.forEach(select => {
                select.addEventListener('change', function(event) {
                    const activityId = this.id.split('_')[1];
                    const selectedValue = this.value;
                    if (selectedValue && selectedValue != 'pendiente') {
                        Swal.fire({
                            title: '¿Estas seguro de cambiar el estado de revisión?',
                            text: "¡No podras revertir esto!",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Si, cambiar',
                            cancelButtonText: 'No, cancelar',
                            confirmButtonColor: '#007BFF',
                            cancelButtonColor: '#BE2323',
                            reverseButtons: true,
                            padding: '20px',
                            backdrop: true,
                            allowOutsideClick: true,
                            allowEscapeKey: true,
                            allowEnterKey: false,
                        }).then((result) => {
                            if (result.isConfirmed) {
                                Swal.fire({
                                    title: '¿Quieres agregar una observación a la revisión?',
                                    text: "¡No podras escribirla luego!",
                                    input: 'textarea',
                                    icon: 'info',
                                    inputPlaceholder: 'Escribe tu observación aquí...',
                                    inputAttributes: {
                                        'aria-label': 'Escribe tu observación aquí'
                                    },
                                    showCancelButton: true,
                                    confirmButtonText: 'Guardar Observación',
                                    cancelButtonText: 'No, cancelar',
                                    confirmButtonColor: '#007BFF',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    cancelButtonColor: '#BE2323',
                                    confirmButtonColor: '#007BFF',
                                    cancelButtonColor: '#BE2323',
                                    inputValidator: (value) => {
                                        if (!value && selectedValue ==
                                            "Rechazado") {
                                            return '¡Debes escribir una observación!';
                                        }
                                    }
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        const observacion = result.value;
                                        handleApprovalChange(activityId,
                                            selectedValue, observacion)
                                    } else {
                                        this.value = "Pendiente"
                                        /*const observacion = '';
                                        handleApprovalChange(activityId,
                                            selectedValue, observacion)*/
                                    }
                                });

                            } else {
                                this.value = 'Pendiente';

                            }
                        });
                    }
                });
            });
        });

        // Función para manejar el cambio de aprobación
        function handleApprovalChange(activityId, selectedValue, observacion) {
            const formData = new FormData();
            formData.append('id', activityId);
            formData.append('estado', selectedValue);
            formData.append('observacion', observacion);
            formData.append('_token', "{{ csrf_token() }}");

            $.ajax({
                url: '{{ route('actividad.aprobacion') }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    document.getElementById('loadingOverlay').style
                        .display = 'block';
                },
                success: function(data) {
                    toastr["success"](data.success);
                    const badge = document.getElementById(`badge_${activityId}`);
                    const deleteButton = document.querySelector(`.delete-file[data-id="${activityId}"]`);
                    const selectIput = document.getElementById(`aprobacion_${activityId}`);
                    const observacionInput = document.getElementById(`observaciones_${activityId}`);
                    if (badge) {
                        if (selectedValue == 'Aprobado') {
                            badge.classList.remove('badge-warning', 'badge-danger', 'badge-primary');
                            badge.classList.add('badge-success');
                            badge.textContent = 'Aprobado';
                            if (deleteButton) {
                                deleteButton.style.display = 'none';
                            }
                        } else if (selectedValue == 'Rechazado') {
                            badge.classList.remove('badge-warning', 'badge-success', 'badge-primary');
                            badge.classList.add('badge-danger');
                            badge.textContent = 'Rechazado';
                        } else {
                            badge.classList.remove('badge-warning', 'badge-danger', 'badge-success');
                            badge.classList.add('badge-primary');
                            badge.textContent = 'En espera de revisión';
                        }


                        if (selectIput) {
                            selectIput.disabled = true;
                        }

                        if (observacionInput) {
                            observacionInput.value = observacion;
                        }


                    }
                },
                error: function(xhr) {
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        toastr["error"](xhr.responseJSON.error);
                    } else {
                        toastr["error"]('Hubo un error al cambiar el estado de revisión.');
                    }
                },

                complete: function() {
                    document.getElementById('loadingOverlay').style
                        .display = 'none';
                }
            });
        };
    </script>
@endsection