@extends('layouts.menu')

@section('tittle')
    GUIA ASISTENCIA DE SOLUCION DE PROBLEMAS
@endsection

@section('contenido')
    <div class="row">
        <div class="col-lg-12">

            <div class="card card-table comman-shadow shadow-lg">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="page-title">GUIA ASISTENCIA DE SOLUCION DE PROBLEMAS</h3>
                        </div>
                        <div class="col-auto text-end float-end ms-auto download-grp">
                            <a href="#" type="button" class="btn btn-primary" id="btnNuevo" data-toggle="modal"
                                title="Crear Nuevo" alt="Crear Nuevo"><i class="fas fa-plus"></i></a>
                        </div>
                    </div>
                    <br>

                    <div class="table-responsive">
                        <table id="tableSoluciones" class="table table-hover table-center table-bordered table-striped"
                            style="width:100%">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center">#</th>
                                    <th class="text-center">Asunto</th>
                                    <th class="text-center">Clasificacion</th>
                                    <th class="text-center">ID Clasificacion</th>
                                    <th class="text-center">Solucion</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>

                </div>
            </div>

        </div>
    </div>



    <div class="modal fade" id="modalSolucion" tabindex="-1" aria-labelledby="modalSolucionLabel" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header modal-header-vehicles" style="background-color: crimson">
                    <h5 class="modal-title" id="modalSolucionLabel" style="color: #fff"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formSolucion">
                    <div class="modal-body">

                        <input type="hidden" id="solucion_id">

                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" id="asunto_label">Asunto</label>
                                    <input type="text" class="form-control form-control-sm" id="asunto_problema"
                                        placeholder="">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="" id="asunto_label">Clasificación</label>
                                    <select type="text" class="form-select form-select-sm" name="clasificacionSelect"
                                        id="clasificacionSelect">
                                        <option value="0">Seleccione una opción</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label for="">Solucion</label>
                                {{-- <textarea id="txt_solucion" style="height: 100vh" readonly></textarea> --}}
                                <div class="form-control form-control-sm quill-editor" name="txt_solucion" id="txt_solucion"
                                    rows="3" style="450px"></div>
                            </div>
                        </div>



                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success" id="btnSaveSolucion">Guardar</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    </div>

                </form>

            </div>
        </div>
    </div>



    <div class="modal fade" id="modalClasificacion" data-bs-keyboard="false" data-bs-backdrop="static" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header headerClasificacionTitle">
                    <h5 class="modal-title mdClasificacionTitle" id="exampleModalLabel"></h5>
                </div>
                <form id="formClasificacion">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Clasificación:</label>
                                    <input class="form-control-sm form-control txtClasificacion" id="txtClasificacion"
                                        type="text">
                                </div>
                                <div class="text-right d-flex justify-content-end">
                                    <label class="form-check-label" for="geolocalizacionCheck" style="margin-right: 2%">
                                        <b> Ejemplo: </b> Ticket para Área 1, Área 2, etc.
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="btnGuardarClasificacion" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-danger" id="btnCancelarNuevaClasificacion"
                            data-dismiss="modal">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            var buttons = "Brtlip";

            $('#indicadoresITMenu, #guiaSolucionProblemasMenu').addClass('active');

            var editors = {};

            // Inicializar los editores Quill
            $('.quill-editor').each(function() {
                var editorId = $(this).attr('id');
                editors[editorId] = new Quill(`#${editorId}`, {
                    theme: 'snow',
                    modules: {
                        toolbar: [
                            [{
                                'header': [1, 2, false]
                            }],
                            ['bold', 'italic', 'underline'],
                            ['link', 'blockquote', 'code-block'],
                            [{
                                'list': 'ordered'
                            }, {
                                'list': 'bullet'
                            }],
                            [{
                                'align': []
                            }],
                            ['clean']
                        ]
                    }
                });

                // Obtener el contenido del atributo data-content y establecerlo en Quill
                var content = $(this).data('content');
                if (content) {
                    editors[editorId].clipboard.dangerouslyPasteHTML(content);
                }
            });

            // Guardar la variable 'editors' para usarla en otro evento
            window.quillEditors = editors;

            function fillSelectClasificaciones() {
                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $(
                                    'meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "POST",
                    url: "{{ url('/api/fill/select/clasificaciones/por') }}",
                    async: false,
                    data: {
                        group_id: 2

                    },
                    success: function(data) {
                        $('#clasificacionSelect').html(data);
                    }
                });
            }

            fillSelectClasificaciones();

            $('#clasificacionSelect').change(function(e) {
                e.preventDefault();

                var clasificacionValue = $(this).val();

                if (clasificacionValue == 'new') {
                    $('#formClasificacion').trigger('reset');
                    $(".headerClasificacionTitle").css("background-color", "#f44336");
                    $(".headerClasificacionTitle").css({
                        color: "white",
                        "font-weight": "900",
                    });
                    $(".mdClasificacionTitle").text("Nueva Clasificación");
                    $('#modalClasificacion').modal('show');
                }
            });

            $('#btnCancelarNuevaClasificacion').click(function(e) {
                e.preventDefault();

                $('#txtClasificacion').val('');
                $('#clasificacionSelect').val(0);
                $('#modalClasificacion').modal('hide');
                $('#btnSaveSolucion').prop('disabled', false);
            });


            $('#btnGuardarClasificacion').click(function(e) {
                e.preventDefault();

                txtClasificacion = $.trim($('#txtClasificacion').val());

                $.ajax({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]')
                                .attr(
                                    'content'));
                        }
                    },
                    type: "POST",
                    url: "{{ url('/api/save/new/clasificacion') }}",
                    async: false,
                    data: {
                        group_id: 2,
                        clasificacion: txtClasificacion,
                    },
                    success: function(data) {
                        if (data.save == 1) {
                            if (data.last_id != 0) {
                                fillSelectClasificaciones();
                            }

                            $('#txtClasificacion').val('');
                            $('#modalClasificacion').modal('hide');
                            $('#clasificacionSelect').val(data.last_id).val();
                        }
                    }
                });
            });


            tableSoluciones = $("#tableSoluciones").DataTable({
                beforeSend: function(xhr, type) {
                    if (!type.crossDomain) {
                        xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                            'content'));
                    }
                },
                fixedColumns: {
                    right: 1
                },
                ajax: {
                    url: "{{ url('/api/list/guia/soluciones') }}",
                },
                language: {
                    url: "{{ asset('json/es-ES.json') }}",
                },
                columns: [{
                        data: "id_problema"
                    },
                    {
                        data: "asunto"
                    },
                    {
                        data: "clasificacion"
                    },
                    {
                        data: "id_clasificacion"
                    },
                    {
                        data: "solucion"
                    },
                    {
                        defaultContent: "<div class='text-center'><div class='btn-group'><button class='btn btn-warning btn-sm btnEdit' id='btnEdit' title='Editar' alt='Editar'><i class='material-icons'>edit</i></button><button class='btn btn-info btn-sm btnView' id='btnView' title='Cambiar Estado' alt='Visualizar'><i class='material-icons'>visibility</i></button></div></div>",
                    }
                ],
                columnDefs: [{
                    targets: [3, 4],
                    visible: false,
                    searchable: true
                }],
                order: [
                    [1, "asc"]
                ],
            });


            $('#btnNuevo').click(function(e) {
                e.preventDefault();

                $('#formSolucion').trigger('reset');
                $('#btnSaveSolucion').prop('disabled', false);
                $('#solucion_id').val(null);
                $('#asunto_problema').prop('readonly', false);
                $('#clasificacionSelect').prop('disabled', false);
                $('#modalSolucion').modal('show');
                $('#modalSolucionLabel').text('NUEVA GUIA DE SOLUCION DE PROBLEMAS');
                
                var editors = window.quillEditors;
                editors['txt_solucion'].enable(true);
                editors['txt_solucion'].clipboard.dangerouslyPasteHTML('');

                opcion = 1;
            });

            $('#formSolucion').submit(function(e) {
                e.preventDefault();

                id = $('#solucion_id').val();
                asunto = $('#asunto_problema').val();
                clasificacion = $('#clasificacionSelect').val();

                var editors = window.quillEditors;
                var descripcion = editors['txt_solucion'].root.innerHTML;

                if (!$('#asunto_problema').val() || clasificacion == 0 || descripcion == '' ||
                    descripcion == null) {
                    Swal.fire("", "Debes llenar todos los campos y/o añadir una descripcion!", "warning")
                } else {
                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader(
                                        'X-CSRF-Token', $(
                                            'meta[name="csrf-token"]'
                                        ).attr(
                                            'content'));
                                }
                            },
                            url: "{{ url('/api/insert/edit/solucion') }}",
                            type: "POST",
                            datatype: "json",
                            async: false,
                            data: {
                                id: id,
                                asunto: asunto,
                                descripcion: descripcion,
                                clasificacion: clasificacion,
                                opcion: opcion
                            },
                            success: function(data) {
                                if (data.save == 1) {

                                    if (data.existe == 0) {
                                        if (opcion == 1) {
                                            Swal.fire("",
                                                "Guia de Solucion Creada!",
                                                "success");
                                        } else {
                                            Swal.fire("",
                                                "Guia de Solucion Editada!",
                                                "success");
                                        }
                                    } else {
                                        Swal.fire("", "Ya existe esta Guia de Solucion!",
                                            "warning");
                                    }

                                    $('#formSolucion').trigger('reset');
                                    tableSoluciones.ajax.reload(null, false);
                                    $('#modalSolucion').modal("hide");

                                } else {

                                    Swal.fire("", "Error L: " + data.error,
                                        "error");

                                }
                            },
                        });
                    } catch (error) {
                        Swal.fire("", "Error A: " + error, "error")
                    }
                }





            });



            $(document).on('click', '.btnEdit', function() {
                fila = $(this).closest("tr");

                $('#formSolucion').trigger('reset');

                var data = $("#tableSoluciones").DataTable().row(fila).data();
                var id = data['id_problema'];
                var asunto = data['asunto'];
                var clasificacion = data['id_clasificacion'];
                var descripcion = data['solucion'];

                opcion = 2;

                $('#btnSaveSolucion').prop('disabled', false);
                $('#solucion_id').val(id);
                $('#asunto_problema').val(asunto);
                $('#clasificacionSelect').val(clasificacion).change();

                $('#asunto_problema').prop('readonly', true);

                var editors = window.quillEditors;
                editors['txt_solucion'].enable(true);
                editors['txt_solucion'].clipboard.dangerouslyPasteHTML(descripcion || '');

                $('#modalSolucion').modal('show');
                $('#modalSolucionLabel').text('EDITAR GUIA DE SOLUCION DE PROBLEMAS');
            });


            $(document).on('click', '.btnView', function() {
                fila = $(this).closest("tr");

                $('#formSolucion').trigger('reset');

                var data = $("#tableSoluciones").DataTable().row(fila).data();
                var id = data['id_problema'];
                var asunto = data['asunto'];
                var clasificacion = data['id_clasificacion'];
                var descripcion = data['solucion'];

                opcion = 2;

                $('#asunto_problema').val(asunto);
                $('#btnSaveSolucion').prop('disabled', true);
                $('#clasificacionSelect').val(clasificacion).change();

                $('#asunto_problema').prop('readonly', true);
                $('#clasificacionSelect').prop('disabled', true);
                
                var editors = window.quillEditors;
                editors['txt_solucion'].enable(false);
                editors['txt_solucion'].clipboard.dangerouslyPasteHTML(descripcion || '');

                $('#modalSolucion').modal('show');
                $('#modalSolucionLabel').text('SOLUCION AL PROBLEMA ' + asunto);
            });



        });
    </script>
@endsection