@extends('panelVoting.panel')
@section('content')
    <div class="container-fluid">
        <div class="py-2">
            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <img class="card-img-top img-responsive" id="assemblyman_img"
                                    src="/front/assets/img/sem-foto.jpg" alt="Card image cap">
                                <div class="card-body">
                                    <h5 class="text-center card-title text-uppercase text_reset" id="assemblyman"> </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="my-3 col-md-12 bg-light">
                            <h1 class="py-2 my-3 text-center text-white bg-dark">RESUMO</h1>
                            <table class="table">
                                <tbody>
                                    <tr>
                                        <td>VOTOS
                                            <br>
                                        </td>
                                        <td id="total" class="text_reset">-</td>
                                    </tr>
                                    <tr>
                                        <td>SIM</td>
                                        <td id="resume_sim" class="text_reset">-</td>
                                    </tr>
                                    <tr>
                                        <td>NÃO</td>
                                        <td id="resume_nao" class="text_reset">-</td>
                                    </tr>
                                    <tr>
                                        <td>NULO</td>
                                        <td id="resume_abstention" class="text_reset">-</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @php $url = $_SERVER['HTTP_HOST']; @endphp
                <div class="col-md-9">
                    <h1 class="py-3 text-center text-white bg-dark text-uppercase name_voting text_reset">-</h1>
                    @if ($url != 'rioverde.localhost:8000' || $url != 'rioverde.legissuper.com.br')
                        <h5 class="py-3 text-center text-white bg-dark text-uppercase name_voting2 text_reset">-</h5>
                    @endif
                    <div class="py-2 row container-fluid" style="width: auto;">
                        <div class="py-3 border col-md-6 bg-success">
                            <div class="row">
                                <div class="text-white col-md-12">
                                    <h1 class="text-center">SIM
                                        <br>
                                    </h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="text-white col-md-12">
                                    <h1 class="text-center text_reset" id="yes" style="font-size: 150px">-</h1>
                                </div>
                            </div>
                        </div>
                        <div class="py-3 text-white border col-md-6 bg-danger">
                            <div class="row">
                                <div class="col-md-12">
                                    <h1 class="text-center">NÃO</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h1 class="text-center text_reset" id="no" style="font-size: 150px">-</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <h1 class="py-2 my-3 text-center text-white bg-dark">LISTA DE VOTOS
                                <br>
                            </h1>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group lista" id="list_impar"></ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="list-group lista" id="list_par"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="/assets/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>

<script>
    var timeVoting = null;
    $(document).ready(function() {
        setInterval(function() {
            $.ajax({
                url: '/get-stage-panel',
                method: 'GET',
                async: false
            }).success(function(data) {
                data = JSON.parse(data);
                @if (\App\Models\Parameters::where('slug', 'painel-digital-permitir-multi-sessoes')->first()->value)
                    getDataVoting()
                @else
                    if (data.stage != 'voting' && data.stage != 'owner') {
                        window.location.href = '/painel-votacao/' + data.stage;
                    } else {
                        getDataVoting()
                    }
                @endif
            });
        }, 2000);
    });

    var getDataVoting = function(url) {
        data = {
            _token: '{{ csrf_token() }}'
        }
        $.ajax({
            url: "/painel-votacao/data/owner",
            method: "POST",
            data: data,
            async: false
        }).success(function(response) {

            response = JSON.parse(response);
            if (response.status) {
                setData(response);
            } else {
                resetPainel();
            }
        });
    };

    var setData = function(data) {
        if (!data.name.includes('ATA')) {

            var dominio = window.location.host

            $('.name_voting').html(data.name[0]);

            if (dominio != 'rioverde.legissuper.com.br') {
                $('.name_voting2').html(data.name[1]);
            }
            if (dominio == 'rioverde.legissuper.com.br') {
                $('.name_voting2').hide();
            }
        } else {
            $('.name_voting').html(data.name);
        }

        $('#assemblyman').html(data.assemblyman_active.name);
        if (data.image_fixed != "") {
            $('#assemblyman_img').prop('src', data.image_fixed);
        } else {
            $('#assemblyman_img').prop('src', '/front/assets/img/sem-foto.jpg');
        }
        $('#total').html(data.resume.total);
        $('#resume_sim').html(data.resume.yes);
        $('#resume_nao').html(data.resume.no);
        $('#resume_abstention').html(data.resume.abstention);

        $('#yes').html(data.votes.yes);
        $('#no').html(data.votes.no);

        var list_par = '';
        var list_impar = '';

        $('.lista').empty();

        if (data.list) {
            $.each(data.list, function(key, value) {
                if (key % 2 == 0) {
                    list_par +=
                        '<li class="list-group-item d-flex justify-content-between align-items-center text-uppercase">' +
                        value.assemblyman;
                    if (value.vote == 'SIM') {
                        list_par += '<span class="pull-right text-success">' + value.vote + '</span>';
                    }
                    if (value.vote == 'NÃO') {
                        list_par += '<span class="pull-right text-danger">' + value.vote + '</span>';
                    }
                    if (value.vote == 'ABSTENÇÃO') {
                        list_par += '<span class="pull-right text-muted">' + value.vote + '</span>';
                    }
                    if (value.vote == 'AUSENTE') {
                        list_par += '<span class="pull-right text-muted">' + value.vote + '</span>';
                    }

                    list_par += '</li>';
                } else {
                    list_impar +=
                        '<li class="list-group-item d-flex justify-content-between align-items-center text-uppercase">' +
                        value.assemblyman;
                    if (value.vote == 'SIM') {
                        list_impar += '<span class="pull-right text-success">' + value.vote + '</span>';
                    }
                    if (value.vote == 'NÃO') {
                        list_impar += '<span class="pull-right text-danger">' + value.vote + '</span>';
                    }
                    if (value.vote == 'ABSTENÇÃO') {
                        list_impar += '<span class="pull-right text-muted">' + value.vote + '</span>';
                    }
                    if (value.vote == 'AUSENTE') {
                        list_impar += '<span class="pull-right text-muted">' + value.vote + '</span>';
                    }
                    list_impar += '</li>';
                }

            })
        }
        $('#list_par').append(list_par);
        $('#list_impar').append(list_impar);
    };

    var resetPainel = function() {
        $('.text_reset').html("-");
        $('.lista').empty();
        $('#assemblyman_img').prop('src', '/front/assets/img/sem-foto.jpg');
    };
</script>