{{-- La presentación visual se centraliza en las tarjetas globales homologadas. --}}
@if (!config('notificaciones.mostrar_presentacion_legacy', false))
    @php return; @endphp
@endif

<style>
    .custom-alert {
        background-color: purple;
        color: white;
    }
    .custom-liga {
        color: aqua;
    }
</style>
@php
use App\Modificacion_Firma_Notificacion_x_Usuario;
use App\Modificacion_Firma_Notificacion;

use App\Http\Controllers\usuarios_controller;
/*$name_space = url()->current();
$arr_name_space = explode('/',$name_space);
$name_space = $arr_name_space[3];
$name_space = "control_documentos";
$id_modulo = usuarios_controller::obtener_id_modulo($name_space);*/

    $notificaciones_requisicion_de_compra = Modificacion_Firma_Notificacion_x_Usuario::select(
            'modificacion_firma_notificacion_x_usuarios.id_modificacion_firma_notificacion_x_usuario',
            'modificacion_firma_notificaciones.id_modificacion',
            'modificacion_firma_notificaciones.mensaje',
            'modificacion_firma_notificaciones.fecha',
            'modificacion_firma_notificaciones.id_usuario_emisor'
        )
        ->join('modificacion_firma_notificaciones','modificacion_firma_notificacion_x_usuarios.id_modificacion_firma_notificacion','=','modificacion_firma_notificaciones.id_modificacion_firma_notificacion')
        ->join('usuarios','modificacion_firma_notificacion_x_usuarios.id_usuario_receptor','=','usuarios.id_usuario')
        ->where('modificacion_firma_notificacion_x_usuarios.estatus',0)
        ->where('modificacion_firma_notificacion_x_usuarios.id_usuario_receptor',session('id_usuario'))
        ->orderByDesc('modificacion_firma_notificacion_x_usuarios.id_modificacion_firma_notificacion_x_usuario')
        ->get();

@endphp
<div class="accordion" id="accordionFirmasModificacion">

@foreach ($notificaciones_requisicion_de_compra as $index => $notificacion)

@php
    $collapseId = 'collapse_firma_'.$notificacion->id_modificacion_firma_notificacion_x_usuario;
    $isOpen = $index === 0;
    $usuario_emisor = usuario_emisor_notificacion_1($notificacion->id_usuario_emisor);
@endphp

<div class="card mb-2">

    {{-- HEADER --}}
    <div class="card-header p-2 custom-alert">
        <button class="btn btn-link w-100 text-left text-white"
                data-toggle="collapse"
                data-target="#{{ $collapseId }}"
                aria-expanded="{{ $isOpen ? 'true' : 'false' }}">

            <strong>Firma de Formato de Modificación</strong>
            – {{ date("d-m-Y",strtotime($notificacion->fecha)) }}
        </button>
    </div>

    {{-- COLLAPSE --}}
    <div id="{{ $collapseId }}"
         class="collapse {{ $isOpen ? 'show' : '' }}"
         data-parent="#accordionFirmasModificacion">

        <div id="{{$notificacion->id_modificacion_firma_notificacion_x_usuario}}_div_notificacion"
             class="alert {{ $notificacion->estatus == 1 ? 'alert-success' : 'alert-danger' }}"
             role="alert">

            <a class="custom-liga"
               href="{{url('modificaciones/firmas/'.$notificacion->id_modificacion)}}">
               El siguiente formato de modificación requiere su atención
            </a>

            <br><br>

            <p>
                <strong>Mensaje de:
                    {{$usuario_emisor->nombre." ".$usuario_emisor->apellidos}}
                </strong>
                <br>
                {{$notificacion->mensaje}}
            </p>

            <button id="{{$notificacion->id_modificacion_firma_notificacion_x_usuario}}"
                class="ui button fluid {{ $notificacion->estatus == 1 ? 'green' : 'red' }} mt-3 notificacion_requisicion"
                data-id_modificacion_firma_notificacion_x_usuario="{{$notificacion->id_modificacion_firma_notificacion_x_usuario}}">
                
                {{ $notificacion->estatus == 1 ? 'Enterado' : 'Sin Revisar' }}

            </button>

        </div>
    </div>

</div>

@endforeach

</div>
@php
    function usuario_emisor_notificacion_1($id_usuario_emisor){
        $emisor = Modificacion_Firma_Notificacion::select(
            'usuarios.nombre',
            'usuarios.apellidos'
        )
        ->join('usuarios','modificacion_firma_notificaciones.id_usuario_emisor','=','usuarios.id_usuario')
        ->where('id_usuario_emisor',$id_usuario_emisor)
        ->first();

        return $emisor;
    }
@endphp
<script>
    $(document).on('click','.notificacion_requisicion',function(){
        id_modificacion_firma_notificacion_x_usuario = $(this).data("id_modificacion_firma_notificacion_x_usuario");
        
        $.ajax({
            url:"{{url('change_modificacion_firma_notificacion')}}",
            method:"POST",
            data:{'id_modificacion_firma_notificacion_x_usuario': id_modificacion_firma_notificacion_x_usuario, _token: '{{csrf_token()}}'},
            success:function(response){
                //alert(response);
                result = JSON.parse(response); 
                resultData = result.data;
                console.log(resultData);
                if (resultData['estatus']== 0) {
               
                    $('#'+id_modificacion_firma_notificacion_x_usuario).removeClass("green");
                    $('#'+id_modificacion_firma_notificacion_x_usuario).addClass("red");
                    $('#'+id_modificacion_firma_notificacion_x_usuario).text('Sin Revisar');
                    $('#'+id_modificacion_firma_notificacion_x_usuario+'_div_notificacion').removeClass("alert-success");
                    $('#'+id_modificacion_firma_notificacion_x_usuario+'_div_notificacion').addClass("alert-danger");
                    
                }
                if (resultData['estatus'] == 1) {

    let btn = $('#'+id_modificacion_firma_notificacion_x_usuario);
    let alertDiv = $('#'+id_modificacion_firma_notificacion_x_usuario+'_div_notificacion');

    btn.removeClass("red")
       .addClass("green")
       .text('Enterado');

    alertDiv.removeClass("alert-danger")
            .addClass("alert-success");

    // Esperar medio segundo y desaparecer TODO el card del acordeón
    setTimeout(function() {
        alertDiv.closest('.card').fadeOut(400, function(){
            $(this).remove();
        });
    }, 500);
}

                
                
            }
        });
        
    });
</script>