@extends('template.layout')

@section('styles')
@endsection

@section('content')
    <h1 class="page-title">
        <a href="{{ url('admin/tramite/usuario') }}"><i class="icon-action-undo"></i></a>
        Detalle del Trámite TUPA en Curso
    </h1>
    <div class="portlet light bordered">
        <div class="tabbable-custom nav-justified">
            <ul class="nav nav-tabs nav-justified">
                <li class="active">
                    <a href="#tab_1_1_1" data-toggle="tab">Información General</a>
                </li>
                <li>
                    <a href="#tab_1_1_2" data-toggle="tab">Observaciones</a>
                </li>
                <li>
                    <a href="#tab_1_1_3" data-toggle="tab">Requisitos</a>
                </li>
                <li>
                    <a href="#tab_1_1_4" data-toggle="tab">Resolución</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab_1_1_1">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-lg-12">
                                {{ Form::model(null) }}
                                <div class="form-horizontal">
                                    <div class="form-group col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_procedimiento_nombre', 'Nombre del Procedimiento:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_procedimiento_nombre', $tramiteUsuario->tramite_procedimiento_nombre, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_categoria_nombre', 'Categoría:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_categoria_nombre', ($tramiteUsuario->tramite_categoria_nombre != "" ? $tramiteUsuario->tramite_categoria_nombre : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_calificacion', 'Calificación:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_calificacion', ($tramiteUsuario->tramite_procedimiento_id_tramite_calificacion != "" ? config('constants.TRAMITE_CALIFICACION')[$tramiteUsuario->tramite_procedimiento_id_tramite_calificacion] : "---"), ['id' => 'selectAutoridad', 'class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_procedimiento_codigo', 'Código:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_procedimiento_codigo', $tramiteUsuario->tramite_procedimiento_codigo, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_procedimiento_cuenta_contable', 'Cuenta Contable:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_procedimiento_cuenta_contable', $tramiteUsuario->tramite_procedimiento_cuenta_contable, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_procedimiento_plazo_resolucion', 'Duración del Trámite:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_procedimiento_plazo_resolucion', ($tramiteUsuario->tramite_procedimiento_plazo_resolucion >= 0 ? $tramiteUsuario->tramite_procedimiento_plazo_resolucion . ($tramiteUsuario->tramite_procedimiento_plazo_resolucion != 1 ? ' días' : ' día') : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('area_inicio_nombre', 'Área Inicial:', ['class' => 'control-label']) !!}
                                        {!! Form::text('area_inicio_nombre', ($tramiteUsuario->area_inicio_nombre != "" ? $tramiteUsuario->area_inicio_nombre : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('autoridad_competente_nombre', 'Autoridad Competente:', ['class' => 'control-label']) !!}
                                        {!! Form::text('autoridad_competente_nombre', ($tramiteUsuario->autoridad_competente_nombre != "" ? $tramiteUsuario->autoridad_competente_nombre : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('usuario_nombres', 'Nombre del Solicitante:', ['class' => 'control-label']) !!}
                                        {!! Form::text('usuario_nombres', $tramiteUsuario->usuario_nombres, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('usuario_email', 'Correo del Solicitante:', ['class' => 'control-label']) !!}
                                        {!! Form::text('usuario_email', $tramiteUsuario->usuario_email, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('created_at', 'Fecha de Inicio:', ['class' => 'control-label']) !!}
                                        {!! Form::text('created_at', ($tramiteUsuario->created_at != "" ? $tramiteUsuario->created_at : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-12 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_procedimiento_base_legal', 'Base Legal:', ['class' => 'control-label']) !!}
                                        {!! Form::textarea('tramite_procedimiento_base_legal', $tramiteUsuario->tramite_procedimiento_base_legal, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly', 'style' => 'resize: none']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('dependencia_nombre', 'Dependencia Asignada:', ['class' => 'control-label']) !!}
                                        {!! Form::text('dependencia_nombre', ($tramiteUsuario->dependencia_nombre != "" ? $tramiteUsuario->dependencia_nombre : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                    <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                                        {!! Form::label('tramite_usuario_estado', 'Estado del Trámite:', ['class' => 'control-label']) !!}
                                        {!! Form::text('tramite_usuario_estado', ($tramiteUsuario->id_tramite_usuario_estado != "" ? config('constants.TRAMITE_USUARIO_ESTADO_NOMBRE')[$tramiteUsuario->id_tramite_usuario_estado] : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab_1_1_2">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <table id="dataTable-3" class="table table-hover dataTable dtr-inline" style="text-align: center;">
                                    <thead>
                                    <tr>
                                        <th>Dependencia</th>
                                        <th>Observación</th>
                                        <th>Fecha de Creación</th>
                                        <th>Fecha de Edición</th>
                                    </tr>
                                    </thead>
                                    <tbody style="text-align: left !important;"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab_1_1_3">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <table id="dataTable" class="table table-hover nowrap dataTable dtr-inline" style="text-align: center;">
                                    <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Formulario/Código/Ubicación</th>
                                        <th>Costo UIT</th>
                                        <th>Costo S/.</th>
                                    </tr>
                                    </thead>
                                    <tbody style="text-align: left !important;"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab_1_1_4">
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <table id="dataTable-2" class="table table-hover nowrap dataTable dtr-inline" style="text-align: center;">
                                    <thead>
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Autoridad</th>
                                        <th>Plazo Presentación</th>
                                        <th>Plazo Resolución</th>
                                    </tr>
                                    </thead>
                                    <tbody style="text-align: left !important;"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var tramiteResolucionTipo = JSON.parse('{!! json_encode(config('constants.TRAMITE_RESOLUCION_TIPO')) !!}');

        var dataTableLanguage = {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        };
        var dataTable = [
            function (args) {
                $("#dataTable").DataTable({
                    language: dataTableLanguage,
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    responsive: true,
                    ajax: {
                        data: {
                            id_tramite_procedimiento: args.id_tramite_procedimiento
                        },
                        type: "POST",
                        url: "{{ route('admin.tramite.requisito.post') }}",
                        error: function (jqXHR, textStatus, errorThrown) {
                            /*console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);*/
                        }
                    },
                    columns: [
                        {
                            data: "nombre",
                            name: "nombre"
                        },
                        {
                            data: "codigo",
                            name: "codigo",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "tramitacion_uit",
                            name: "tramitacion_uit",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "tramitacion_soles",
                            name: "tramitacion_soles",
                            render: function(data, type, row) {
                                var render = "";

                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        }
                    ],
                    order: [
                        [0, "asc"]
                    ]
                });
            },
            function (args) {
                $("#dataTable-2").DataTable({
                    language: dataTableLanguage,
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    responsive: true,
                    ajax: {
                        data: {
                            id_tramite_procedimiento: args.id_tramite_procedimiento
                        },
                        type: "POST",
                        url: "{{ route('admin.tramite.resolucion.post') }}",
                        error: function (jqXHR, textStatus, errorThrown) {
                            /*console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);*/
                        }
                    },
                    columns: [
                        {
                            data: "id_tramite_resolucion_tipo",
                            name: "id_tramite_resolucion_tipo",
                            render: function(data, type, row) {
                                var render = "";

                                if (data != "") {
                                    render = "<td>" + tramiteResolucionTipo[data] + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "autoridad_nombre",
                            name: "autoridad_nombre",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "plazo_presentacion",
                            name: "plazo_presentacion",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + (data != "1" ? " días" : " día") + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "plazo_resolucion",
                            name: "plazo_resolucion",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + (data != "1" ? " días" : " día") + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        }
                    ],
                    order: [
                        [1, "asc"]
                    ]
                });
            },
            function (args) {
                $("#dataTable-3").DataTable({
                    language: dataTableLanguage,
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    responsive: true,
                    ajax: {
                        data: {
                            id_tramite_usuario: args.id_tramite_usuario
                        },
                        type: "POST",
                        url: "{{ route('admin.tramite.usuarioobservacion.post') }}",
                        error: function (jqXHR, textStatus, errorThrown) {
                            /*console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);*/
                        }
                    },
                    columns: [
                        {
                            data: "dependencia_nombre",
                            name: "dependencia_nombre",
                            render: function(data, type, row) {
                                var render = "";

                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "observacion",
                            name: "observacion"
                        },
                        {
                            data: "created_at",
                            name: "created_at",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        },
                        {
                            data: "updated_at",
                            name: "updated_at",
                            render: function(data, type, row) {
                                var render = "";
                                
                                if (data != "") {
                                    render = "<td>" + data + "</td>";
                                } else {
                                    render = "<td>---</td>";
                                }

                                return render;
                            }
                        }
                    ],
                    order: [
                        [3, "desc"],
                        [2, "desc"]
                    ]
                });
            }
        ];

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function CargarDataTables(index, args) {
            index = index || -1;
            args = args || null;
            
            if (index < 0) {
                var dataTableLength = dataTable.length;
                for (var i = 0; i < dataTableLength; i++) {
                    dataTable[i](args);
                }
            } else {
                dataTable[index](args);
            }
        }

        window.onload = function() {
            var args = {
                id_tramite_procedimiento: "{{ $tramiteUsuario->id_tramite_procedimiento }}" * 1,
                id_tramite_usuario: "{{ $tramiteUsuario->id }}" * 1
            };

            CargarDataTables(-1, args);
        };
    </script>
@endsection