@extends('layouts.voting_master')

@section('Breadcrumbs')
    {!! Breadcrumbs::render('meetings.show') !!}
@endsection

@section('content')
    @php
        $tenantId = function_exists('tenant') && tenant() ? (string) tenant('id') : null;
        $socketServerUrl = config('services.socket_io.client_url');
    @endphp

    <div class="container">
        <div class="row">

            <div class="col-6 col-md-4 mb-4">
                <div class="card small-card">
                    <img id="assemblyman_image" src="/front/assets/img/sem-foto.jpg" class="card-img-top" alt="Parlamentar">
                    <div class="card-body">
                        <h3 id="assemblyman_voting" class="card-title text-uppercase"> - </h3>
                        <p class="card-text">
                        <h3 class="session"> SESSÃO - </h3>
                        <small class="type"> TIPO - </small>
                        </p>
                    </div>
                    <input value="{{ $id }}" name="assemblyman_id" id="assemblyman_id" hidden>
                </div>
            </div>

            <div class="col-12 col-md-8">
                <div class="accordion">
                    <h1 class="py-2 my-3 text-center text-white text-uppercase bg-dark name_voting text-reset"
                        style="font-size: 27px;"> - </h1>
                    <div class="py-2 my-3 text-center text-white text-uppercase bg-dark name_voting2"
                        style="font-size: 16px;display:none;"> - </div>
                    <div class="py-2 my-3 text-center text-white text-uppercase bg-dark resume-document"
                        style="font-size: 16px;"> - </div>
                </div>

                <div class="voting-section">
                    <div class="col-lg-4 col-md-4 mb-3">
                        <div class="assemblyman_vote btn-primary" id="yes" onclick="voting(this)">
                            SIM
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-4 mb-3">
                        <div class="assemblyman_vote btn-warning" id="abstention" onclick="voting(this)">
                            ABSTER-SE
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-4 mb-3">
                        <div class="assemblyman_vote btn-danger" id="no" onclick="voting(this)">
                            NÃO
                        </div>
                    </div>
                </div>

                @shield('assemblyman.remote')
                    @if (!empty($meeting) && !empty($meeting->id) && Auth::check() && Auth::user()->get_assemblyman())
                        <div class="row mt-3">
                            <div class="col-12 text-center">
                                <a href="{{ route('assemblyman.remote', ['id' => Auth::user()->get_assemblyman(), 'meeting_id' => $meeting->id]) }}"
                                    target="_blank" rel="noopener noreferrer" class="btn btn-info btn-lg">
                                    Transmissão remota
                                </a>
                                <p class="mt-2 text-muted">
                                    Abre o painel da câmera e do microfone em uma nova aba.
                                </p>
                            </div>
                        </div>
                    @endif
                @endshield
            </div>
        </div>
    </div>

    <hr>

    </div>

    <div class="row mb-4">
        <button type="button" class="btn btn-default pull-right" onclick="javascript:history.go(-1)">
            VOLTAR
        </button>
    </div>

    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
    <script>
        window.panelVotingRuntime = {
            tenantId: @json($tenantId),
            socketServerUrl: @json($socketServerUrl)
        };

        window.panelVotingConnectSocket = function(options) {
            if (typeof io === 'undefined') {
                return null;
            }

            var settings = options || {};
            var tenantId = settings.tenantId || window.panelVotingRuntime.tenantId;
            var socketServerUrl = settings.socketServerUrl || window.panelVotingRuntime.socketServerUrl;

            if (!tenantId || !socketServerUrl) {
                return null;
            }

            var socket = io(socketServerUrl, {
                transports: ['websocket', 'polling'],
                reconnection: true,
                reconnectionAttempts: Infinity,
                reconnectionDelay: 1000,
                timeout: 5000
            });

            var subscribe = function() {
                socket.emit('subscribe', { tenant_id: tenantId });
            };

            socket.on('connect', subscribe);
            socket.on('reconnect', subscribe);
            socket.on('connect', function() {
                if (typeof settings.onConnect === 'function') {
                    settings.onConnect();
                }
            });
            socket.on('disconnect', function() {
                if (typeof settings.onDisconnect === 'function') {
                    settings.onDisconnect();
                }
            });
            socket.on('VotingPanelUpdated', function(eventData) {
                if (eventData && eventData.tenant_id && String(eventData.tenant_id) !== String(tenantId)) {
                    return;
                }

                if (typeof settings.onEvent === 'function') {
                    settings.onEvent(eventData || {});
                }
            });

            return socket;
        };
    </script>

    <script>
        var assemblyman_id = $('#assemblyman_id').val();
        var myInterval;
        var votingSocket = null;
        var socketConnected = false;

        var updateSummary = function() {
            var fullText = $('.name_voting2').text();
            var summary = fullText.substring(0, 100);

            if (fullText.length > 100) {
                summary += '... <span class="show-more" style="color:blue;cursor:pointer;">Ver mais</span>';
            }

            $('.resume-document').html(summary);
        };

        $(document).on('click', '.show-more', function() {
            var fullText = $('.name_voting2').text();
            $('.resume-document').html(fullText);
        });

        updateSummary();

        $(document).ready(function() {
            $('.assemblyman_vote').attr('disabled', true);
            $('.assemblyman_vote').css("pointer-events", "none");

            clear_painel();

            if (window.panelVotingRuntime.tenantId) {
                connectSocket();
            }
        });

        var connectSocket = function() {
            votingSocket = window.panelVotingConnectSocket({
                tenantId: window.panelVotingRuntime.tenantId,
                onConnect: function() {
                    socketConnected = true;
                    clearInterval(myInterval);
                },
                onDisconnect: function() {
                    socketConnected = false;
                    startFallbackPolling();
                },
                onEvent: function() {
                    var eventData = arguments[0] || {};
                    if (eventData.voting_data && eventData.voting_data.status) {
                        setData(eventData.voting_data);
                    } else {
                        getData();
                    }
                }
            });
        };

        var startFallbackPolling = function() {
            clearInterval(myInterval);
            myInterval = setInterval(function() {
                if (!socketConnected) {
                    getData();
                }
            }, 15000);
        };

        var clear_painel = function() {
            startFallbackPolling();
        };

        var voting_painel = function() {
            startFallbackPolling();
        };

        var getData = function() {
            $.ajax({
                url: `/painel-votacao-parlamentar/${assemblyman_id}/data`,
                method: "GET"
            }).success(function(response) {
                response = JSON.parse(response);

                if (response.status) {
                    setData(response);
                } else {
                    resetPainel();
                    clear_painel();
                }
            });
        };

        var setData = function(data) {

            if (Array.isArray(data.name) && data.name[0].length < 2) {
                $('.name_voting').html(data.name);
                $('.name_voting2').html('Sem registro');
            } else if (Array.isArray(data.name)) {
                $('.name_voting').html(data.name[0]);
                $('.name_voting2').html(data.name[1]);
            } else {
                $('.name_voting').html(data.name || '-');
                $('.name_voting2').html('Sem registro');
            }

            updateSummary();

            $('.session').html(data.meeting ? data.meeting.session : 'SESSÃO - ');
            $('.type').html(data.meeting ? data.meeting.type : 'TIPO - ');
            $('#assemblyman_voting').html(data.assemblyman.name);

            if (data.assemblyman.image) {
                $('#assemblyman_image').attr('src', data.assemblyman.image);
            } else {
                $('#assemblyman_image').attr('src', '/front/assets/img/sem-foto.jpg');
            }

            if (assemblyman_id == data.assemblyman.id) {
                $('.assemblyman_vote').attr('disabled', true);
                $('.assemblyman_vote').css("pointer-events", "none");
            } else {
                $('.assemblyman_vote').attr('disabled', false);
                $('.assemblyman_vote').css("pointer-events", "auto");
            }

            if (!data.active) {
                $('.assemblyman_vote').attr('disabled', true);
                $('.assemblyman_vote').css("pointer-events", "none");
            } else {
                if (assemblyman_id == data.assemblyman.id) {
                    $('.assemblyman_vote').attr('disabled', true);
                    $('.assemblyman_vote').css("pointer-events", "none");
                } else {
                    $('.assemblyman_vote').attr('disabled', false);
                    $('.assemblyman_vote').css("pointer-events", "auto");
                }
            }

            voting_painel();
        };

        var resetPainel = function() {
            $('.assemblyman_vote').attr('disabled', true);
            $('.assemblyman_vote').css("pointer-events", "none");
            $('.text_reset').html("-");
            $('.session').html('SESSÃO - ');
            $('.type').html('TIPO - ');
            $('#assemblyman_voting').html('PARLAMENTAR  - ');
            $('#assemblyman_image').attr('src', '/front/assets/img/sem-foto.jpg');
        };
    </script>

    <script>
        var voting = function(element) {
            var url = '/voting/assemblyman/computeVoting';

            var data = {
                votes: $(element).attr('id'),
                assemblyman_id: '{{ $id }}',
                _token: '{{ csrf_token() }}'
            };

            $.ajax({
                url: url,
                data: data,
                method: 'POST'
            }).success(function(data) {
                data = JSON.parse(data);
                if (data) {
                    toastr.success('Voto computado com sucesso!');
                    clear_painel();
                } else {
                    toastr.error('Falha ao computar voto!');
                }
            });
        };
    </script>
@endsection