@extends('layouts.meeting')

@section('content-meeting')
    <style>
        .video-button {
            transition: background-color 0.3s;
            margin-left: auto;
            margin-right: 5px;
            white-space: nowrap;
            border-radius: 15px;
        }

        .video-button.has-video {
            background-color: rgb(210, 31, 31);
            color: white;
        }

        .video-button.no-video {
            background-color: rgb(22, 161, 22);
            color: white;
        }

        .remote-button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 8px;
            margin-right: 5px;
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            border: 0;
            transition: background-color 0.2s ease, opacity 0.2s ease;
        }

        .remote-button.is-remote {
            background-color: rgb(255, 171, 0);
            color: #fff;
        }

        .remote-button.is-not-remote {
            background-color: #dfe6ef;
            color: #526277;
        }

        .remote-button.is-disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .panel-title {
            display: flex;
            align-items: center;
            flex-grow: 1;
            font-size: 13px;
        }

        .panel-heading {
            display: flex;
            align-items: center;

        }

        .assemblyman-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            flex-grow: 1;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="">
        <h2>LISTA DE PRESENÇA</h2>

        <div class="the-box rounded">
            <div class="col-md-6">
                <p><i class="fa fa-check-circle"></i> {!! $meeting->SessionType->name !!}</p>
                <p><i class="fa fa-check-circle"></i> Sessão Nº: {!! $meeting->number !!}</p>
                <p><i class="fa fa-check-circle"></i> Data: {!! $meeting->date_start !!}</p>
            </div>

            <div class="container">
                @foreach ($cargo as $item)
                    @if ($item->currentResponsibility?->responsibility?->name === 'Presidente')
                        <div class="container-voting-president">
                            <label for="voting_active_checkbox_{{ $item->id }}">Presidente vota?</label>
                            <input id="voting_active_assemblyman" name="voting_active_assemblyman" onchange="votingTest()"
                                value="{{ $item->id }}" class="switch" data-on-text="Sim" data-off-text="Não"
                                data-off-color="danger" data-on-color="success" data-size="normal" type="checkbox"
                                {{ $item->voting_active > 0 ? 'checked' : '' }}>
                        </div>
                    @endif
                @endforeach
            </div>

            <div class="clearfix"></div>
            <hr>
            <div class="col-md-12">
                <div class="col-md-6">
                    <h4>VEREADORES</h4>
                </div>
                <div class="col-md-6">
                    <span class="pull-right">
                        <input type="checkbox" id="check_all" onclick="selectAll();"> SELECIONAR TODOS
                    </span>
                </div>
            </div>

            <form action="/meetings/presences/save" method="post">
                {!! Form::token() !!}
                <input type="hidden" name="meeting_id" value="{{ $meeting->id }}">
                <div class="col-md-12">
                    @foreach ($assemblyman as $item)
                        @php
                            $video = \App\Models\Video::where('meeting_id', $meeting->id)
                                ->where('assemblyman_id', $item->id)
                                ->first();
                            $presenceRecord = $item->meeting()->where('meeting_id', $meeting->id)->first();
                            $isPresent = (bool) $presenceRecord;
                            $isRemote = (bool) optional($presenceRecord?->pivot)->is_remote;
                        @endphp
                        <div class="col-sm-6">

                            <div class="panel panel-default panel-block-color">
                                <div class="panel-heading">
                                    <h3 class="panel-title mb-0 d-flex align-items-center">
                                        <input type="checkbox" class="all" name="assemblymen_id[]"
                                            value="{{ $item->id }}" @if ($isPresent) checked @endif
                                            style="margin-right:5px;">
                                        <strong class="assemblyman-name">{{ mb_strtoupper($item->preferred_name) }}</strong>
                                        <label class="remote-button {{ $isRemote ? 'is-remote' : 'is-not-remote' }} {{ !$isPresent ? 'is-disabled' : '' }}"
                                            for="remote_assemblyman_{{ $item->id }}" title="Marcar como participação remota">
                                            <input type="checkbox" id="remote_assemblyman_{{ $item->id }}"
                                                name="remote_assemblymen_id[]" value="{{ $item->id }}"
                                                @if ($isRemote) checked @endif
                                                @if (!$isPresent) disabled @endif
                                                style="display:none;">
                                            <i class="fa fa-video-camera"></i>
                                            <span>Remoto</span>
                                        </label>
                                        <button type="button"
                                            class="btn btn-xs video-button {{ $video ? 'has-video' : 'no-video' }}"
                                            data-assemblyman-id="{{ $item->id }}"
                                            onclick="{{ $video ? 'confirmRemoveVideo(' . $item->id . ');' : 'openModal(' . $item->id . ');' }}">
                                            <i class="fa">&#xf16a;</i> Vídeo
                                        </button>

                                    </h3>
                                </div>

                                <div class="panel-body">
                                    {{ $item->responsibility_assemblyman->last()?->responsibility?->name ?? '-' }}
                                    @if(\App\Services\ShalomProxyVotingService::enabled())
                                        <div style="margin-top:12px">
                                            <label for="proxy_{{ $item->id }}">Este parlamentar representa:</label>
                                            <select id="proxy_{{ $item->id }}" name="represents[{{ $item->id }}]" class="form-control">
                                                <option value="">Ninguém</option>
                                                @foreach($cargo as $represented)
                                                    @if($represented->id !== $item->id)
                                                        <option value="{{ $represented->id }}" {{ (int)($shalomProxies[$item->id] ?? 0) === (int)$represented->id ? 'selected' : '' }}>{{ mb_strtoupper($represented->preferred_name) }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            @if(empty($shalomProxies[$item->id]))
                                                <button type="button" class="btn btn-default btn-xs copy-voting-link" data-assemblyman-id="{{ $item->id }}" style="margin-top:7px"><i class="fa fa-copy"></i> Copiar link de voto</button>
                                            @else
                                                <small class="text-info" style="display:block;margin-top:7px">
                                                    {{ mb_strtoupper($item->preferred_name) }} receberá o link e seu voto também será registrado para o parlamentar selecionado.
                                                </small>
                                            @endif
                                        </div>
                                    @endif
                                    <div class="youtube-video" id="youtube-video-{{ $item->id }}"
                                        style="margin-top: 10px;">
                                        @if ($video && $video->meeting_id == $meeting->id)
                                            <iframe width="100%" height="200"
                                                src="{{ $video->youtube_embed_url }}" frameborder="0"
                                                allowfullscreen></iframe>
                                        @endif
                                    </div>
                                </div>

                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="clearfix"></div>
                <hr>
                <div class="col-md-12">
                    <button type="submit" class="btn btn-success pull-right">Salvar</button>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="youtubeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="youtubeModalLabel">Adicionar Link do YouTube</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-video-modal">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="assemblyman_id" id="assemblyman_id" value="">
                        <input type="hidden" name="meeting_id" value="{{ $meeting->id }}">
                        <input name="url" type="text" id="youtubeLinkInput" class="form-control"
                            placeholder="Insira o link do vídeo do YouTube">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary" form="form-video-modal">Adicionar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        @if(\App\Services\ShalomProxyVotingService::enabled())
        $(document).on('click', '.copy-voting-link', function() {
            var button = $(this);
            button.prop('disabled', true);
            $.get('/meetings/voting-link/' + button.data('assemblyman-id'))
                .done(function(response) {
                    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(response.url);
                    else { var input = $('<input>').val(response.url).appendTo('body').select(); document.execCommand('copy'); input.remove(); }
                    alert('Link individual copiado.');
                })
                .fail(function(xhr) { alert((xhr.responseJSON && xhr.responseJSON.message) || 'Não foi possível gerar o link.'); })
                .always(function() { button.prop('disabled', false); });
        });
        @endif

        function votingTest() {
            var assemblymanId = $('#voting_active_assemblyman').val();
            var votingActive = $('#voting_active_assemblyman').is(':checked') ? 1 : 0;

            $.ajax({
                type: 'POST',
                url: '/assemblymen/toggle/president/voting',
                data: {
                    id: assemblymanId,
                    voting_active: votingActive,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    location.reload();
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao atualizar votação:', error);
                }
            });
        }

        var currentAssemblymanId = null;

        function openModal(id) {
            currentAssemblymanId = id;
            $('#assemblyman_id').val(currentAssemblymanId);
            $('#youtubeModal').modal('show');
        }

        function confirmRemoveVideo(assemblymanId) {
            if (confirm('Deseja remover o vídeo associado a este vereador?')) {
                $.ajax({
                    url: '{{ route('meeting.video.destroyByAssemblyman', ':id') }}'.replace(':id',
                        assemblymanId),
                    method: 'DELETE',
                    data: {
                        meeting_id: '{{ $meeting->id }}',
                        _token: '{{ csrf_token() }}'
                    }
                }).done(function() {
                    toastr.success('Vídeo removido com sucesso!');
                    location.reload();
                    // Remove o iframe
                    //  $('#youtube-video-' + assemblymanId).find('iframe').remove();

                    // Atualiza o botão para refletir que não há vídeo
                    $('.video-button[data-assemblyman-id="' + assemblymanId + '"]')
                        .removeClass('has-video') // Remove a classe de vídeo
                        .addClass('no-video') // Adiciona a classe de sem vídeo
                        .attr('onclick', 'openModal(' + assemblymanId + ');'); // Retorna a ação de abrir o modal
                }).fail(function(jqXHR) {
                    var errorMessage = jqXHR.responseJSON?.error || 'Erro ao remover o vídeo. Tente novamente.';
                    toastr.error(errorMessage);
                });
            }
        }

        function syncRemoteToggle(assemblymanId) {
            const presenceCheckbox = $('input.all[value="' + assemblymanId + '"]');
            const remoteCheckbox = $('#remote_assemblyman_' + assemblymanId);
            const remoteButton = remoteCheckbox.closest('.remote-button');

            if (presenceCheckbox.is(':checked')) {
                remoteCheckbox.prop('disabled', false);
                remoteButton.removeClass('is-disabled');
            } else {
                remoteCheckbox.prop('checked', false);
                remoteCheckbox.prop('disabled', true);
                remoteButton.removeClass('is-remote').addClass('is-not-remote is-disabled');
            }

            if (remoteCheckbox.is(':checked')) {
                remoteButton.removeClass('is-not-remote').addClass('is-remote');
            } else if (presenceCheckbox.is(':checked')) {
                remoteButton.removeClass('is-remote').addClass('is-not-remote');
            }
        }




        $('#form-video-modal').submit(function(event) {
            event.preventDefault();

            var url = '{{ route('meeting.video.store') }}';
            var link = document.getElementById('youtubeLinkInput').value;

            if (link.includes('youtube.com') || link.includes('youtu.be')) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: $(this).serialize(),
                }).done(function(result) {
                    if (result.url) {
                        toastr.success('Vídeo salvo com sucesso!');
                        location.reload();

                        // Atualizar o iframe com o novo vídeo
                        $('#youtube-video-' + currentAssemblymanId).html(`
                    <iframe width="100%" height="200" src="${result.embed_url}" frameborder="0" allowfullscreen></iframe>
                `);

                        // Atualizar o botão específico do vereador atual
                        let button = $('.video-button[data-assemblyman-id="' + currentAssemblymanId + '"]');
                        button
                            .removeClass('no-video')
                            .addClass('has-video')
                            .attr('onclick', 'confirmRemoveVideo(' + currentAssemblymanId +
                                ');'); // Alterar a função onclick para remoção
                    } else {
                        toastr.error('Não foi possível salvar o vídeo.');
                    }
                    $('#youtubeModal').modal('hide'); // Fechar o modal
                }).fail(function(jqXHR) {
                    var errorMessage = jqXHR.responseJSON?.error || 'Ocorreu um erro ao salvar o vídeo.';
                    toastr.error(errorMessage);
                });
            } else {
                toastr.error('Por favor, insira um link válido do YouTube.');
            }
        });

        $(document).on('change', 'input.all', function() {
            const assemblymanId = $(this).val();

            if ($(this).is(':checked')) {
                $('#remote_assemblyman_' + assemblymanId).prop('disabled', false);
                $('#remote_assemblyman_' + assemblymanId).closest('.remote-button').removeClass('is-disabled');
            } else {
                $('#remote_assemblyman_' + assemblymanId).prop('checked', false).prop('disabled', true);
                $('#remote_assemblyman_' + assemblymanId).closest('.remote-button')
                    .removeClass('is-remote')
                    .addClass('is-not-remote is-disabled');
            }
        });

        $(document).on('change', 'input[id^="remote_assemblyman_"]', function() {
            const assemblymanId = $(this).val();
            const remoteButton = $(this).closest('.remote-button');

            if ($(this).is(':checked')) {
                remoteButton.removeClass('is-not-remote is-disabled').addClass('is-remote');
                $('input.all[value="' + assemblymanId + '"]').prop('checked', true);
                $(this).prop('disabled', false);
            } else {
                remoteButton.removeClass('is-remote').addClass('is-not-remote');
            }
        });

        $(document).ready(function() {
            $('input.all').each(function() {
                syncRemoteToggle($(this).val());
            });
        });

        var selectAll = function() {
            $('.all').prop('checked', $('#check_all').is(":checked"));
            $('input.all').each(function() {
                syncRemoteToggle($(this).val());
            });
        }
    </script>
@endsection