@extends('adminlte::page')

@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Intranet | Validación del control documental')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')

    <div class="card card-aspen">
        <div class="card-header">
            <h3 class="card-title">Validación Del control documental</h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table" id="datatable">
                    <thead>
                        <tr>
                            <th>Acción</th>
                            <th>Patente</th>
                            <th>Tipo Vehículo</th>
                            <th>Centro De Costo</th>
                            <th>Nombre Archivo</th>
                            <th>Tipo Archivo</th>
                            <th>Estado</th>
                            <th>Acciones De Aprobación</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($archivos as $archivo)
                            <tr>
                                <td>
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        Acciones
                                    </button>
                                    <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(12px, 173px, 0px);">
                                        @if ($archivo->extension == 'jpeg' || $archivo->extension == 'jpg' || $archivo->extension == 'png' || $archivo->extension == 'gif' || $archivo->extension == 'pdf' || $archivo->extension == 'txt')
                                            <a class="dropdown-item" target="_blank" href="{{ route('camioneta.visualizar-archivo', $archivo) }}"><i class="fas fa-eye"></i> Visualizar Archivo</a>
                                        @endif
                                        <a class="dropdown-item" target="_blank" href="{{ route('camioneta.descargar', $archivo) }}"><i class="fas fa-download"></i> Descargar Archivo</a>
                                    </div>
                                </td>
                                <td>{{ $archivo->camioneta->patente }}</td>
                                <td>{{ $archivo->camioneta->tipo_vehiculo }}</td>
                                <td>{{ $archivo->camioneta->centroDeCosto->centro_costo }}</td>
                                @if ($archivo->extension == 'jpeg' || $archivo->extension == 'jpg' || $archivo->extension == 'png' || $archivo->extension == 'gif')
                                    <td><a class="archivo-img" target="_blank" href="{{ route('camioneta.visualizar-archivo', $archivo) }}"><i class="fas fa-file-image"></i> {{ $archivo->nombre_archivo }}</a></td>
                                @elseif($archivo->extension == 'pdf')
                                    <td><a class="archivo-pdf" target="_blank" href="{{ route('camioneta.visualizar-archivo', $archivo) }}"><i class="fas fa-file-pdf"></i> {{ $archivo->nombre_archivo }}</a></td>
                                @elseif($archivo->extension == 'xls' || $archivo->extension == 'xlsx')
                                    <td><span class="archivo-excel"><i class="fas fa-file-excel"></i> {{ $archivo->nombre_archivo }}</span></td>
                                @elseif($archivo->extension == 'doc' || $archivo->extension == 'docx')
                                    <td><span class="archivo-word"><i class="fas fa-file-word"></i> {{ $archivo->nombre_archivo }}</span></td>
                                @elseif($archivo->extension == 'ppt' || $archivo->extension == 'pptx')
                                    <td><span class="archivo-power-point"><i class="fas fa-file-powerpoint"></i> {{ $archivo->nombre_archivo }}</span></td>
                                @elseif($archivo->extension == 'txt')
                                    <td><a class="archivo-txt" target="_blank" href="{{ route('camioneta.visualizar-archivo', $archivo) }}"><i class="fas fa-file-alt"></i> {{ $archivo->nombre_archivo }}</a></td>
                                @else
                                    <td><span class="archivo-file"><i class="fas fa-file"></i> {{ $archivo->nombre_archivo }}</span></td>
                                @endif
                                <td>{{ $archivo->extension }}</td>
                                @if ($archivo->estado_validacion == 'Aprobada')
                                    <td><span class="badge badge-success">{{ $archivo->estado_validacion }}</span></td>
                                @elseif($archivo->estado_validacion == 'Rechazada')
                                    <td><span class="badge badge-danger">{{ $archivo->estado_validacion }}</span></td>
                                @elseif($archivo->estado_validacion == 'Pendiente')
                                    <td><span class="badge badge-secondary">{{ $archivo->estado_validacion }}</span></td>
                                @else
                                    <td>{{ $$archivoa->estado_validacion }}</td>
                                @endif
                                <td>
                                    @if ($archivo->estado_validacion == 'Pendiente')
                                    <button type="button" class="btn btn-success mt-1" id="botonAprobado" onclick="aprobarDocumento('{{ $archivo->id }}')"><i class="fas fa-award" style="margin-right: 2px;"></i> Aprobar Documento</button>
                                    <button type="button" class="btn btn-danger mt-1" id="botonRechazado" onclick="abrirModalRechazarDocumento('{{ $archivo->id }}')"><i class="fas fa-award" style="margin-right: 2px;"></i> Rechazar Documento</button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.card-body -->
    </div>

    <div class="modal fade" id="modalFormularioRechazoDocumento" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form id="formularioModalRechazoDocumento">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="modelFormularioRechazoTituloDocumento">Rechazar Documento </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Motivo Del Rechazo</label>
                            <textarea class="form-control" id="campoObservacionModalDocumento" name="observacion" rows="3"></textarea>
                            <div class="invalid-feedback" id="validacionCampoObservacionModalDocumento">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-aspen" onclick="rechazarDocumento()">Rechazar Documento</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2021 <a href="http://guinezingenieria.cl/">GuiñezIngeniería.cl</a>.</strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
    <style>
        table>tbody>tr>td {
            vertical-align: middle !important;
        }

        #validacionCampoArchivosModalSubirDocumento {
            display: none;
        }

        #validacionCampoArchivosModalSubirDocumentoExito {
            display: none;
        }

        .link-carpeta {
            color: #007bff;
        }

        .archivo-img {
            color: #17a2b8;
        }

        .archivo-img:hover {
            color: #096472;
        }

        .archivo-pdf {
            color: #ad0b00;
        }

        .archivo-pdf:hover {
            color: #620902;
        }

        .archivo-word {
            color: #015097;
        }

        .archivo-power-point {
            color: #c33e22;
        }

        .archivo-excel {
            color: #006d37;
        }

        .archivo-txt {
            color: #ac05ff;
        }

        .archivo-txt:hover {
            color: #3f0650;
        }

        .archivo-file {
            color: #212529;
        }

        .archivo-file:hover {
            color: #212529;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>
    <script>
        var botonesDatatable = [{
            extend: "excelHtml5",
            text: '<i class="fas fa-file-excel"></i> &nbsp; Exportar &nbsp;',
            titleAttr: "Exportar a Excel",
            className: "btn btn-excel-en-tabla",
            exportOptions: {
                columns: [1, 2, 3, 4, 5]
            }
        }, ];
    </script>

    <script>
        let datatable = $("#datatable").DataTable({
            orderCellsTop: true,
            ordering: true,
            order: [
                [0, "desc"]
            ],
            /*fixedColumns: {
                leftColumns: 3
            },*/
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "Todos"],
            ],
            language: {
                processing: "Procesando...",
                search: "Buscar",
                lengthMenu: "Mostrar _MENU_ Registros",
                info: "Mostrando _START_ al _END_ de _TOTAL_ registros",
                infoEmpty: "Opcion no disponible",
                infoFiltered: "",
                infoPostFix: "",
                loadingRecords: "Cargandos registros",
                zeroRecords: "No hay datos disponibles en la tabla",
                emptyTable: "No hay datos disponibles en la tabla",
                paginate: {
                    first: "Primero",
                    previous: "Anterior",
                    next: "Siguiente",
                    last: "Ultimo",
                },
                aria: {
                    sortAscending: ": Activar orden de columna ascendente",
                    sortDescending: ": Activar orden de columna desendente"
                }
            },
            dom: "<'row'<'col-sm-4'B><'col-sm-4 d-flex justify-content-center' l><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
            buttons: botonesDatatable,
            initComplete: function(settings, json) {
                //datatable.column(0).header().removeAttribute("class");
                $("#datatable thead tr").clone(true).appendTo("#datatable thead");

                $("#datatable thead tr:eq(1) th").each(function(i) {
                    var title = $(this).text(); //es el nombre de la columna
                    if (title != "Acción" && title != "Selección" && title != "Tipo Vehículo" && title != "Centro De Costo") {
                        $(this).removeClass("sorting");
                        $(this).removeClass("sorting_asc");
                        $(this).html(
                            '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                        );
                        $(this).unbind();
                        $(this).parent().attr('id', 'searchColumns');

                        $("input", this).on("keyup change", function() {
                            if (datatable.column(i).search() !== this.value) {
                                datatable.column(i).search(this.value).draw();
                            }
                        });
                    } else {
                        if (title == "Tipo Vehículo") {
                            let tiposVehiculos = {{ Illuminate\Support\Js::from($tiposVehiculos) }}
                            let opcionesTiposVehiculos = [];
                            opcionesTiposVehiculos.push('<option value="">Todos</option>');
                            tiposVehiculos.forEach(elemento => {
                                opcionesTiposVehiculos.push('<option value="' + elemento + '">' + elemento + '</option>');
                            });

                            $(this).html(
                                '<select class="form-control listaDespegableConBuscador mh" data-live-search="true" id="campoFiltroTiposVehiculoDatatable">' + opcionesTiposVehiculos + '</select>'
                            );
                            $(this).removeClass("sorting");
                            $(this).removeClass("sorting_asc");
                            $(this).unbind();
                            $(this).parent().attr('id', 'searchColumns');

                            $("select", this).on("keyup change", function() {
                                if (datatable.column(i).search() !== this.value) {
                                    datatable.column(i).search(this.value).draw();
                                }
                            });

                            $('#campoFiltroTiposVehiculoDatatable').selectpicker({
                                dropupAuto: false,
                            });
                        } else {
                            if (title == "Centro De Costo") {
                                let centrosDeCostos = {{ Illuminate\Support\Js::from($centrosDeCostos) }}
                                let opcionesCentrosDeCostos = [];
                                opcionesCentrosDeCostos.push('<option value="">Todos</option>');
                                centrosDeCostos.forEach(elemento => {
                                    opcionesCentrosDeCostos.push('<option value="' + elemento.centro_costo + '">' + elemento.centro_costo + '</option>');
                                });

                                $(this).html(
                                    '<select class="form-control listaDespegableConBuscador mh" data-live-search="true" id="campoFiltroCentroCostoDatatable">' + opcionesCentrosDeCostos + '</select>'
                                );
                                $(this).removeClass("sorting");
                                $(this).removeClass("sorting_asc");
                                $(this).unbind();
                                $(this).parent().attr('id', 'searchColumns');

                                $("select", this).on("keyup change", function() {
                                    if (datatable.column(i).search() !== this.value) {
                                        datatable.column(i).search(this.value).draw();
                                    }
                                });

                                $('#campoFiltroCentroCostoDatatable').selectpicker({
                                    dropupAuto: false,
                                });
                            } else {
                                $(this).html("<div></div>");
                                $(this).removeClass("sorting");
                                $(this).removeClass("sorting_asc");
                            }
                        }
                    }
                });
            },
        });
    </script>

    <script>
        let idDocumentoRechazo;

        function aprobarDocumento(idDocumento) {
            document.getElementById("botonAprobado").setAttribute("disabled", true);
            Swal.fire({
                title: '¿Esta seguro?',
                text: "El documento cambiará su estado ha aprobada",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Si, aprobar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    generarLoading('{{ asset('img/logo.png') }}')
                    let csrf = '{{ csrf_token() }}';

                    let url = '{{ route('validacion-control-documental.aprobar', [':idDocumento']) }}';
                    url = url.replace(':idDocumento', idDocumento);

                    $.ajax({
                        type: 'POST',
                        datatype: 'json',
                        url: url,
                        headers: {
                            'X-CSRF-TOKEN': csrf
                        },
                        success: function(data) {
                            eliminarLoading()
                            Swal.fire({
                                    icon: 'success',
                                    title: '¡Aprobado!',
                                    text: 'El documento cambio su estado ha aprobada',
                                    confirmButtonColor: "#448aff",
                                    confirmButtonText: "Confirmar"
                                }).then((result) => {
                                    location.reload();
                                })
                                .catch((error) => {
                                    location.reload();
                                });

                        },
                        error: function(data) {
                            document.getElementById("botonAprobado").removeAttribute("disabled");
                            eliminarLoading()
                        }
                    })
                } else {
                    document.getElementById("botonAprobado").removeAttribute("disabled");
                }
            })
        }

        function abrirModalRechazarDocumento(idDocumento) {
            document.getElementById("campoObservacionModalDocumento").value = "";
            document.getElementById("validacionCampoObservacionModalDocumento").innerHTML = "";
            document.getElementById("campoObservacionModalDocumento").setAttribute("class", "form-control");
            idDocumentoRechazo = idDocumento;
            $("#modalFormularioRechazoDocumento").modal("show");
        }

        function rechazarDocumento() {
            document.getElementById("botonRechazado").setAttribute("disabled", true);
            if (document.getElementById("campoObservacionModalDocumento").value.trim().length > 0) {
                Swal.fire({
                    title: '¿Esta seguro?',
                    text: "El documento cambiará su estado ha rechazado",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '¡Si, rechazar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        generarLoading('{{ asset('img/logo.png') }}')
                        var datosFormulario = $("#formularioModalRechazoDocumento").serialize();
                        var csrf = '{{ csrf_token() }}';

                        let url = '{{ route('validacion-control-documental.rechazar', [':idDocumentoRechazo']) }}';
                        url = url.replace(':idDocumentoRechazo', idDocumentoRechazo);

                        $.ajax({
                            type: 'POST',
                            datatype: 'json',
                            url: url,
                            data: datosFormulario,
                            headers: {
                                'X-CSRF-TOKEN': csrf
                            },
                            success: function(data) {
                                eliminarLoading()
                                Swal.fire({
                                        icon: 'success',
                                        title: '¡Rechazado!',
                                        text: 'El documento cambio de estado ha rechazado',
                                        confirmButtonColor: "#448aff",
                                        confirmButtonText: "Confirmar"
                                    }).then((result) => {
                                        location.reload();
                                    })
                                    .catch((error) => {
                                        location.reload();
                                    });
                            },
                            error: function(data) {
                                entById("botonRechazado").removeAttribute("disabled");
                                eliminarLoading()
                            }
                        })

                    } else {
                        document.getElementById("botonRechazado").removeAttribute("disabled");
                    }
                })
            } else {
                document.getElementById("botonRechazado").removeAttribute("disabled");
                document.getElementById("campoObservacionModalDocumento").setAttribute("class", "form-control is-invalid");
                document.getElementById("validacionCampoObservacionModalDocumento").innerHTML = "El campo motivo de rechazo es obligatorio para cambiar el estado ha rechazado.";
            }
        }
    </script>

@stop