@php
    $id_usuario = session('id_usuario');

    /*
     * PASO 1:
     * Se consulta el usuario actual para validar firma digital y mostrar
     * sus datos completos cuando firma desde esta modal.
     */
    $usuario_actual_firma_2_3 = \App\Usuarios::select(
            'usuarios.id_usuario',
            'usuarios.nombre',
            'usuarios.apellidos',
            'usuarios.firma_digital',
            'tipo_usuarios.tipo_usuario as puesto_firmante',
            'areas.nombre as area_firmante'
        )
        ->leftJoin('tipo_usuarios', 'usuarios.id_tipo_usuario', '=', 'tipo_usuarios.id_tipo_usuario')
        ->leftJoin('areas', 'tipo_usuarios.id_area', '=', 'areas.id_area')
        ->where('usuarios.id_usuario', $id_usuario)
        ->first();

    $usuario_actual_tiene_firma_2_3 = (
        $usuario_actual_firma_2_3 &&
        $usuario_actual_firma_2_3->firma_digital != null &&
        $usuario_actual_firma_2_3->firma_digital != ''
    );

    $nombre_usuario_actual_2_3 = $usuario_actual_firma_2_3
        ? trim($usuario_actual_firma_2_3->nombre.' '.$usuario_actual_firma_2_3->apellidos)
        : '';

    $puesto_usuario_actual_2_3 = $usuario_actual_firma_2_3
        ? trim($usuario_actual_firma_2_3->puesto_firmante ?: $usuario_actual_firma_2_3->area_firmante)
        : '';

    if ($puesto_usuario_actual_2_3 === '') {
        $puesto_usuario_actual_2_3 = 'Puesto no registrado';
    }

    $obtener_firma_url_2_3 = function ($nombreFirma) {
        $nombreFirma = trim((string) $nombreFirma);

        if ($nombreFirma === '') {
            return '';
        }

        $rutaFirma = storage_path('app/public/archivos_usuario/'.$nombreFirma);

        if (!file_exists($rutaFirma) || !is_file($rutaFirma)) {
            return '';
        }

        $mime = function_exists('mime_content_type')
            ? mime_content_type($rutaFirma)
            : 'image/png';

        if (!$mime) {
            $mime = 'image/png';
        }

        return 'data:'.$mime.';base64,'.base64_encode(file_get_contents($rutaFirma));
    };

    $firma_usuario_actual_url_2_3 = $usuario_actual_tiene_firma_2_3
        ? $obtener_firma_url_2_3($usuario_actual_firma_2_3->firma_digital)
        : '';

    $obtener_puesto_firma_2_3 = function ($firma) {
        if (!$firma) {
            return 'Puesto no registrado';
        }

        $puesto = trim($firma->puesto_firmante ?: $firma->area_firmante);

        return $puesto !== '' ? $puesto : 'Puesto no registrado';
    };

    $estatus_requisicion_2_3 = isset($datos_reporte->estatus)
        ? (int) $datos_reporte->estatus
        : 1;
@endphp

<div class="modal fade" name="create_seccion2_3_modal" id="create_seccion2_3_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog modal-xl" role="document">
        <div class="modal-content">

            <form action="{{ url('create_seccion2_3_reporte') }}" method="post" id="form_seccion2_3_aprobacion">
                {{ csrf_field() }}

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">2.3 Aprobación</h5>
                    <button type="button" class="close reset" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="card text-center">
                        <div class="card-header">
                            Datos generales
                        </div>

                        <div class="card-body">

                            @if ($modo_firma_anticipada_2_3)
                                <div class="alert alert-info text-left">
                                    <strong>Firma anticipada:</strong> las secciones 1 y 2 ya están completas; esta excepción permite registrar la firma del responsable de área cuando las únicas secciones todavía pendientes son 2.1 y/o 2.2. La requisición permanecerá pendiente y no se generarán notificaciones ni se habilitarán pagos.
                                </div>
                            @endif

                            @if (!$modo_firma_anticipada_2_3)
                            <div class="form-row">
                                <div class="form-group col-md-12 text-left">
                                    <label><strong>Estatus de aprobación</strong></label>
                                    <select name="estatus_aprobacion" id="estatus_aprobacion_2_3" class="form-control" required {{ !$puede_firmar_aprobacion ? 'disabled' : '' }}>
                                        <option value="1" {{ $estatus_requisicion_2_3 === 1 ? 'selected' : '' }}>Pendiente</option>
                                        <option value="2" {{ $estatus_requisicion_2_3 === 2 ? 'selected' : '' }}>Aprobado</option>
                                        <option value="0" {{ $estatus_requisicion_2_3 === 0 ? 'selected' : '' }}>No aprobado</option>
                                    </select>
                                    @if (!$puede_firmar_aprobacion)
                                        <input type="hidden" name="estatus_aprobacion" value="{{ $estatus_requisicion_2_3 }}">
                                    @endif
                                </div>

                                <div class="form-group col-md-12 text-left" id="contenedor_motivo_no_aprobado_2_3" style="{{ $estatus_requisicion_2_3 === 0 ? '' : 'display:none;' }}">
                                    <label><strong>Motivo por el cual no fue aprobado</strong></label>
                                    <textarea name="motivo_cancelacion"
                                              id="motivo_cancelacion_2_3"
                                              class="form-control"
                                              rows="5"
                                              style="width: 100%;"
                                              {{ !$puede_firmar_aprobacion ? 'readonly' : '' }}
                                              placeholder="Motivo por el cual no fue aprobado">{{ $datos_reporte->motivo_cancelacion }}</textarea>
                                </div>
                            </div>
                            @else
                                <input type="hidden" name="estatus_aprobacion" value="1">
                                <input type="hidden" name="firmar_area_administrativa" value="0">
                            @endif

                            <div class="ui divider"></div>

                            @if(!$modo_firma_anticipada_2_3 && isset($mensaje_firmas_faltantes_aprobacion) && $mensaje_firmas_faltantes_aprobacion && $estatus_requisicion_2_3 !== 0)
                                <div class="alert alert-warning text-left" id="aviso_firmas_faltantes_2_3">
                                    <strong>Firmas pendientes:</strong> {{ $mensaje_firmas_faltantes_aprobacion }}
                                </div>
                            @endif

                            <div class="form-row">

                                {{-- Firma responsable de área = Área técnica --}}
                                <div class="form-group {{ $modo_firma_anticipada_2_3 ? 'col-md-12' : 'col-md-6' }} text-center">

                                    <div id="firma_area_tecnica_img_2_3" class="firma-preview-bloque-2-3" style="{{ (int)$firma_area_tecnica->estatus_firma === 1 ? '' : 'display:none;' }}">
                                        <p style="margin-bottom:8px; font-weight:bold;">Firma responsable de área</p>
                                        @if ((int)$firma_area_tecnica->estatus_firma === 1)
                                            @php
                                                $firma_area_tecnica_url_2_3 = $obtener_firma_url_2_3($firma_area_tecnica->firma_digital);
                                            @endphp
                                            <p style="margin-bottom:4px;">
                                                <span class="firma-preview-puesto">{{ $obtener_puesto_firma_2_3($firma_area_tecnica) }}</span>
                                            </p>

                                            <div>
                                                @if ($firma_area_tecnica_url_2_3)
                                                    <img class="firma-preview-img img-thumbnail"
                                                         style="max-height:90px; max-width:180px; margin-top:6px;"
                                                         src="{{ $firma_area_tecnica_url_2_3 }}"
                                                         alt="Firma responsable de área">
                                                    <p class="firma-preview-sin-firma text-muted" style="display:none; margin-top:6px;">El usuario no tiene firma registrada.</p>
                                                @else
                                                    <img class="firma-preview-img img-thumbnail"
                                                         style="display:none; max-height:90px; max-width:180px; margin-top:6px;"
                                                         src=""
                                                         alt="Firma responsable de área">
                                                    <p class="firma-preview-sin-firma text-muted" style="margin-top:6px;">El usuario no tiene firma registrada.</p>
                                                @endif
                                            </div>

                                            <p style="margin-top:6px; margin-bottom:4px;">
                                                <span class="firma-preview-nombre">{{ trim($firma_area_tecnica->nombre.' '.$firma_area_tecnica->apellidos) }}</span>
                                            </p>
                                        @else
                                            <p style="margin-bottom:4px;">
                                                <span class="firma-preview-puesto"></span>
                                            </p>
                                            <div>
                                                <img class="firma-preview-img img-thumbnail"
                                                     style="display:none; max-height:90px; max-width:180px; margin-top:6px;"
                                                     src=""
                                                     alt="Firma responsable de área">
                                                <p class="firma-preview-sin-firma text-muted" style="display:none; margin-top:6px;">El usuario no tiene firma registrada.</p>
                                            </div>
                                            <p style="margin-top:6px; margin-bottom:4px;">
                                                <span class="firma-preview-nombre"></span>
                                            </p>
                                        @endif
                                    </div>

                                    <button type="button"
                                            id="btn_firma_area_tecnica_2_3"
                                            {{ !$puede_firmar_responsable_area ? 'disabled' : '' }}
                                            class="ui button fluid {{ (int)$firma_area_tecnica->estatus_firma === 1 ? 'green' : 'blue' }} btn-firma-2-3"
                                            data-target-hidden="#firmar_area_tecnica_2_3"
                                            data-target-img="#firma_area_tecnica_img_2_3"
                                            data-texto-firmado="Firmado por responsable de área"
                                            data-texto-pendiente="Firma responsable de área">
                                        {{ (int)$firma_area_tecnica->estatus_firma === 1 ? 'Firmado por responsable de área' : 'Firma responsable de área' }}
                                    </button>

                                    <input type="hidden"
                                           name="firmar_area_tecnica"
                                           id="firmar_area_tecnica_2_3"
                                           value="{{ (int)$firma_area_tecnica->estatus_firma === 1 ? 1 : 0 }}">

                                    <input type="hidden"
                                           name="id_firma_area_tecnica"
                                           value="{{ $firma_area_tecnica->id_requisicion_firma }}">
                                </div>

                                {{-- Firma de aprobación = Área administrativa --}}
                                @if (!$modo_firma_anticipada_2_3)
                                <div class="form-group col-md-6 text-center">

                                    <div id="firma_area_administrativa_img_2_3" class="firma-preview-bloque-2-3" style="{{ (int)$firma_area_administrativa->estatus_firma === 1 ? '' : 'display:none;' }}">
                                        <p style="margin-bottom:8px; font-weight:bold;">Firma de aprobación</p>
                                        @if ((int)$firma_area_administrativa->estatus_firma === 1)
                                            @php
                                                $firma_area_administrativa_url_2_3 = $obtener_firma_url_2_3($firma_area_administrativa->firma_digital);
                                            @endphp
                                            <p style="margin-bottom:4px;">
                                                <span class="firma-preview-puesto">{{ $obtener_puesto_firma_2_3($firma_area_administrativa) }}</span>
                                            </p>

                                            <div>
                                                @if ($firma_area_administrativa_url_2_3)
                                                    <img class="firma-preview-img img-thumbnail"
                                                         style="max-height:90px; max-width:180px; margin-top:6px;"
                                                         src="{{ $firma_area_administrativa_url_2_3 }}"
                                                         alt="Firma de aprobación">
                                                    <p class="firma-preview-sin-firma text-muted" style="display:none; margin-top:6px;">El usuario no tiene firma registrada.</p>
                                                @else
                                                    <img class="firma-preview-img img-thumbnail"
                                                         style="display:none; max-height:90px; max-width:180px; margin-top:6px;"
                                                         src=""
                                                         alt="Firma de aprobación">
                                                    <p class="firma-preview-sin-firma text-muted" style="margin-top:6px;">El usuario no tiene firma registrada.</p>
                                                @endif
                                            </div>

                                            <p style="margin-top:6px; margin-bottom:4px;">
                                                <span class="firma-preview-nombre">{{ trim($firma_area_administrativa->nombre.' '.$firma_area_administrativa->apellidos) }}</span>
                                            </p>
                                        @else
                                            <p style="margin-bottom:4px;">
                                                <span class="firma-preview-puesto"></span>
                                            </p>
                                            <div>
                                                <img class="firma-preview-img img-thumbnail"
                                                     style="display:none; max-height:90px; max-width:180px; margin-top:6px;"
                                                     src=""
                                                     alt="Firma de aprobación">
                                                <p class="firma-preview-sin-firma text-muted" style="display:none; margin-top:6px;">El usuario no tiene firma registrada.</p>
                                            </div>
                                            <p style="margin-top:6px; margin-bottom:4px;">
                                                <span class="firma-preview-nombre"></span>
                                            </p>
                                        @endif
                                    </div>

                                    <button type="button"
                                            id="btn_firma_area_administrativa_2_3"
                                            {{ !$puede_firmar_aprobacion ? 'disabled' : '' }}
                                            class="ui button fluid {{ (int)$firma_area_administrativa->estatus_firma === 1 ? 'green' : 'blue' }} btn-firma-2-3"
                                            data-target-hidden="#firmar_area_administrativa_2_3"
                                            data-target-img="#firma_area_administrativa_img_2_3"
                                            data-texto-firmado="Firmado por aprobación"
                                            data-texto-pendiente="Firma de aprobación">
                                        {{ (int)$firma_area_administrativa->estatus_firma === 1 ? 'Firmado por aprobación' : 'Firma de aprobación' }}
                                    </button>

                                    <input type="hidden"
                                           name="firmar_area_administrativa"
                                           id="firmar_area_administrativa_2_3"
                                           value="{{ (int)$firma_area_administrativa->estatus_firma === 1 ? 1 : 0 }}">

                                    <input type="hidden"
                                           name="id_firma_area_administrativa"
                                           value="{{ $firma_area_administrativa->id_requisicion_firma }}">
                                </div>
                                @endif

                            </div>

                            <div class="alert alert-warning text-left" style="margin-top:15px;">
                                @if ($modo_firma_anticipada_2_3)
                                    <strong>Nota:</strong> Solo la firma del responsable de área se archivará al presionar <strong>Guardar</strong>.
                                @else
                                    <strong>Nota:</strong> Las firmas se archivan hasta presionar el botón <strong>Guardar</strong>.
                                @endif
                            </div>

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

                <div class="modal-footer">

                    <button type="button" class="btn btn-primary" id="btn_confirmar_guardar_2_3">
                        <i class="save icon"></i> Guardar
                    </button>

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="times icon"></i> Cerrar
                    </button>
                </div>

                <input type="hidden" id="id_requisicion_reporte" name="id_requisicion_reporte" value="{{ $id_requisicion_reporte }}">
                <input type="hidden" id="seccion" name="seccion" value="2.3">

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


<div class="modal fade" id="modal_confirmacion_guardar_2_3" tabindex="-1" role="dialog" aria-labelledby="modalConfirmacionGuardar23Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="modalConfirmacionGuardar23Label">Confirmar actualización</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body text-left">
                <p id="texto_confirmacion_guardar_2_3" style="font-size:15px;"></p>

                <div class="alert alert-warning" style="margin-bottom:0;">
                    @if ($modo_firma_anticipada_2_3)
                        <strong>Importante:</strong> esta acción solo guardará la firma del responsable de área; la requisición seguirá pendiente.
                    @else
                        <strong>Importante:</strong> esta acción guardará los cambios permitidos para tu usuario y generará notificaciones cuando aplique.
                    @endif
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="times icon"></i> Cancelar
                </button>

                <button type="button" class="btn btn-primary" id="btn_guardar_definitivo_2_3">
                    <i class="save icon"></i> Sí, guardar
                </button>
            </div>

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


<script>
    $(document).ready(function () {

        var usuarioTieneFirma2_3 = "{{ $usuario_actual_tiene_firma_2_3 ? 1 : 0 }}";
        var modoFirmaAnticipada2_3 = "{{ $modo_firma_anticipada_2_3 ? 1 : 0 }}";
        var puedeFirmarResponsableArea2_3 = "{{ $puede_firmar_responsable_area ? 1 : 0 }}";
        var puedeFirmarAprobacion2_3 = "{{ $puede_firmar_aprobacion ? 1 : 0 }}";
        var nombreUsuarioActual2_3 = {!! json_encode($nombre_usuario_actual_2_3) !!};
        var puestoUsuarioActual2_3 = {!! json_encode($puesto_usuario_actual_2_3) !!};
        var firmaUsuarioActualUrl2_3 = {!! json_encode($firma_usuario_actual_url_2_3) !!};

        function controlarMotivoNoAprobado2_3(limpiarFirmasPendiente) {
            if (modoFirmaAnticipada2_3 == '1') {
                $('#contenedor_motivo_no_aprobado_2_3').hide();
                return;
            }

            var estatus = $('#estatus_aprobacion_2_3').val();

            if (estatus == '0') {
                $('#contenedor_motivo_no_aprobado_2_3').show();
                $('#motivo_cancelacion_2_3').prop('required', true);
            } else {
                $('#contenedor_motivo_no_aprobado_2_3').hide();
                $('#motivo_cancelacion_2_3').prop('required', false);
            }

            /*
             * Si regresa a Pendiente, visualmente quitamos firmas.
             * La BD se ajustará en el controlador.
             */
            if (limpiarFirmasPendiente && estatus == '1' && puedeFirmarAprobacion2_3 == '1') {
                limpiarFirmaVisual2_3('#btn_firma_area_tecnica_2_3');
                limpiarFirmaVisual2_3('#btn_firma_area_administrativa_2_3');
            }
        }

        function limpiarFirmaVisual2_3(selectorBoton) {
            var boton = $(selectorBoton);
            var hidden = $(boton.data('target-hidden'));
            var contenedorFirma = $(boton.data('target-img'));

            hidden.val(0);

            contenedorFirma.find('.firma-preview-nombre').text('');
            contenedorFirma.find('.firma-preview-puesto').text('');
            contenedorFirma.find('.firma-preview-img').attr('src', '').hide();
            contenedorFirma.find('.firma-preview-sin-firma').hide();
            contenedorFirma.hide();

            boton.removeClass('green').addClass('blue');
            boton.html(boton.data('texto-pendiente'));
        }

        function marcarFirmaVisual2_3(selectorBoton) {
            var boton = $(selectorBoton);
            var hidden = $(boton.data('target-hidden'));
            var contenedorFirma = $(boton.data('target-img'));

            if (usuarioTieneFirma2_3 != '1') {
                alert('No puedes firmar porque tu usuario no tiene una firma digital registrada.');
                return;
            }

            hidden.val(1);

            contenedorFirma.find('.firma-preview-nombre').text(nombreUsuarioActual2_3);
            contenedorFirma.find('.firma-preview-puesto').text(puestoUsuarioActual2_3);

            if (firmaUsuarioActualUrl2_3) {
                contenedorFirma.find('.firma-preview-img').attr('src', firmaUsuarioActualUrl2_3).show();
                contenedorFirma.find('.firma-preview-sin-firma').hide();
            } else {
                contenedorFirma.find('.firma-preview-img').attr('src', '').hide();
                contenedorFirma.find('.firma-preview-sin-firma').show();
            }

            contenedorFirma.show();

            boton.removeClass('blue').addClass('green');
            boton.html(boton.data('texto-firmado'));
        }

        $('#estatus_aprobacion_2_3').on('change', function () {
            controlarMotivoNoAprobado2_3(true);
        });

        $('.btn-firma-2-3').on('click', function () {
            var estatus = $('#estatus_aprobacion_2_3').val();
            var idBoton = $(this).attr('id');

            if (idBoton == 'btn_firma_area_tecnica_2_3' && puedeFirmarResponsableArea2_3 != '1') {
                alert('No tienes permiso para firmar como responsable de área.');
                return;
            }

            if (idBoton == 'btn_firma_area_administrativa_2_3' && puedeFirmarAprobacion2_3 != '1') {
                alert('No tienes permiso para firmar la aprobación.');
                return;
            }

            if (idBoton == 'btn_firma_area_administrativa_2_3' && estatus == '1') {
                alert('Selecciona Aprobado o No aprobado para capturar la firma de aprobación.');
                return;
            }

            marcarFirmaVisual2_3('#' + idBoton);
        });


        /* VERSION 1.1 */
        var permitirEnvioFormulario2_3 = false;

        function validarFormularioSeccion2_3() {
            if (modoFirmaAnticipada2_3 == '1') {
                if ($('#firmar_area_tecnica_2_3').val() != '1') {
                    alert('Debes capturar la firma del responsable de área.');
                    return false;
                }

                return true;
            }

            var estatus = $('#estatus_aprobacion_2_3').val();

            if (estatus == '0' && $.trim($('#motivo_cancelacion_2_3').val()) == '') {
                alert('Debes capturar el motivo por el cual no fue aprobado.');
                return false;
            }

            if (estatus == '2' && puedeFirmarAprobacion2_3 == '1') {
                if ($('#firmar_area_administrativa_2_3').val() != '1') {
                    alert('Para cambiar el estatus debes capturar la firma de aprobación.');
                    return false;
                }
            }

            if (estatus == '0' && puedeFirmarAprobacion2_3 == '1') {
                if ($('#firmar_area_administrativa_2_3').val() != '1') {
                    alert('Para cambiar el estatus debes capturar la firma de aprobación.');
                    return false;
                }
            }

            return true;
        }

        function obtenerTextoConfirmacionSeccion2_3() {
            if (modoFirmaAnticipada2_3 == '1') {
                return '¿Deseas registrar anticipadamente tu firma como responsable de área? La requisición permanecerá pendiente y no se generarán notificaciones ni se habilitarán pagos.';
            }

            var estatus = $('#estatus_aprobacion_2_3').val();

            if (puedeFirmarAprobacion2_3 != '1') {
                return '¿Deseas firmar esta requisición como responsable de área?';
            }

            if (estatus == '2') {
                return '¿Deseas aprobar esta requisición? Se notificará el estatus al solicitante y jefes de área. La notificación de pago a administración se generará cuando estén completas ambas firmas.';
            }

            if (estatus == '0') {
                return '¿Deseas marcar esta requisición como no aprobada? Se notificará al solicitante y jefes de área con el motivo capturado.';
            }

            return '¿Deseas dejar esta requisición como pendiente? Las firmas capturadas para esta sección serán eliminadas.';
        }

        $('#btn_confirmar_guardar_2_3').on('click', function () {
            if (!validarFormularioSeccion2_3()) {
                return false;
            }

            $('#texto_confirmacion_guardar_2_3').text(obtenerTextoConfirmacionSeccion2_3());
            $('#modal_confirmacion_guardar_2_3').modal('show');
        });

        $('#btn_guardar_definitivo_2_3').on('click', function () {
            permitirEnvioFormulario2_3 = true;
            $('#modal_confirmacion_guardar_2_3').modal('hide');
            $('#form_seccion2_3_aprobacion').submit();
        });

        $('#form_seccion2_3_aprobacion').on('submit', function (e) {
            if (!permitirEnvioFormulario2_3) {
                e.preventDefault();
                return false;
            }
        });

        controlarMotivoNoAprobado2_3(false);
    });
</script>