@extends('voyager::master')
@section('page_title','Corrida')
@section('css')
<style>
    .panel .mce-panel {
        border-left-color: #fff;
        border-right-color: #fff;
    }

    .panel .mce-toolbar,
    .panel .mce-statusbar {
        padding-left: 20px;
    }

    .panel .mce-edit-area,
    .panel .mce-edit-area iframe,
    .panel .mce-edit-area iframe html {
        padding: 0 10px;
        min-height: 350px;
    }

    .mce-content-body {
        color: #555;
        font-size: 14px;
    }

    .panel.is-fullscreen .mce-statusbar {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 200000;
    }

    .panel.is-fullscreen .mce-tinymce {
        height: 100%;
    }

    .panel.is-fullscreen .mce-edit-area,
    .panel.is-fullscreen .mce-edit-area iframe,
    .panel.is-fullscreen .mce-edit-area iframe html {
        height: 100%;
        position: absolute;
        width: 99%;
        overflow-y: scroll;
        overflow-x: hidden;
        min-height: 100%;
    }


    .switch2 {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 20px;
    }

    .switch2 input {
        display: none;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        margin: 0px !important;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 1px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: #36c6d3;
    }

    input:focus+.slider {
        box-shadow: 0 0 1px #36c6d3;
    }

    input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

</style>
@stop
@section('page_header')
<h1 class="page-title">
    <i class="icon voyager-megaphone"></i>
    Inscritos
</h1>
@stop
@section('content')
<div class="page-content container-fluid">


    @can('browse_kits')


    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">Inscrições</h3>
            <div class="panel-actions">
            </div>
        </div>
        <div class="panel-body">

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="">Evento</label>
                        <select class="form-control" name="evento" id="combo-evento">
                            <option value="0">Selecione...</option>
                            @isset($eventos)
                                @if ($eventos->count() > 0)
                                    @foreach ($eventos as $e)
                                        <option value="{{$e->id}}">{{$e->titulo}}</option>
                                    @endforeach
                                @endif
                            @endisset
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="">Modalidade</label>
                        <select class="form-control" name="modalidade" id="combo-modalidade">
                            <option value="0">Selecione...</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="">Categoria</label>
                        <select class="form-control" name="categoria" id="combo-categoria">
                            <option value="0">Selecione...</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <form action="/admin/inscritos/exportar" method="POST" target="_blank">
                        @csrf
                        <input type="hidden" name="evento" id="idevento" value="0">
                        <input type="hidden" name="modalidade" id="idmodalidade" value="0">
                        <input type="hidden" name="categoria" id="idcategoria" value="0">
                        <button type="submit" class="btn btn-primary">
                            Exportar Filtro
                        </button>
                    </form>
                    </a>
                </div>
            </div>


            <div style="border: 0px solid #c7c7c7; padding:10px;">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered dataTable no-footer" id="tab_inscritos">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Número</th>
                                <th>Nome</th>
                                <th>Email</th>
                                <th>Telefone</th>
                                <th>Documento</th>
                                <th>Sexo</th>
                                <th>Nascimento</th>
                                <th>Modalidade</th>
                                <th>Ingresso</th>
                                <th>Categoria</th>
                                <th>Status</th>
                                <th>Valor</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>



    @else

    <div class="alert alert-danger">
        Você não tem permissão para acessar esta página.
    </div>

    @endcan


</div>







@stop
@section('javascript')
<script>
    const carregaCategorias = (m, e) => {
        $.ajax({
            data: {
                id: m,
                ev: e,
            },
            type: 'POST',
            dataType: "json",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/admin/eventos/combo/categorias',
            success: function (data) {
                $('#combo-categoria').empty();
                $('#combo-categoria').append(new Option('Selecione...', '0'));                
                data.forEach(element => {
                    $('#combo-categoria').append(new Option(element.nome, element.id));
                });

                var tab = $('#tab_inscritos').DataTable();	
                tab.draw(false);      

            }
        });        
    }



    const carregaModalidades = (i) => {
        $.ajax({
            data: {
                id: i,
            },
            type: 'POST',
            dataType: "json",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/admin/eventos/inscricao/combo/modalidade',
            success: function (data) {
                $('#combo-modalidade').empty();
                $('#combo-modalidade').append(new Option('Selecione...', '0'));
                $('#combo-categoria').empty();
                $('#combo-categoria').append(new Option('Selecione...', '0'));                
                data.mods.forEach(element => {
                    $('#combo-modalidade').append(new Option(element.nome, element.id));
                });
                var tab = $('#tab_inscritos').DataTable();	
                tab.draw(false); 

            }
        });
    }


    $('#combo-evento').on('change', function () {
        if ($(this).val() != 0) {
            carregaModalidades($(this).val());
            $('#idevento').val($(this).val());
            $('#idmodalidade').val(0);   
            $('#idcategoria').val(0);   
        } else {
            $('#combo-modalidade').empty();
            $('#combo-modalidade').append(new Option('Selecione...', '0'));            
        }
    })


    $('#combo-modalidade').on('change', function () {
        if ($(this).val() != 0) {
            carregaCategorias($(this).val(), $('#combo-evento').val());    
            $('#idmodalidade').val($(this).val());      
        } else {
            $('#combo-categoria').empty();
            $('#combo-categoria').append(new Option('Selecione...', '0'));       
        }
    })


    $('#combo-categoria').on('change', function () {
        if ($(this).val() != 0) {
            $('#idcategoria').val($(this).val()); 
            var tab = $('#tab_inscritos').DataTable();	
            tab.draw(false);                 
        }
    })



    $(document).ready(function () {

        $("#tab_inscritos").dataTable({
            drawCallback: function () {
                $('[data-toggle="tooltip"]').tooltip();
            },

            processing: true,
            serverSide:true,
            ajax:{
                url:"/admin/inscritos/tabela",
                    data: function ( d ) {
                        d.evento = $('#combo-evento').val();
                        d.modalidade = $('#combo-modalidade').val();
                        d.categoria =  $('#combo-categoria').val();
                    }                
            },


            "language": {
                "lengthMenu": "Mostrando _MENU_ registros",
                "zeroRecords": "Nada encontrado",
                "info": "Mostrando _START_ de _END_ ",
                "infoEmpty": "Nenhum registro ainda",
                "infoFiltered": "(Filtrado de um total de _MAX_ registros)",
                "sSearch": "Pesquisar",
                "oPaginate": {
                    "sFirst": "Primeiro",
                    "sPrevious": "Anterior",
                    "sNext": "Próximo",
                    "sLast": "Último"
                },
            },
            buttons: [{
                    extend: 'pdfHtml5',
                    className: 'btn btn-outline-success',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excelHtml5',
                    className: 'btn btn-outline-success',
                    exportOptions: {
                        columns: ':visible',
                        format: {
                            body: function (data, row, column, node) {
                                data = $('<p>' + data + '</p>').text();
                                return $.isNumeric(data.replace(',', '.')) ? data.replace(',',
                                    '.') : data;
                            }
                        }
                    }
                },
                {
                    extend: 'csvHtml5',
                    className: 'btn btn-outline-success',
                    exportOptions: {
                        columns: ':visible'
                    }
                },

                {
                    extend: 'colvis',
                    className: 'btn btn-outline-success',
                    text: 'Colunas'
                },

            ],
            columns:[
					{data:'id'},
					{data:'numero'},
					{data:'nome'},
					{data:'email'},
					{data:'fone'},
					{data:'documento'},
					{data:'sexo'},
					{data:'nasc'},
					{data:'modalidade'},
					{data:'lote'},
					{data:'categoria'},
					{data:'status'},
					{data:'valor'},
                    {                   
                        targets: 13,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            return '<a href="/admin/inscritos/inscrito/'+full.id+'" target="_blank" class="btn btn-primary"><i class="icon voyager-eye"></i></a>';
                        }
				    },



            ],            
            columnDefs: [],
            deferRender: true,
            "lengthMenu": [
                [5, 10, 15, 20, 50, 100, -1],
                [5, 10, 15, 20, 50, 100, "Tudo"] // change per page values here
            ],
            "order": [
                [0, 'desc']
            ],
            "pageLength": 10,
            "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
        });

    });

</script>
@stop