@extends('fragments.fullTemplate')
@php
//use App\Modificaciones_x_Informes;
$id_usuario = session('id_usuario');
if (!session('id_usuario')) {
header('location: /');
die();
}
@endphp
@section('contenido')
<div class="ui big breadcrumb">
    <div class="section">Atención a clientes</div>
    <i class="right chevron icon divider"></i>
    <div class="section">Modificaciones</div>
    <i class="right chevron icon divider"></i>
    <div class="active section">Firmas</div>
</div>

<div class="ui divider"></div>
<div data-module-notifications-anchor></div>
<div class="content">
    <div class="col-lg-12 col-md-12 col-sm-12">
        @if(session()->has('success'))
        <div class="alert alert-success text-center alert-dismissible" role="alert">
            <strong>{{ session()->get('success') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
        </div>
        @endif
        @if(session()->has('warning'))
        <div class="alert alert-warning text-center alert-dismissible" role="alert">
            <strong>{{ session()->get('warning') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
        </div>
        @endif
        @if(session()->has('error'))
        <div class="alert alert-danger text-center alert-dismissible" role="alert">
            <strong>{{ session()->get('error') }}</strong>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
        </div>
        @endif
        @if (count($errors) > 0)
        <div class="alert alert-danger alert-dismissible" role="alert">
            <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
</div>


@include('Modificaciones.Notificacion.notificacion_modificacion_firma_modal')
<div class="form-group">
    @if ($permisos->crear == 1)
    <a class="ui button fluid blue create_notificacion">
        <i class="icon send"></i> Crear notificación
    </a>
    <div class="ui divider"></div>
    @endif
</div>
<div class="sx-autorender">
    <div class="sx-scroll-x">
        <div class="card">
            <div class="card-header">
                <strong>Detalles de la modificación</strong>
            </div>

            <div class="card-body">

                {{-- DATOS GENERALES --}}
                <div class="form-group row">
                    <div class="form-group col-md-4">
                        <label class="font-weight-bold">Descripción</label>
                        <p>{{ $datos_modificacion->modificacion_descripcion }}</p>
                    </div>

                    <div class="form-group col-md-4">
                        <label class="font-weight-bold">Fecha solicitud</label>
                        <p>{{ date("d-m-Y", strtotime($datos_modificacion->fecha_solicitud)) }}</p>
                    </div>

                    <div class="form-group col-md-4">
                        <label class="font-weight-bold">Persona que solicita cambio</label>
                        <p>{{ $datos_modificacion->persona_solicita_cambio }}</p>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="form-group col-md-4">
                        <label class="font-weight-bold">Modificación validada por</label>
                        <p>{{ $datos_modificacion->nombre_usuario }}
                            {{ $datos_modificacion->apellidos_usuario }}
                        </p>
                    </div>

                    <div class="form-group col-md-4">
                        <label class="font-weight-bold">Fecha de validación</label>
                        <p>{{ $datos_modificacion->fecha_validacion }}</p>
                    </div>
                    @if($datos_modificacion->fecha_envio_email)
                    <div class="ui message">
                        <strong>Fecha de envío de formato de modificación al cliente</strong><br>
                        {{ \Carbon\Carbon::parse($datos_modificacion->fecha_envio_email)->format('d-m-Y H:i:s') }}
                    </div>
                    @endif
                </div>



                {{-- ================= TABLA DE FIRMAS ================= --}}
                <div class="form-group">
                    @php
$tiposFirma = [
    'Recibio solicitud de modificación',
    'Persona responsable del cambio',
    'Jefe de área afectada',
    'Coordinador de cambios revisa modificación',
    'Envío al cliente (Cobranza o Cambios)',
    'Reviso Área de calidad'
];
@endphp

                    @php
                    $ordenFirmas = [
    'Recibio solicitud de modificación',
    'Persona responsable del cambio',
    'Jefe de área afectada',
    'Coordinador de cambios revisa modificación',
    'Envío al cliente (Cobranza o Cambios)',
    'Reviso Área de calidad'
];

                    $ultimoFirmado = -1;

                    foreach ($ordenFirmas as $index => $tipo) {
                    if (isset($firmas[$tipo]) && $firmas[$tipo]->estatus_firma == 1) {
                    $ultimoFirmado = $index;
                    } else {
                    break;
                    }
                    }
                    @endphp
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Tipo Firma</th>
                                <th>Modificado por</th>
                                <th class="collapsing">Estatus</th>
                                <th class="collapsing">Acciones</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($tiposFirma as $tipo)
                            @php
                            $firma = $firmas[$tipo] ?? null;
                            @endphp

                            <tr>
                                <th>{{ $tipo }}</th>

                                {{-- USUARIO --}}
                                <td>
                                    {{ $firma->nombre ?? '' }} {{ $firma->apellidos ?? '' }}
                                </td>

                                {{-- ESTATUS --}}
                                <td class="text-center">
                                    @if($firma && $firma->estatus_firma == 1)
                                    <span class="btn btn-success status_firma">Iniciado</span>
                                    @else
                                    <span class="btn btn-danger status_firma">No iniciado</span>
                                    @endif
                                </td>

                                {{-- ACCIÓN --}}
                                <td>
                                    @php
                                    $indexActual = array_search($tipo, $ordenFirmas);
                                    $puedeFirmar = ($indexActual === $ultimoFirmado + 1) || ($firma && $firma->estatus_firma == 1);
                                    @endphp

                                    @if($puedeFirmar)
                                    <button
                                        class="ui button fluid {{ ($firma && $firma->estatus_firma == 1) ? 'green' : 'blue' }} firma_modificacion"
                                        data-id_modificacion="{{ $id_modificacion }}"
                                        data-tipo_firma="{{ $tipo }}"
                                        data-id_usuario="{{ session('id_usuario') }}">
                                        <i class="icon pencil"></i>
                                        {{ ($firma && $firma->estatus_firma == 1) ? 'Firmado' : 'Sin Firmar' }}
                                    </button>
                                    @else
                                    <button class="ui button fluid disabled">
                                        <i class="icon lock"></i>
                                        Bloqueado
                                    </button>
                                    @endif

                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="ui divider"></div>
                <div class="form-group">
                    @if ((int) $datos_modificacion->id_tipo_modificacion === 4)
                        <button type="button" class="ui grey fluid button disabled"
                            title="Este tipo de modificación no utiliza formato PDF" disabled>
                            <i class="file alternate icon"></i> Formato no disponible
                        </button>
                    @else
                        <a target="_blank" href="{{url($id_modificacion . '/formato_modificacion_pdf')}}"
                            class="ui google plus fluid button">
                            <i class="file alternate icon"></i> Descarga de formato de modificación
                        </a>
                    @endif
                    <br><br>
                    <a class="ui button fluid orange show_evidencias" data-id_modificacion="{{ $id_modificacion }}">
                        <i class="images alternate icon"></i> Evidencias
                    </a>
                </div>

            </div>

        </div>

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

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <a href="{{url('modificaciones')}}" class="ui button gray" type="submit">
                    <i class="arrow circle left icon"></i>Atrás
                </a>
            </div>
        </div>

        @include('Modificaciones.show_evidencias')
        <script>
            $(document).on('click', '.show_evidencias', function() {
                //id_modificacion = $(this).data('id_modificacion');
                var datos_evidencia = @json($datos_evidencia);
                html_test = "";
                if (datos_evidencia.length > 0) {
                    $.each(datos_evidencia, function(key, value) {
                        arr_nombre_archivo = value['nombre_archivo'].split('.');
                        extension_archivo = arr_nombre_archivo[1];

                        html_test += "<tr id='row_table_evidencia_show_edit" + value['id_modificacion_evidencia'] + "' data-id_modificacion_evidencia='" + value['id_modificacion_evidencia'] + "'>";
                        if (extension_archivo == 'png' || extension_archivo == 'jpg' || extension_archivo == 'jpeg') {
                            html_test += "<td><a href='#' id='" + value['id_modificacion_evidencia'] + "' class='show_modal_img_evidencia'><img class='img-thumbnail' src='{{asset('storage/evidencias_modificaciones/')}}/" + value['nombre_archivo'] + "'></a></td>";

                        } else {
                            html_test += "<td><a target='_blank' href='{{asset('storage/evidencias_modificaciones/')}}/" + value['nombre_archivo'] + "' id='" + value['id_modificacion_evidencia'] + "' class='ui button blue fluid'>Ver Archivo</a></td>";

                        }

                        html_test += "<td>" + value['nombre_archivo'] + "</td>";
                        html_test += "<td>" + value['tipo'] + "</td>";
                        html_test += "<td class='text-center '><div class='ui tiny icon buttons'><a id='" + value['id_modificacion_evidencia'] + "' title='Eliminar evidencia' class='ui button red delete_evidencia_show_tabla'><i class='trash alternate icon'></i></a></div></td>";
                        html_test += "</tr>";
                        $('#div_tabla_show_evidencias_modal').html(html_test);

                    });
                } else {
                    $('#div_tabla_show_evidencias_modal').html(html_test);
                }

                $('#show_evidencias_modal').modal('show');

            });
        </script>
        @include('Modificaciones.create_notificacion_firma_modal')
        <script>
            $(document).on('click', '.create_notificacion', function() {
                $('#create_notificacion_modificacion_firma_modal').modal('show');
            });
        </script>
        @include('Modificaciones.delete_notificacion_firma_modal')
        <script>
            $(document).on('click', '.delete_notificacion', function() {
                var boton = $(this);

                // Transporta la identidad exacta y el tipo de persistencia de la fila seleccionada.
                $('#id_modificacion_firma_notificacion_delete').val(boton.data('id_modificacion_firma_notificacion') || '');
                $('#id_notificacion_global_delete').val(boton.data('id_notificacion_global') || '');
                $('#origen_notificacion_delete').val(boton.data('origen_notificacion') || 'historico');
                $('#tabla_origen_notificacion_delete').val(boton.data('tabla_origen') || '');
                $('#id_modificacion_notificacion_delete').val(boton.data('id_modificacion') || '');

                $('#delete_notificacion_modificacion_firma_modal').modal('show');
            });
        </script>
        <script>
            $(document).on('click', '.firma_modificacion', function() {

                let boton = $(this);
                if (boton.data('procesando')) {
                    return;
                }
                let fila = boton.closest("tr");
                let statusSpan = fila.find(".status_firma");

                let id_modificacion = boton.data('id_modificacion');
                let id_usuario = boton.data('id_usuario');
                let tipo_firma = boton.data('tipo_firma');

                // CONFIRMACIÓN
                if (!confirm('¿Seguro que desea firmar "' + tipo_firma + '"?')) {
                    return; // cancela si el usuario dice NO
                }

                // Evita que dos clics consecutivos inviertan dos veces la firma.
                boton.data('procesando', true).prop('disabled', true);

                $.ajax({
                    url: '{{ url("firmar_modificacion") }}',
                    method: 'POST',
                    data: {
                        id_modificacion,
                        id_usuario,
                        tipo_firma,
                        _token: '{{ csrf_token() }}'
                    },

                    success: function(response) {

                        if (!response.success) {
                            alert(response.msg);
                            boton.data('procesando', false).prop('disabled', false);
                            return;
                        }

                        let estatus = response.data.datos_firma.estatus_firma;

                        if (estatus == 1) {

    boton
        .removeClass("blue")
        .addClass("green")
        .text("Firmado")
        .prop("disabled", true);

    statusSpan
        .removeClass("btn-danger")
        .addClass("btn-success")
        .text("Iniciado");
}
                        alert('Firma realizada con éxito.');

                        // 🔄 recargar para recalcular el flujo
                        location.reload();
                    },
                    error: function(xhr) {
                        var mensaje = xhr.responseJSON && xhr.responseJSON.msg
                            ? xhr.responseJSON.msg
                            : 'No fue posible guardar la firma.';
                        alert(mensaje);
                        boton.data('procesando', false).prop('disabled', false);
                    }
                });
            });
        </script>


        @endsection