@extends('layouts.template.landing')
@section('styles')
<style type="text/css">
    .control-head {
            text-align: center;
        }

    .control-head .grad-over {
        font-size: 2em;
        font-weight: bold;
        position: relative;
        display: inline-block;
        text-shadow: 2px 2px 2px #fff;
        overflow: hidden;
    }

    .control-head .grad-over:after {
        content: "";
        position: absolute;
        width: 200%;
        height: 100%;
        top: 0;
        left: 0;
        mix-blend-mode: screen;
        -webkit-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }

    .control-head .grad-over:hover:after {
        left: -100%;
    }

    body #timeline-wrapper .timeline-top {
        text-align: center;
    }

    body #timeline-wrapper .timeline-top .top-year {
        display: inline-block;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: #03a9f4;
        color: #fff;
        line-height: 80px;
        text-align: center;
        font-size: 2.8rem;
    }

    body #timeline-wrapper .timeline-top .top-year>span {
        font-size: 3rem;
    }

    body #timeline-wrapper .timeline-block {
        width: 100%;
        height: auto;
        position: relative;
    }

    body #timeline-wrapper .timeline-block:after {
        content: "";
        position: absolute;
        width: 4px;
        height: 100%;
        background-color: #03a9f4;
        left: 50%;
        top: 0;
        margin-left: -2px;
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event {
        float: left;
        position: relative;
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event .thumb {
        right: 0;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event:before,
    body #timeline-wrapper .timeline-block .timeline-events .l-event:after {
        position: absolute;
        content: '';
        color: #333;
        width: 40px;
        height: 40px;
        background: #fff;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        border-radius: 20px;
        z-index: 4;
        top: 50%;
        right: 0;
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event:after {
        width: 60px;
        height: 60px;
        z-index: 3;
        border-radius: 30px;
        background: #03a9f4;
    }

    body #timeline-wrapper .timeline-block .timeline-events .l-event .event-body:before {
        position: absolute;
        content: '';
        color: #333;
        width: 16px;
        height: 16px;
        background: #fff;
        border-top: 1px solid #eee;
        border-right: 1px solid #eee;
        -webkit-transform: rotate(45deg) translate(-50%, -50%);
        transform: rotate(45deg) translate(-50%, -50%);
        border-radius: 3px;
        top: 50%;
        right: -8px;
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event {
        float: right;
        position: relative;
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event .thumb {
        left: 0;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event:before,
    body #timeline-wrapper .timeline-block .timeline-events .r-event:after {
        position: absolute;
        content: '';
        color: #333;
        width: 40px;
        height: 40px;
        background: #fff;
        color: #333;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border-radius: 20px;
        top: 50%;
        left: 0px;
        z-index: 4;
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event:after {
        width: 60px;
        height: 60px;
        z-index: 3;
        border-radius: 30px;
        background: #03a9f4;
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event .event-body {
        float: right;
        -webkit-transform: perspective(1000px) rotateY(-4deg);
        transform: perspective(1000px) rotateY(-4deg);
    }

    body #timeline-wrapper .timeline-block .timeline-events .r-event .event-body:before {
        position: absolute;
        content: '';
        color: #333;
        width: 16px;
        height: 16px;
        background: #fff;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
        -webkit-transform: rotate(45deg) translate(-50%, -50%);
        transform: rotate(45deg) translate(-50%, -50%);
        border-radius: 3px;
        top: 50%;
        left: -8px;
    }

    body #timeline-wrapper .timeline-block .event {
        min-height: 100px;
        background: none;
        position: relative;
        box-shadow: 0px 40px 14px -35px #ccc, 0px -40px 14px -35px #ccc;
        margin-top: 20px;
    }

    body #timeline-wrapper .timeline-block .event .thumb {
        font-size: 30px;
        position: absolute;
        top: 50%;
        color: #333;
        z-index: 5;
    }

    body #timeline-wrapper .timeline-block .event .event-body {
        background-color: #fff;
        min-height: 100px;
        border-radius: 5px;
        padding: 5px 10px;
        width: 90%;
        position: relative;
        border: 1px solid #eee;
    }

    body #timeline-wrapper .timeline-block .event .event-body .person-image {
        display: inline-block;
        text-align: left;
        width: 20%;
        height: min-content;
        margin-right: 10px;
        padding-right: 10px;
        border-right: 1px dashed #eee;
    }

    body #timeline-wrapper .timeline-block .event .event-body .person-image img {
        width: 100%;
        height: 100%;
    }

    @media (max-width: 768px) {
        body #timeline-wrapper .timeline-top {
            text-align: right;
            padding-right: 20%;
        }

        body .timeline-block {
            width: 100%;
            height: 100vh;
            position: relative;
            background-color: #eee;
        }

        body .timeline-block:after {
            content: "";
            position: absolute;
            height: 100%;
            background-color: #333;
            left: 5%;
            top: 0;
            margin-left: -3px;
            display: none;
        }

        body .timeline-block .r-event .event-body:after {
            content: '';
            position: absolute;
            top: 0;
            width: 6px;
            height: 100%;
            background-color: #03a9f4;
            left: -30%;
            border-radius: 3px;
            box-shadow: 1px 1px 1px #fff;
        }

        body .timeline-block .l-event .event-body:after {
            content: '';
            position: absolute;
            top: 0;
            width: 6px;
            height: 100%;
            background-color: #03a9f4;
            right: -30%;
            border-radius: 3px;
            box-shadow: -1px 1px 1px #fff;
        }
        
        .with-formulario{
            width: 80%;
        }
    }
</style>
@endsection
@section('content')
  <!-- Content Wrapper. Contains page content -->
    <!-- Content Header (Page header) -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container">
            <div class="row mb-2">
                <div class="col-sm-6">
                <h1 class="m-0 text-dark">Estado de Radicación</h1>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

        <!-- Main content -->
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card card-info">
                        <div class="card-header p-4">
                        <!-- <h3 class="card-title">Buscar Estado actual del proceso</h3> -->
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->
                        {!!$html['empty'] ?? ''!!}
                        <form action="{{route('getworkflowRadicacion')}}" method="post" class="mx-auto pb-4 pt-4 form-horizontal with-formulario" id="workflowForm">
                            @csrf
                            <div class="mb-3 text-center">
                                <label for="fecha">Fecha de creación <span class="ml-s badge badge-info">Obligatorio</span></label>
                                <input required type="date" name="fecha" id="fecha" class="form-control" value="{{$html['fecha'] ?? ''}}">
                            </div>
                            <div class="mb-3 text-center">
                                <label for="radicado">Número de radicado <span class="ms-2 badge badge-info">Obligatorio</span></label>
                                <input required type="text" name="radicado" id="radicado" class="form-control" value="{{$html['radicado'] ?? ''}}">
                            </div>
                            <button id="submit" class="btn btn-primary w-100" style="background-color: #17a2b8;border: none;">Buscar</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card card-info" id="container-workflow">
                        @php
                            if(isset($html) && array_key_exists('html', $html)){
                                echo $html['html'];
                            }
                        @endphp
                    </div>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </div>
<!-- /.content -->
</div>
@endsection
@section('scripts')
<script type="text/javascript">
  
//   hideSteps();

  //oculta los elementos para mostrarlos como resultados
  function hideSteps(){
    $('#notFound').hide();
    $('.control').hide();
  }

  $(document).ready(function () {
    //oculta los resultados que aún no existen
    //  hideSteps();
     API_URL ="'{{env('APP_URL')}}";
     console.log(API_URL);
      $('#submit').on('click', function () {
        console.log('clickeado');
        let fecha = $('#fecha').val();
        let consecutivo = $("#radicado").val();
        //al hacer clic oculta los elementos para mostrar nueva información
        // hideSteps();
        if(false){
            $.ajax({
                type: 'POST',
                url: API_URL + '/api/consulta/workflow',
                delay:250,
                cache: false,
                data:{
                    radicado: consecutivo,
                    fecha: fecha
                },
                beforeSend: function(a) {
                    $(".overlay").fadeIn(0,function(){
                        $(".ocultar").hide();
                        $(".imagen_preload").css({"width": "80px", "height": "80px","position":"relative","left":"50%","top":"30%","opacity": "0.5","z-index": "5px"});
                        $('#consultar').hide();
                    });
                }
            }).done(function(res){
                $('#consultar').show();
                $('.control').show();
                $('.overlay').css('display', 'none');
                $('#radicado').html(consecutivo);
                $('#counter').html(res.totalDays);
                var estados = res.data;
                //Variables que serán utilizadas más adelante
                var html = '';//Resultado que se mostrará
                var direction =''; //determina la orientación de las tarjetas del workflow (right-left)
                var rowDirection = ''; //ajusta los estilos según la orientación de las tarjetas del workflow

                //Recorremos los resultados del api
                for(i=0; i<= estados.length-1; i++){
                    //pares a la derecha e impares a la izquierda
                    if((i%2)==0){
                        direction = 'event l-event col-md-6 col-sm-6 col-xs-8';
                        rowDirection = 'd-flex flex-row';
                    }else{
                        direction = 'event r-event col-md-6 col-sm-6 col-xs-8';
                        rowDirection = 'd-flex flex-row-reverse';
                    }
                    //icono de que va en el centro en la línea de tiempo
                    var icono = (estados[i].nombre_estado_cod == 1) ? 'fa fa-thumbs-up' : 'fa fa-exclamation-triangle';

                    //estado del proceso. aprobado, pendiente, devuelto.
                    var texto = '';
                    switch(estados[i].nombre_estado_cod){
                        case 0:
                            texto = '<span class="badge badge-warning" style="margin: 0.5px 0px 5px 5px;">Pendiente</span>';
                        break;
                        case 1:
                            texto = '<span class="badge badge-success" style="margin: 0.5px 0px 5px 5px;">Aprobado</span>';
                        break;
                        case 2:
                            texto = '<span class="badge badge-danger" style="margin: 0.5px 0px 5px 5px;">Devuelto</span>';
                        break;
                    }
                    //con los datos tratados, ya se puede cargar los resultados a html
                    html += '<div class="row ' + rowDirection + '">';
                    html += '<div class="' + direction + '"><span class="thumb ' + icono + '"></span>';
                        html += '<div class="event-body">';
                            html += '<div class="person-image pull-left "><img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" alt="person"/></div>';
                            html += '<div class="event-content">';
                            html += '<blockquote class="text-primary text-left">';
                                html += '<div id="prueba" style="display:flex;">';
                                    html += '<span class= "mr-2">' + estados[i].nombre_proceso + '</span>';
                                    html += texto;
                                html += '</div>';
                                html += '<h5 class="text-primary text-left">' + estados[i].etapa + '</h5>';
                                html += '<div class="test">';
                                    html += '<span class="text-muted text-left" style="display:block; margin: 0; font-size: 14px;">Fecha Entrada: '+ estados[i].fecha_inicio + ' a las ' + estados[i].hora_inicio + '</span>';
                                    html += '<span class="text-muted text-left" style="display:block; margin: 0; font-size: 14px;">Fecha Salida: '+ estados[i].fecha_fin + ' a las ' + estados[i].hora_fin + '</span>';
                                html += '</div>';
                            html += '</blockquote>';
                            html += '<blockquote class="text-muted text-left">';
                                    html += '<span><strong>Días por proceso: </strong> <span>' + estados[i].dias + '</span></span>';
                                    html += '<br>';
                                    html += '<cite class="text-muted text-right text-bold"><strong>Responsable: </strong>' + estados[i].nombre_usuario + '</cite>';
                            html += '</blockquote>';
                        html += '</div>';
                    html += '</div><div class="clear-fix"></div></div>';
                    html += '</div>';
                }
                //escribe los resultados en el html
                $('#historial').html(html);
                }).fail(function(error){
                    //En caso de error retroalimenta y habilita el botón de búsqueda
                    $('#notFound').show().fadeIn(2);
                    $('#consultar').show();
                    $('.overlay').css('display', 'none');
                    // console.log(error.responseJSON.message);
                })
        }else{
            Swal.fire({
                title: 'El campo no puede estar vacío',
                text: 'El número de radicación y la fecha son necesarios para realizar la consulta. Verifica e intenta nuevamente.',
                confirmButtonColor: '#093f70'
            });
        }
      });
    })

    //Validate only numbers
    $('.solo-numero').keyup(function (){
        this.value = (this.value + '').replace(/[^0-9]/g, '');
    });
</script>
@endsection