@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%;
        }
    }
    .estiloBoton{
        background-color: rgb(54, 169, 224);
        border: 0px;
        border-radius: 7px;
        border-bottom: 2px solid #ff7f50;
        color: #ffffff;
        padding: 8px;
        width: 90px;
        height: 35px;
        font-size: 12px;
        margin-bottom: 15px;
    }
</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">Seleccionar tipo de PQR</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-6">
                    
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPQRAnonimo" style="!important;margin-left:360px; margin-top:10px; background-color: #17a2b8;">
                                Radicar pqr anonima
                            </button>
                        </div>
                        <div class="form-group col-md-6">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPQRUsuario" style="!important;margin-top:10px; background-color: #17a2b8;">
                                Radicar pqr usuario
                            </button>
                        </div>
                    </div>
                    
                    <div class="modal fade bd-example-modal-lg" id="modalPQRAnonimo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Radicar PQR anonimo</h5>
                                </div>
                                <div class="modal-body">
                                    <form
                                        id="workflowForm" 
                                        name="workflowForm" 
                                        accept-charset="UTF-8"
                                        enctype='multipart/form-data'
                                        method="post" class="mx-auto pb-4 pt-4 form-horizontal with-formulario">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label for="asunto">Asunto <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="asunto" id="asunto" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="motivoRadicacion">Motivo radicación <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select name="motivoRadicacion" id="motivoRadicacion" class="form-control form-control-lg" required>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="dependencia">Dependencia <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select name="dependencia" id="dependencia" class="form-control form-control-lg" required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label for="descrpcionAnexo">Descripcion de anexo <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <textarea required name="descrpcionAnexo" id="descrpcionAnexo" title="DESCRIPCIÓN DE ANEXOS" rows="3" class="form-control"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-10">
                                                <label for="rutaU" class="form-label">Archivo <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <table id="tableAnexos" class="display" cellspacing="0" width="100%">
                                                    <thead>
                                                        <tr>
                                                            <th>Descripción</th>
                                                            <th>Archivo</th>
                                                            <th>Eliminar Anexo</span></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        
                                                    </tbody>
                                                    <tfoot>
                                                        
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="form-group col-md-2">
                                                <div id="addAnexo" class="field button">
                                                    <button id="addAnexo-button" type="button" class="estiloBoton" style="width:auto; heigth:auto;">Agregar Anexo</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                
                                </div>
                                <div class="modal-footer">
                                    <button id="cerrarAnonimo" type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                    <button id="submitAnonimo" type="submit" class="btn btn-primary" style="!important;background-color: #17a2b8;">Guardar</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade bd-example-modal-lg" id="modalPQRUsuario" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Radicar PQR usuario</h5>
                                </div>
                                <div class="modal-body">
                                    <form   
                                        id="workflowFormU" 
                                        name="workflowFormU" 
                                        accept-charset="UTF-8"
                                        enctype='multipart/form-data'
                                        method="post" 
                                        class="mx-auto pb-4 pt-4 form-horizontal with-formulario">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="cedula">Cedula <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="cedula" id="cedula" class="form-control">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="asuntoU">Asunto <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="asuntoU" id="asuntoU" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="motivoRadicacionU">Motivo radicación <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select name="motivoRadicacionU" id="motivoRadicacionU" class="form-control form-control-lg" required style="!important margin:10px">
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="dependenciaU">Dependencia <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select name="dependenciaU" id="dependenciaU" class="form-control form-control-lg" required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-12">
                                                <label for="descrpcionAnexoU">Descripcion de anexo <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <textarea required name="descrpcionAnexoU" id="descrpcionAnexoU" title="DESCRIPCIÓN DE ANEXOS" rows="4" class="form-control"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-10">
                                                <label for="rutaU" class="form-label">Archivo <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <table id="tableAnexosU" class="display" cellspacing="0" width="100%">
                                                    <thead>
                                                        <tr>
                                                            <th>Descripción</th>
                                                            <th>Archivo</th>
                                                            <th>Eliminar Anexo</span></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        
                                                    </tbody>
                                                    <tfoot>
                                                        
                                                    </tfoot>
                                                </table>
                                            </div>
                                            <div class="form-group col-md-2">
                                                <div id="addAnexo" class="field button">
                                                    <button id="addAnexo-buttonU" type="button" class="estiloBoton" style="width:auto; heigth:auto;">Agregar Anexo</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button id="cerrarUsuario" type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                    <button id="submitUsuario" type="submit" class="btn btn-primary" style="!important;background-color: #17a2b8;">Guardar</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade bd-example-modal-lg" id="modalRegistrarUsuario" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Registro ciudadano<br>Este formulario posee campos obligatorios</h5>
                                </div>
                                <div class="modal-body">
                                    <form   
                                        id="workflowFormC" 
                                        name="workflowFormC" 
                                        accept-charset="UTF-8"
                                        enctype='multipart/form-data'
                                        method="post" 
                                        class="mx-auto pb-4 pt-4 form-horizontal with-formulario">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="ndocumento">N° de documento <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="ndocumento" id="ndocumento" class="form-control">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="nombres">Nombres <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="nombres" id="nombres" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="apellidos">Apellidos <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="apellidos" id="apellidos" class="form-control">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="fechaNacimiento">Fecha de nacimiento <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input type="date" name="fechaNacimiento" id="fechaNacimiento" title="FECHA DE NACIMIENTO" required="">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="direccion">Dirección <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="direccion" id="direccion" title="DIRECCIÓN" class="form-control">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="barrio">Barrio / vereda <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select name="barrio" id="barrio" class="form-control form-control-lg" required>
                                                    <option value="217">15 DE OCTUBRE - COMUNA 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="departamento" class="form-label">Departamento <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select onchange='llenarMunicipio(this);' name="departamento" id="departamento" class="form-control form-control-lg" required>
                                                    <option value="9">CASANARE</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="municipio" class="form-label">Municipio <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <select onchange='llenarBarrio(this);' name="municipio" id="municipio" class="form-control form-control-lg" required>
                                                    <option value="1051">YOPAL</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="telefono">Teléfono <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="text" name="telefono" id="telefono" title="TELÉFONO" class="form-control">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="email">Email <span class="ml-s badge badge-info">Obligatorio</span></label>
                                                <input required type="email" name="email" id="email" title="EMAIL" class="form-control">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button id="cerrarRegistrosuario" type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                    <button id="submitRegistrosuario" type="button" class="btn btn-primary" style="!important;background-color: #17a2b8;">Guardar</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
    let ip_wan;
    var cont = 100;

      //clic para agregar fila de anexo anonimo
    $('#addAnexo-button').on('click', addRowAnexo);
    //clic para eliminar fila de tabla anexo anonimo
    $('#tableAnexos tbody').on('click', 'tr img.eliminarAnexo', deleteAnexo);

    //clic para agregar fila de anexo anonimo
    $('#addAnexo-buttonU').on('click', addRowAnexoU);
    //clic para eliminar fila de tabla anexo usuario
    $('#tableAnexosU tbody').on('click', 'tr img.eliminarAnexo', deleteAnexoU);

   $(document).ready(function () {
        $('#municipio').select2({
            placeholder: "Seleccione una opción",
            allowClear: false
        });
        $('#barrio').select2({
            placeholder: "Seleccione una opción",
            width: '100%',
            allowClear: false
        });

        $.ajax({
            url: 'https://api.ipify.org?format=json',
            type: 'GET',
            success: function(data) {
                ip_wan = data.ip;
            },
            error: function (jqXHR) {
                console.log(jqXHR);
            }
        });

        $('#submitUsuario').attr('disabled', true);   
        
        if ($('#motivoRadicacion').length > 0) {
            $('#motivoRadicacion').select2({
                placeholder: 'Seleccione una Opción',
                allowClear: false,
                ajax: {
                    url: "{{env('APP_URL_ENTIDAD')}}" + "/select/motivoRadicacion",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                            page: params.page || 1,
                        }
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.results.data,
                            pagination: {
                                more: data.data.more,
                            }
                        };
                    },
                    cache: true
                }
            });
        }
        if ($('#motivoRadicacionU').length > 0) {
            $('#motivoRadicacionU').select2({
                placeholder: 'Seleccione una Opción',
                allowClear: false,
                ajax: {
                    url: "{{env('APP_URL_ENTIDAD')}}" + "/select/motivoRadicacion",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                            page: params.page || 1,
                        }
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.results.data,
                            pagination: {
                                more: data.data.more,
                            }
                        };
                    },
                    cache: true
                }
            });
        }

        if ($('#dependencia').length > 0) {
            $('#dependencia').select2({
                placeholder: 'Seleccione una Opción',
                allowClear: false,
                ajax: {
                    url: "{{env('APP_URL_ENTIDAD')}}" + "/select/dependencias",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                            page: params.page || 1,
                        }
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.results.data,
                            pagination: {
                                more: data.data.more,
                            }
                        };
                    },
                    cache: true
                }
            });
        }
        if ($('#dependenciaU').length > 0) {
            $('#dependenciaU').select2({
                placeholder: 'Seleccione una Opción',
                allowClear: false,
                ajax: {
                    url: "{{env('APP_URL_ENTIDAD')}}" + "/select/dependencias",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                            page: params.page || 1,
                        }
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.results.data,
                            pagination: {
                                more: data.data.more,
                            }
                        };
                    },
                    cache: true
                }
            });
        }
        if ($('#departamento').length > 0) {
            $('#departamento').select2({
                placeholder: 'Seleccione una Opción',
                allowClear: false,
                ajax: {
                    url: "{{env('APP_URL_ENTIDAD')}}" + "/selectDepartamentos",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                            page: params.page || 1,
                        }
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.results.data,
                            pagination: {
                                more: data.data.more,
                            }
                        };
                    },
                    cache: true
                }
            });
        }

        $( "#cedula" ).blur(function() {
           
            let cedula = $('#cedula').val();
            Swal.fire({
                title: '<small>CONSULTANDO...</small>',
                html: 'Procesando...',
                allowEscapeKey: false,
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                method: "GET",
                url:"{{env('APP_URL_ENTIDAD')}}" + "/getCiudadano",
                data: {
                    cedula: cedula,
                },
            }).done(function (data) {
               
                swal.close();
                if(data.length > 0){
                    let name = data[0].name;

                    $('#submitUsuario').attr('disabled', false);
                    Swal.fire({
                        icon: 'success',
                        title: `<small>Ciudadano encontrado con éxito <br><br>${name}</small>`,
                        text: "Puede continuar con el proceso de pqr.",
                        showConfirmButton: true,
                        confirmButtonColor: '#17a2b8',
                        confirmButtonText: 'Aceptar',
                    });
                }else {
                    $('#submitUsuario').attr('disabled', true);
                    Swal.fire({
                        title: '<small>¡Usuario no registrado!</small>',
                        text: "¿Quieres registrar el usuario?",
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Si, registrar!',
                        cancelButtonText: 'No, registrar!'
                        }).then((result) => {
                        if (result.isConfirmed) {
                            $("#modalRegistrarUsuario").modal("show", {backdrop: 'static', keyboard: false});
                        }
                    });
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                swal.close();
                swal.fire({
                    title: '<small>No se pudo obtener la informacion de usuario</small>',
                    text: jqXHR.responseJSON.message,
                    type: "error",
                });
            });
        });
        
        $('#cerrarAnonimo').on('click', function () 
        {
            document.getElementById("workflowForm").reset();
            $("#dependencia").val('').trigger('change');
            $("#motivoRadicacion").val('').trigger('change');
            $('#tableAnexos td').remove(); 

            cont = 100;
        })

        $('#submitAnonimo').on('click', function () 
        {
            var formData = new FormData(document.getElementById('workflowForm'));
            formData.append('ip_wan', ip_wan);
            
            if($('#asunto').val().trim() == ''){
                Swal.fire({
                    icon: 'error',
                    title: "<small>El campo asunto no se puede enviar vacio</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }

            if ($('#motivoRadicacion').val() == null || $('#motivoRadicacion').val().length < 0){
                Swal.fire({
                    icon: 'error',
                    title: "<small>Por favor seleccionar un motivo de radicación</small>",
                    text: "Envie una informacion correcta, el motivo de radiación no se puede enviar vacia",
                    type: "warning"
                });

                return;
            }

            if ($('#dependencia').val() == null || $('#dependencia').val().length < 0){
                Swal.fire({
                    icon: 'error',
                    title: "<small>Por favor seleccionar una dependencia</small>",
                    text: "Envie una informacion correcta, la dependencia no se puede enviar vacia",
                    type: "warning",
                });

                return;
            }

            if($('#descrpcionAnexo').val().trim() == ''){
                Swal.fire({
                    icon: 'error',
                    title: "<small>El campo descripcion de anexo no se puede enviar vacio</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }

            console.log($("#tableAnexos tbody tr td").length, ' esta es la cantidad de filas');

            if($("#tableAnexos tbody tr td").length < 2){
                Swal.fire({
                    icon: 'error',
                    title: "<small>Por favor seleccionar al menos un anexo</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }

            let mensaje = ''
            let error = false

            Swal.fire({
                title: '<small> ¿Estás seguro deseas guardar los datos registrados? </small>',
                type: "info",
                confirmButtonText: 'Aceptar',
                confirmButtonColor: '#17a2b8',
                cancelButtonColor: '#d33',
                showCancelButton: true,
                }).then((result) => {
                    if(result.value)
                    {                    
                        if (error === false) {
                            Swal.fire({
                                title: '<small>GUARDANDO...</small>',
                                html: 'Procesando...',
                                allowEscapeKey: false,
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                            $.ajax({
                                url: "{{env('APP_URL_ENTIDAD')}}" + '/pqrAnonimo/save',
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function(data) {
                                    document.getElementById("workflowForm").reset();
                                    $("#dependencia").val('').trigger('change');
                                    $("#motivoRadicacion").val('').trigger('change');

                                    swal.close();
                                    Swal.fire({
                                        icon: 'success',
                                        title: "<small>Pqr Guardada con éxito</small>",
                                        text: "La información se guardo correctamente.",
                                        showConfirmButton: true,
                                        confirmButtonColor: '#17a2b8',
                                        confirmButtonText: 'Aceptar',
                                    });

                                    $('#modalPQRAnonimo').modal('hide');
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    swal.close();
                                    Swal.fire({
                                        title: "Fallo al guardar",
                                        text: jqXHR.responseJSON.message,
                                        type: "error",
                                    });
                                }
                            })  
                        } else {
                            Swal.fire({
                                title: '<small>Hubo un Error</small>',
                                type: 'warning',
                                confirmButtonText: 'Aceptar',
                                showCancelButton: false,
                            });
                        }
                    }else {
                        Swal.fire({
                            title: '<small>Se cancelo</small>',
                            type: 'warning',
                            confirmButtonText: 'Aceptar',
                            showCancelButton: false,
                        });
                    }
            }); 
        })

        $('#cerrarUsuario').on('click', function () 
        {
            document.getElementById("workflowFormU").reset();
            $("#dependenciaU").val('').trigger('change');
            $("#motivoRadicacionU").val('').trigger('change');
            $('#tableAnexosU td').remove(); 

            cont = 100;
        })

        $('#submitUsuario').on('click', function () 
        {
            var formData = new FormData(document.getElementById('workflowFormU'));
            formData.append('ip_wan', ip_wan);
            
            if($('#cedula').val().trim() == ''){
                Swal.fire({
                    icon: 'error',
                    title: "<small>El campo cedula no se puede enviar vacio</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }
            if($('#asuntoU').val().trim() == ''){
                Swal.fire({
                    icon: 'error',
                    title: "<small>El campo asunto no se puede enviar vacio</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }

            if ($('#motivoRadicacionU').val() == null || $('#motivoRadicacionU').val().length < 0){
                Swal.fire({
                    icon: 'error',
                    title: "<small>Por favor seleccionar un motivo de radicación</small>",
                    text: "Envie una informacion correcta, el motivo de radiación no se puede enviar vacia",
                    type: "warning"
                });

                return;
            }

            if ($('#dependenciaU').val() == null || $('#dependenciaU').val().length < 0){
                Swal.fire({
                    icon: 'error',
                    title: "<small>Por favor seleccionar una dependencia</small>",
                    text: "Envie una informacion correcta, la dependencia no se puede enviar vacia",
                    type: "warning",
                });

                return;
            }

            if($('#descrpcionAnexoU').val().trim() == ''){
                Swal.fire({
                    icon: 'error',
                    title: "<small>El campo descripcion de anexo no se puede enviar vacio</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }

            if(anexos.row.length < 0){
                Swal.fire({
                    icon: 'error',
                    title: "<small>Por favor seleccionar al menos un anexo</small>",
                    text: "Envie la informacion de una manera correcta",
                    type: "warning"
                });

                return;
            }

            let mensaje = ''
            let error = false

            Swal.fire({
                title: '<small> ¿Estás seguro deseas guardar los datos registrados? </small>',
                type: "info",
                confirmButtonText: 'Aceptar',
                confirmButtonColor: '#17a2b8',
                cancelButtonColor: '#d33',
                showCancelButton: true,
                }).then((result) => {
                    if(result.value)
                    {                    
                        if (error === false) {
                            Swal.fire({
                                title: '<small>GUARDANDO...</small>',
                                html: 'Procesando...',
                                allowEscapeKey: false,
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                            $.ajax({
                                url: "{{env('APP_URL_ENTIDAD')}}" + '/pqrUsuario/save',
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function(data) {
                                    document.getElementById("workflowFormU").reset();
                                    $("#dependenciaU").val('').trigger('change');
                                    $("#motivoRadicacionU").val('').trigger('change');

                                    swal.close();
                                    Swal.fire({
                                        icon: 'success',
                                        title: "<small>Pqr Guardada con éxito</small>",
                                        text: "La información se guardo correctamente.",
                                        showConfirmButton: true,
                                        confirmButtonColor: '#17a2b8',
                                        confirmButtonText: 'Aceptar',
                                    });

                                    $('#modalPQRUsuario').modal('hide');
                                    
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    swal.close();
                                    Swal.fire({
                                        title: "Fallo al guardar",
                                        text: jqXHR.responseJSON.message,
                                        type: "error",
                                    });
                                }
                            })  
                        } else {
                            Swal.fire({
                                title: '<small>Hubo un Error</small>',
                                type: 'warning',
                                confirmButtonText: 'Aceptar',
                                showCancelButton: false,
                            });
                        }
                    }else {
                        Swal.fire({
                            title: '<small>Se cancelo</small>',
                            type: 'warning',
                            confirmButtonText: 'Aceptar',
                            showCancelButton: false,
                        });
                    }
            }); 
        })
    })
   
    $('#cedula').keyup(function (){
        this.value = (this.value + '').replace(/[^0-9]/g, '');
    });

    $('#ndocumento').keyup(function (){
        this.value = (this.value + '').replace(/[^0-9]/g, '');
    });

    function llenarMunicipio(inputSelect){
        $("#municipio").val('').trigger('change');
        var departamento = inputSelect.value;
        if ($('#municipio').length > 0) {
            $('#municipio').select2({
            placeholder: 'Seleccione una Opción',
            allowClear: false,
            ajax: {
                url:"{{env('APP_URL_ENTIDAD')}}" + "/selectMunicipios",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        term: params.term,
                        page: params.page || 1,
                        depa:departamento,
                    }
                },
                processResults: function (data) {
                    return {
                        results: data.data.results.data,
                        pagination: {
                            more: data.data.more,
                        }
                    };
                },
                cache: true
            }
            });
        }
    }

    function llenarBarrio(inputSelect){
        $("#barrio").val('').trigger('change');
        var municipio = inputSelect.value;
        if ($('#barrio').length > 0) {
            $('#barrio').select2({
            placeholder: 'Seleccione una Opción',
            allowClear: false,
            ajax: {
                url:"{{env('APP_URL_ENTIDAD')}}" + "/selectBarrios/vereda",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        term: params.term,
                        page: params.page || 1,
                        municipio:municipio,
                    }
                },
                processResults: function (data) {
                    return {
                        results: data.data.results.data,
                        pagination: {
                            more: data.data.more,
                        }
                    };
                },
                cache: true
            }
            });
        }
    }

    $('#submitRegistrosuario').on('click', function () 
    {
        var formData = new FormData(document.getElementById('workflowFormC'));
        formData.append('ip_wan', ip_wan);
        
        if($('#ndocumento').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo N° de documento no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        if($('#nombres').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo Nombres no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        if($('#apellidos').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo Apellidos no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        if($('#fechaNacimiento').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo Fecha de nacimiento no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        if($('#direccion').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo Dirección no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        if ($('#barrio').val() == null || $('#barrio').val().length < 0){
            Swal.fire({
                icon: 'error',
                title: "<small>Por favor seleccionar un barrio / vereda</small>",
                text: "Envie una informacion correcta, el barrio / vereda no se puede enviar vacia",
                type: "warning"
            });

            return;
        }

        if ($('#departamento').val() == null || $('#departamento').val().length < 0){
            Swal.fire({
                icon: 'error',
                title: "<small>Por favor seleccionar una departamento</small>",
                text: "Envie una informacion correcta, el departamento no se puede enviar vacia",
                type: "warning",
            });

            return;
        }

        if ($('#municipio').val() == null || $('#municipio').val().length < 0){
            Swal.fire({
                icon: 'error',
                title: "<small>Por favor seleccionar un municipio/small>",
                text: "Envie una informacion correcta, el municipio no se puede enviar vacia",
                type: "warning",
            });

            return;
        }

        if($('#telefono').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo Teléfono no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        if($('#email').val().trim() == ''){
            Swal.fire({
                icon: 'error',
                title: "<small>El campo Email no se puede enviar vacio</small>",
                text: "Envie la informacion de una manera correcta",
                type: "warning"
            });

            return;
        }

        let mensaje = ''
        let error = false

        Swal.fire({
            title: '<small> ¿Estás seguro deseas guardar los datos registrados? </small>',
            type: "info",
            confirmButtonText: 'Aceptar',
            confirmButtonColor: '#17a2b8',
            cancelButtonColor: '#d33',
            showCancelButton: true,
            }).then((result) => {
                if(result.value)
                {                    
                    if (error === false) {
                        Swal.fire({
                            title: '<small>GUARDANDO...</small>',
                            html: 'Procesando...',
                            allowEscapeKey: false,
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        $.ajax({
                            url: "{{env('APP_URL_ENTIDAD')}}" + '/ciudadano/save',
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(data) {
                                document.getElementById("workflowFormC").reset();
                                $("#barrio").val('').trigger('change');
                                $("#departamento").val('').trigger('change');
                                $("#municipio").val('').trigger('change');

                                swal.close();
                                Swal.fire({
                                    icon: 'success',
                                    title: "<small>Ciudadano Guardado con éxito</small>",
                                    text: "Puede continuar con el proceso de pqr.",
                                    showConfirmButton: true,
                                    confirmButtonColor: '#17a2b8',
                                    confirmButtonText: 'Aceptar',
                                });
                                $('#modalRegistrarUsuario').modal('hide');
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                swal.close();
                                Swal.fire({
                                    title: "Fallo al guardar",
                                    text: jqXHR.responseJSON.message,
                                    type: "error",
                                });
                            }
                        })  
                    } else {
                        Swal.fire({
                            title: '<small>Hubo un Error</small>',
                            type: 'warning',
                            confirmButtonText: 'Aceptar',
                            showCancelButton: false,
                        });
                    }
                }else {
                    Swal.fire({
                        title: '<small>Se cancelo</small>',
                        type: 'warning',
                        confirmButtonText: 'Aceptar',
                        showCancelButton: false,
                    });
                }
        }); 
    })

    $('#cerrarRegistrosuario').on('click', function () 
    {
        document.getElementById("workflowFormC").reset();
        $("#barrio").val('').trigger('change');
        $("#departamento").val('').trigger('change');
        $("#municipio").val('').trigger('change');
    })

    var anexo = $('#tableAnexos').DataTable({
        paging: false,
        info: false,
        filter: false,
        //responsive: true,
        destroy: true,
        ordering: false,
        language: {
            zeroRecords: 'Sin Anexos'
        },
        columns: [{'width':'200px'},{'width':'400px'},null]
    });

     function addRowAnexo(tag){
        tag.preventDefault();  // Prevenir evento.
        tag.stopPropagation(); // StopPropagation.
        cont++;
        anexo.row.add([
            '<input type="text" required class="centrar-texto" name="name_anexo[]" id="name_anexo_' + cont + '" required>',
            '<input type="file" class="centrar-texto file-anexo" name="file_anexo[]" id="file_anexo_' + cont + '" accept="application/pdf,.xlsx,.xls">',
            `<img title="Eliminar este documento" src="{{env('APP_SIGD')}}/imagenes/iconos/papelera.png" alt="Icono Papelera" width="20" height="20" class="eliminarAnexo centrar-texto"/>
           `
        ]).draw();
    }

    /**
     * elimina anexos de la tabla
     * @param {tag} tag
     */
    function deleteAnexo(tag) {
        tag.preventDefault();  // Prevenir evento.
        tag.stopPropagation();  // Prevenir propagación.

        //eliminar fila
        Swal.fire({
            type:'warning',
            title: 'Se eliminará este archivo',
            text: 'Puede cancelar haciendo clic en el botón',
            showCancelButton: true,
            confirmButtonText: 'Ok',
            cancelButtonText: 'Cancelar',
          }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if ($(this).parent().parent().hasClass('selected')) {
                $(this).parent().parent().removeClass('selected');

                } else {
                    anexo.$('tr.selected').removeClass('selected');
                    $(this).parent().parent().addClass('selected');
                }

                
                anexo.row('.selected').remove().draw(false);
            });
    }

    var anexoU = $('#tableAnexosU').DataTable({
        paging: false,
        info: false,
        filter: false,
        //responsive: true,
        destroy: true,
        ordering: false,
        language: {
            zeroRecords: 'Sin Anexos'
        },
        columns: [{'width':'200px'},{'width':'400px'},null]
    });



    function addRowAnexoU(tag){
        tag.preventDefault();  // Prevenir evento.
        tag.stopPropagation(); // StopPropagation.
        cont++;
        anexoU.row.add([
            '<input type="text" required class="centrar-texto" name="name_anexoU[]" id="name_anexo_' + cont + '" required>',
            '<input type="file" class="centrar-texto file-anexo" name="file_anexoU[]" id="file_anexo_' + cont + '" accept="application/pdf,.xlsx,.xls">',
            `<img title="Eliminar este documento" src="{{env('APP_SIGD')}}/imagenes/iconos/papelera.png" alt="Icono Papelera" width="20" height="20" class="eliminarAnexo centrar-texto"/>
           `
        ]).draw();
    }

    /**
     * elimina anexos de la tabla
     * @param {tag} tag
     */
    function deleteAnexoU(tag) {
        tag.preventDefault();  // Prevenir evento.
        tag.stopPropagation();  // Prevenir propagación.

        //eliminar fila
        Swal.fire({
            type:'warning',
            title: 'Se eliminará este archivo',
            text: 'Puede cancelar haciendo clic en el botón',
            showCancelButton: true,
            confirmButtonText: 'Ok',
            cancelButtonText: 'Cancelar',
          }).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if ($(this).parent().parent().hasClass('selected')) {
                $(this).parent().parent().removeClass('selected');

                } else {
                    anexoU.$('tr.selected').removeClass('selected');
                    $(this).parent().parent().addClass('selected');
                }

                
                anexoU.row('.selected').remove().draw(false);
            });
    }
</script>
@endsection