@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;
        }

        .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>

    <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="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('assemblyman_id', $item->id)->first();
                        @endphp
                        <div class="col-sm-4">
                            <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 ($item->meeting()->where('meeting_id', $meeting->id)->first()) checked @endif
                                            style="margin-right:5px;">
                                        <strong class="assemblyman-name">{{ mb_strtoupper($item->short_name) }}</strong>
                                        <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 }}
                                    <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="https://www.youtube.com/embed/{{ $video->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>
        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: {
                        _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);
                });
            }
        }




        $('#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="https://www.youtube.com/embed/${result.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(' + result.id +
                                ');'); // 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.');
            }
        });
        var selectAll = function() {
            $('.all').prop('checked', $('#check_all').is(":checked"));
        }
    </script>
@endsection