@extends('panelVoting.panel')
@section('content')
        <style rel="stylesheet">
        .vote-sim {
            background-color: rgb(76 175 80);
            color: white;
        }

        .vote-nao {
            background-color: rgb(244 67 54 / 97%);
            color: white;
        }

        .vote-abstencao {
            background-color: #0055b9c9;
            color: white;
        }

        .vote-ausente {
            background-color: rgba(158, 158, 158, 0.2);
            color: white;
        }

        .list-group {
            list-style-type: none;
            padding-left: 0;
        }

        .list-group-item {
            padding: 10px;
        }

        .custom-bg {
            background-color: #004392 !important;
        }
    </style>
    <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>
                                        @if (
                                            $_SERVER['HTTP_HOST'] == 'cmsidrolandia.legissuper.com.br' ||
                                                $_SERVER['HTTP_HOST'] == 'cmsidrolandia.localhost:8000' ||
                                                $_SERVER['HTTP_HOST'] == 'jardim.legissuper.com.br' ||
                                                $_SERVER['HTTP_HOST'] == 'jardim.localhost:8000')
                                            <td>ABSTENÇÃO</td>
                                        @else
                                            <td>NULO</td>
                                        @endif
                                        <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-4 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-4 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 class="py-3 text-white border col-md-4 custom-bg">
                            <div class="row">
                                <div class="col-md-12">
                                    @if (
                                        $_SERVER['HTTP_HOST'] == 'cmsidrolandia.legissuper.com.br' ||
                                            $_SERVER['HTTP_HOST'] == 'cmsidrolandia.localhost:8000')
                                        <h1 class="text-center">ABSTENÇÃO</h1>
                                    @else
                                        <h1 class="text-center">NULO</h1>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <h1 class="text-center text_reset" id="abstention" 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') {
                        window.location.href = '/painel-votacao/' + data.stage;
                    } else {
                        getDataVoting()
                    }
                @endif
            });
        }, 2000);
    });

    var getDataVoting = function() {
        $.ajax({
            url: "https://legissuper.com.br/api/voting/painel/v1/data",
            method: "POST",
            headers: {
                "X-Authorization": "{{ env('LEGIS_KEY') }}",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            data: {
                tenant: "{{ tenant()->id }}"
            },
            dataType: "JSON",
            success: function(response) {
                if (response.status) {
                    setData(response);
                } else {
                    resetPainel();
                }
            },
            error: function(xhr, status, error) {
                console.error("Erro na requisição:", error);
            }
        });
    };


    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.assemblyman_active.image != "") {
            $('#assemblyman_img').prop('src', data.assemblyman_active.image);
        } else {
            $('#assemblyman_img').prop('src', data.company_image);
        }
        $('#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);
        $('#abstention').html(data.resume.abstention);

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

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

        if (data && data.list) {
            var list_par = '';
            var list_impar = '';

            $.each(data.list, function(key, value) {
                let image = value.image || '/front/assets/img/sem-foto.jpg';

                let list_item = `
        <li class="list-group-item d-flex justify-content-between align-items-center text-uppercase">
            <div class="d-flex align-items-center">
                <img
                    src="${image}"
                    alt="${value.assemblyman}"
                    class="rounded-circle me-3"
                    style="width: 50px; height: 50px; object-fit: cover; margin-right: 20px;"
                >
                ${value.assemblyman}
            </div>
        `;

                let vote_class = '';

                if (value.vote === 'SIM') {
                    vote_class = 'vote-sim';
                    list_item += '<span class="pull-right">' + value.vote + '</span>';
                } else if (value.vote === 'NÃO') {
                    vote_class = 'vote-nao';
                    list_item += '<span class="pull-right">' + value.vote + '</span>';
                } else if (value.vote === 'ABSTENÇÃO') {
                    vote_class = 'vote-abstencao';
                    list_item += '<span class="pull-right">' + value.vote + '</span>';
                } else if (value.vote === 'AUSENTE') {
                    vote_class = 'vote-ausente';
                    list_item += '<span class="pull-right">' + value.vote + '</span>';
                }


                list_item += '</li>';

                list_item = list_item.replace('<li',
                    `<li class="list-group-item d-flex justify-content-between align-items-center text-uppercase ${vote_class}"`
                );

                if (key % 2 === 0) {
                    list_par += list_item;
                } else {
                    list_impar += list_item;
                }
            });

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

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