{{-- VIEW SAMPLE --}}
@extends('layouts.menu')

@section('tittle')
    REPORTS IT
@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">REPORTS IT</h3>
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Desde</label>
                            <input type="date" id="periodoInicio" class="form-control form-control-sm pickedDate"
                                value="{{ $date1 }}">
                        </div>
                        <div class="col-lg-2 text-end float-end ms-auto download-grp">
                            <label>Hasta</label>
                            <input type="date" id="periodoFinal" class="form-control form-control-sm pickedDate"
                                value="{{ $date }}">
                        </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="reportsIT_table" 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">Descripción</th>
                                    <th class="text-center">Infraestructura</th>
                                    <th class="text-center">Usuario Solicita</th>
                                    <th class="text-center">Responsable</th>
                                    <th class="text-center">Fecha Hora Creado</th>
                                </tr>
                            </thead>
                            <tbody>

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

        </div>
    </div>




    {{-- SAMPLE MODAL --}}
    <div class="modal fade" id="modalReporte" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"
        data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header" style="background-color: rgb(23, 73, 87);">
                    <h5 class="modal-title" id="exampleModalLabel" style="color: #fff">NUEVO REPORT IT</h5>
                </div>
                <div class="modal-body">

                    <form id="reportForm">

                        <div class="row">

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="asuntoBox">Asunto:</label>
                                    <input type="text" class="form-control form-control-sm textControls" name="asuntoBox"
                                        id="asuntoBox">
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="" class="col-form-label">Infraestructura:</label>
                                    <select class="form-select form-select-sm" aria-label="Default select example"
                                        id="infraestructura" name="infraestructura">
                                        <option value="#" selected>Seleccione una Infraestructura</option>
                                        @foreach ($infraestructurasData as $f)
                                            <option value="{{ $f->id_infraestructura }}">
                                                {{ $f->descripcion_infraestructura }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="col-form-label">Usuario:</label>
                                    <select class="form-select form-select-sm" aria-label="Default select example"
                                        id="usuario_solicita" name="usuario_solicita" style="width: 100%">
                                        <option selected value="0">Seleccione un Usuario</option>
                                        @foreach ($usersData as $user)
                                            <option value="{{ $user->PKUsuario }}">{{ $user->Nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>


                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="" class="col-form-label" for="motivoTextArea">Descripción:</label>
                                    <textarea name="descripcion" id="descripcion" class="form-control" cols="20" rows="4"></textarea>
                                </div>
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button type="submit" id="btnGuardar" class="btn btn-success">Guardar</button>
                            <button type="button" class="btn btn-secondary" id="btnCancelar"
                                data-dismiss="modal">Cancelar</button>
                        </div>

                    </form>

                </div>

            </div>
        </div>
    </div>
@endsection

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

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

            $('#modalReporte').on('shown.bs.modal', function(e) {
                $("#usuario_solicita").chosen({
                    width: "100%"
                });
            })


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

                $('#reportForm').trigger('reset');
                $('#modalReporte').modal("show");
                $('#btnGuardar').prop('disabled', false);

                document.getElementById('usuario_solicita').selectedIndex = 0;
                $('#usuario_solicita').trigger('chosen:updated');
            });
            $('#btnCancelar').click(function(e) {
                e.preventDefault();

                $('#reportForm').trigger('reset');
                $('#modalReporte').modal("hide");

                document.getElementById('usuario_solicita').selectedIndex = 0;
                $('#usuario_solicita').trigger('chosen:updated');

            });

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

                $('#btnGuardar').prop('disabled', true);

                asunto = $('#asuntoBox').val();

                infraestructura = $('#infraestructura').val();
                infraestructura_text = $('#infraestructura option:selected').text();

                usuario_solicita = $('#usuario_solicita').val();
                usuario_solicita_text = $('#usuario_solicita option:selected').text();

                descripcion = $('#descripcion').val();

                if (!$('#asuntoBox').val() || !$('#infraestructura').val() || usuario_solicita == 0 || !$(
                        '#descripcion').val()) {
                    Swal.fire("", "Debes llenar TODOS los campos!", "warning");

                    $(this).prop('disabled', false);
                } else {

                    Swal.fire({
                    title: '',
                    html: '<b>Enviando Reporte</b>',
                    didOpen: () => {
                        Swal.showLoading()
                    },
                    allowOutsideClick: false, // Evita que el usuario cierre el modal haciendo clic fuera de él
                    showConfirmButton: false // Oculta el botón de confirmación
                });

                    try {
                        $.ajax({
                            beforeSend: function(xhr, type) {
                                if (!type.crossDomain) {
                                    xhr.setRequestHeader('X-CSRF-Token', $(
                                        'meta[name="csrf-token"]').attr('content'));
                                }
                            },
                            url: "{{ url('/api/save/report/it') }}",
                            method: "POST",
                            data: {
                                asunto: asunto,
                                infraestructura: infraestructura,
                                infraestructura_text: infraestructura_text,
                                usuario_solicita: usuario_solicita,
                                usuario_solicita_text: usuario_solicita_text,
                                descripcion: descripcion
                            },
                            success: function(data) {
                                Swal.close();

                                if (data.save == 1) {
                                    Swal.fire("", "Report IT Creado", "success");

                                    reportsIT_table.ajax.reload(null, false);

                                    $('#btnGuardar').prop('disabled', true);

                                    $('#reportForm').trigger('reset');
                                    $('#modalReporte').modal("hide");

                                    document.getElementById('usuario_solicita').selectedIndex =
                                        0;
                                    $('#usuario_solicita').trigger('chosen:updated');
                                } else {
                                    Swal.fire("", "Error L: " + data.error, "error");
                                }
                            }
                        });
                    } catch (error) {
                        Swal.fire("", "Error: " + error, "error");
                    }



                }

            });








            getFirstCallIT();
            $(".pickedDate").change(function(e) {
                e.preventDefault();

                getFirstCallIT();
            });

            function getFirstCallIT() {
                invisibleColumns2 = [1, 4, 10];

                var periodoInicio = $("#periodoInicio").val();
                var periodoFinal = $("#periodoFinal").val();

                $("#reportsIT_table").DataTable().clear().destroy();

                reportsIT_table = $("#reportsIT_table").DataTable({
                    beforeSend: function(xhr, type) {
                        if (!type.crossDomain) {
                            xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr(
                                'content'));
                        }
                    },
                    scrollX: true,
                    scrollCollapse: true,
                    scrollY: '450px',
                    pageLength: 50,
                    fixedColumns: {
                        left: 2
                    },
                    ajax: {
                        url: "{{ url('/api/list/report/it') }}" + "/" + periodoInicio + "/" + periodoFinal,
                        method: "GET",
                    },
                    language: {
                        url: "{{ asset('json/es-ES.json') }}",
                    },
                    columns: [{
                            data: "id_report"
                        },
                        {
                            data: "asunto"
                        },
                        {
                            data: "descripcion",
                            className: "text-wrap"
                        },
                        {
                            data: "infraestructura",
                            className: "text-wrap"
                        },
                        {
                            data: "usuario_solicita"
                        },
                        {
                            data: "responsable"
                        },
                        {
                            data: "fecha_hora_creado_text",
                            className: "text-wrap"
                        },

                    ],
                    order: [
                        [0, "DESC"]
                    ],
                });
            }


        });
    </script>
@endsection