@extends('layouts.app', ['activePage' => 'metas', 'titlePage' => __('Metas')])

@section('content')

<style>
    #gridPoyectos th {
        font-size: 10px;
    }

    table {
        table-layout: fixed;
    }

    table td {
        word-wrap: break-word;
        max-width: 200px;
    }



    #gridPoyectos td {
        white-space: inherit;
    }

    table.dataTable tbody td {
        word-break: break-all;
        vertical-align: top;
    }
</style>
<div class="content">
    <input type="hidden" id="perfilLogueado" value="{{ auth()->user()->id_perfil }}">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <h4 class="card-title">Metas Mensuales</h4>
                                <!--<p class="card-category"> Here is a subtitle for this table</p>-->
                            </div>
                        </div>
                        <div class="row">
                            <!--<div class="col-3">
                                <div class="input-group input-group-static mb-4">
                                    <label for="">Fecha</label>
                                    <input type="text" class="form-control daterange" id="fechasFil" onchange="loadGrid();">
                                </div>
                            </div>
                             <div class="col-3">
                                <div class="input-group input-group-static mb-4">
                                    <div class="form-check">
                                      <input class="form-check-input" type="checkbox" value="" id="confechas" onchange="loadGrid();">
                                      <label class="custom-control-label" for="customCheck1">Todas las fechas</label>
                                    </div>
                                </div>
                            </div>-->
                            <div class="col-md-2" style="display: none;">
                                <div class="input-group input-group-static">
                                    <label for="">Mes:</label>
                                    <select class="form-control " id="mesFil" style="width: 100%" onchange="loadGrid()">
                                        <option value="0">TODOS</option>
                                        <option value="01">Enero</option>
                                        <option value="02">Febrero</option>
                                        <option value="03">Marzo</option>
                                        <option value="04">Abril</option>
                                        <option value="05">Mayo</option>
                                        <option value="06">Junio</option>
                                        <option value="07">Julio</option>
                                        <option value="08">Agosto</option>
                                        <option value="09">Septiembre</option>
                                        <option value="10">Octubre</option>
                                        <option value="11">Noviembre</option>
                                        <option value="12">Diciembre</option>
                                    </select>
                                </div>
                            </div>


                            <!-- <div class="col-2 mt-3">
                                <button type="button" class="btn btn-primary " onclick="loadGrid()" id="btn1">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                    Buscar
                                </button>
                            </div>-->
                            <div class="col-12 mt-3 text-right">
                                <button type="button" class="btn btn-primary " id="addA" onclick="newMeta();">
                                    Nueva Meta
                                </button>
                            </div>
                        </div>
                        <div class="row ">
                            <table class="table table-bordered table-hover" id="gridPoyectos">
                                <thead>
                                    <!-- <th class="text-capitalize  text-white text-xxs font-weight-bolder opacity-7">
                                        </th> -->
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Tipo</th>
                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Ejercicio</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Enero</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Febrero</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Marzo</th>
                                    <!--<th class="text-white  text-xxs font-weight-bolder opacity-7">Contacto</th>-->
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Abril</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Mayo</th>

                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Junio</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Julio</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Agosto</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Septiembre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Octubre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Noviembre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Diciembre</th>
                                    <th class="text-white  text-xxs font-weight-bolder opacity-7">Acciones</th>
                                </thead>
                                <tbody id="list">

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



<div class="modal fade" id="modalNewMeta">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="labelNewMeta">Nueva Meta</h4>
                <h4 class="modal-title" id="labelEditMeta" style="display: none;">Edita Meta</h4>
                <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="idMeta">
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label for="">Tipo de meta:</label>
                            <select class="form-control " id="tipo_meta" style="width: 100%">
                                @foreach($data['tipo_meta'] as $tp)
                                <option value="{{$tp}}">{{$tp}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label for="">Año:</label>
                            <select class="form-control " id="anioform" style="width: 100%">
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                                <option value="2027">2027</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Enero</label>
                            <input type="number" step="any" class="form-control mes" id="mes_1">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Febrero</label>
                            <input type="number" step="any" class="form-control mes" id="mes_2">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Marzo</label>
                            <input type="number" step="any" class="form-control mes" id="mes_3">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Abril</label>
                            <input type="number" step="any" class="form-control mes" id="mes_4">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Mayo</label>
                            <input type="number" step="any" class="form-control mes" id="mes_5">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Junio</label>
                            <input type="number" step="any" class="form-control mes" id="mes_6">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Julio</label>
                            <input type="number" step="any" class="form-control mes" id="mes_7">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Agosto</label>
                            <input type="number" step="any" class="form-control mes" id="mes_8">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Septiembre</label>
                            <input type="number" step="any" class="form-control mes" id="mes_9">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Octubre</label>
                            <input type="number" step="any" class="form-control mes" id="mes_10">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Noviembre</label>
                            <input type="number" step="any" class="form-control mes" id="mes_11">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group input-group-static">
                            <label>Diciembre</label>
                            <input type="number" step="any" class="form-control mes" id="mes_12">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="guardarMeta();">Guardar</button>
            </div>
        </div>
    </div>
</div>









<link rel="stylesheet" href="{{asset('vendor/jquery-ui/jquery-ui.min.css')}}">
<script src="{{asset('vendor/jquery-ui/jquery-ui.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.dropify').dropify();



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


        loadGrid();
    });

    function newMeta() {
        $('#idMeta').val('')
        $('.mes').val('')
        $('#labelNewMeta').show();
        $('#labelEditMeta').hide();
        $('#anioform').prop('disabled', false)
        $('#modalNewMeta').modal('show')
    }



    function blockSpecialChar(e) {
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
    }



    function loadGrid() {
        //$('#').DataTable();
        $('#gridPoyectos').dataTable().fnDestroy();
        $('#gridPoyectos td').css('white-space', 'initial');
        if ($('#confechas').prop('checked')) {
            confechas = 1;
        } else {
            confechas = 0;
        }
        if ($('#anioFil').val() == '0' && $('#mesFil').val() != '0') {
            Swal.fire({
                title: 'Selecciona un año',
                type: 'warning',
                timer: 2000
            })
            return false;
        }
        var table = $('#gridPoyectos').DataTable({
            lengthMenu: [10, 15, 20, 50, 100],
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            ajax: {
                url: "{{url('catalogos/get_metas')}}",
                type: "POST",
                data: {
                    anio: $('#anioFil').val(),
                }
            },
            columns: [{
                    data: "Tipo"
                },
                {
                    data: "Ejercicio"
                },
                {
                    data: "Enero"
                },
                {
                    data: "Febrero"
                },
                {
                    data: "Marzo"
                },
                {
                    data: "Abril"
                },
                {
                    data: "Mayo"
                },
                {
                    data: "Junio"
                },
                {
                    data: "Julio"
                },
                {
                    data: "Agosto"
                },
                {
                    data: "Septiembre"
                },
                {
                    data: "Octubre"
                },
                {
                    data: "Noviembre"
                },
                {
                    data: "Diciembre"
                },
                {
                    data: "acciones"
                },

            ],

            order: [
                [1, "desc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }

            ],
        });

        // $('#gridPoyectos tbody').on('click', 'td.details-control', function() {
        //     var tr = $(this).closest('tr');
        //     var row = table.row(tr);

        //     if (row.child.isShown()) {
        //         // This row is already open - close it
        //         row.child.hide();
        //         tr.removeClass('shown');
        //     } else {
        //         // Open this row
        //         row.child(format(row.data())).show();
        //         tr.addClass('shown');
        //     }
        // });
    }


    function guardarMeta() {
        var meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
        var metas = new Array();
        var tipo = $('#tipo_meta option:selected').val()
        var anio = $('#anioform').val()
        var id = $('#idMeta').val()
        for (var i = 0; i < 12; i++) {
            m = parseInt(i) + 1
            dat = {
                mes: meses[i],
                value: $('#mes_' + m).val()
            }
            metas.push(dat);
        }
        console.log(metas)
        $.ajax({
                url: "{{url('catalogos/guarda_meta')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    metas: metas,
                    anio: anio,
                    Tipo: tipo,
                    id: id,
                },
            })
            .done(function(resp) {
                console.log("success");
                if (resp.estatus > 0) {
                    $('#modalNewMeta').modal('hide')
                    loadGrid();
                } else {
                    Swal.fire({
                        title: 'Ya existen metas con el mismo ejercicio',
                        type: 'warning',
                        timer: 2000
                    })
                    return false;
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });


    }

    function editar(id) {
        $.ajax({
                url: "{{url('catalogos/get_meta')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id
                },
            })
            .done(function(resp) {
                console.log("success");
                $('#mes_1').val(resp.data.Enero)
                $('#mes_2').val(resp.data.Febrero)
                $('#mes_3').val(resp.data.Marzo)
                $('#mes_4').val(resp.data.Abril)
                $('#mes_5').val(resp.data.Mayo)
                $('#mes_6').val(resp.data.Junio)
                $('#mes_7').val(resp.data.Julio)
                $('#mes_8').val(resp.data.Agosto)
                $('#mes_9').val(resp.data.Septiembre)
                $('#mes_10').val(resp.data.Octubre)
                $('#mes_11').val(resp.data.Noviembre)
                $('#mes_12').val(resp.data.Diciembre)
                $('#tipo_meta').val(resp.data.Tipo).trigger('change')
                $('#anioform').val(resp.data.Ejercicio)
                $('#anioform').prop('disabled', true)
                $('#idMeta').val(id)
                $('#labelNewMeta').hide();
                $('#labelEditMeta').show();
                $('#modalNewMeta').modal('show')

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }

    function elimnar(id) {
        if (confirm("¿Deseas eliminar esta meta?") == true) {
            $.ajax({
                    url: "{{url('catalogos/eliminar_meta')}}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: id
                    },
                })
                .done(function(resp) {
                    console.log("success");
                    if (resp.estatus > 0) {
                        Swal.fire({
                            title: 'Se elimino correctamente',
                            type: 'success',
                            timer: 2000
                        })
                        loadGrid();
                        return false;
                    } else {
                        Swal.fire({
                            title: 'Error',
                            type: 'warning',
                            timer: 2000
                        })
                        return false;
                    }
                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });

        } else {
            return false;
        }
    }
</script>
@endsection