@extends('layouts.meeting')

@section('content-meeting')
    <div class="container-fluid">
        {{-- para pegar o valor direto do input --}}
        <input type="hidden" name="meeting_id_toggle" id="meeting_id_toggle" value="{{ $meeting->id }}">
        <h2>ATA DA SESSÃO</h2>
        <div class="the-box rounded">
            <div class="col-md-8">
                <p><i class="fa fa-check-circle"></i> Tipo de Sessão: {!! $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="col-md-2" id="add-video-container">
                <button type="button" class="btn btn-info btn-rounded-lg" data-toggle="modal" data-target="#youtubeModal">
                    <i class="fa">&#xf16a;</i> VÍDEO
                </button>
            </div>

            <div class="col-md-2">
                <a href="/meeting/ata/{{ $meeting->id }}/pdf" target="_blank">
                    <button class="pull-right btn btn-info btn-rounded-lg">
                        <i class="fa fa-file-pdf-o"></i> GERAR PDF
                    </button>
                </a>
            </div>
            <div class="clearfix"></div>
        </div>

        {{-- Formulário da ata --}}
        <form action="/meetings/ata" method="post">
            {!! csrf_field() !!}
            <input type="hidden" name="meeting_id" value="{{ $meeting->id }}">
            <textarea name="ata" id="ata" class="ckeditor">{{ $meeting->ata }}</textarea>
            <h2>Justificar</h2>
            <textarea name="justify" id="justify" class="ckeditor">{{ $meeting->justify }}</textarea>

            <h3>Vídeos Adicionados</h3>
            <div class="video-thumbnails">
                @if ($meeting->videos && $meeting->videos->isNotEmpty())
                    @foreach ($meeting->videos as $video)
                        @if ($video->type_video == 1)
                            <div class="video-container" id="youtube-video-{{ $video->id }}">
                                <iframe width="100%" height="400"
                                    src="https://www.youtube.com/embed/{{ $video->url }}" frameborder="0"
                                    allowfullscreen></iframe>
                                <a href="#" class="btn btn-danger remove-video" data-id="{{ $video->id }}">
                                    Remover
                                </a>
                            </div>
                        @endif
                    @endforeach
                @endif
            </div>

            <hr class="hr">
            <button class="btn btn-success pull-right">
                <i class="fa fa-save"></i> Salvar
            </button>
        </form>
        <div class="clearfix"></div>
    </div>

    <div class="col-md-12 the-box rounded">
        <a href="/meetings">
            <button class="btn btn-default">Voltar</button>
        </a>
    </div>

    {{-- Modal para adicionar vídeo --}}
    <div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="youtubeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="youtubeModalLabel">Adicionar Vídeo</h4>
                    <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-ata">
                        {!! csrf_field() !!}
                        <input type="hidden" name="meeting_id" value="{{ $meeting->id }}">
                        <div class="form-group">
                            <label for="youtubeLinkInput">URL do Vídeo</label>
                            <input type="url" class="form-control" id="youtubeLinkInput" name="url"
                                placeholder="Insira o link do vídeo do YouTube" required>
                        </div>
                        <button type="submit" class="btn btn-info btn-rounded-lg">Salvar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal de Confirmação para Remover Vídeo --}}
    <div class="modal fade" id="confirmRemoveModal" tabindex="-1" role="dialog" aria-labelledby="confirmRemoveLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmRemoveLabel">Confirmar Remoção</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Tem certeza de que deseja remover este vídeo?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-danger" id="confirmRemoveBtn">Remover</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            let videoIdToRemove = null;

            // Função para carregar o vídeo ao iniciar a página
            reloadVideo();

            function reloadVideo() {
                var id = $('#meeting_id_toggle').val();
                let url = '/meetings/video/toggle/' + id;

                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function(result) {
                        let converted = JSON.parse(result);
                        if (converted.length) {
                            let videoId = converted[0].url.split('v=')[1] || converted[0].url.split('/')
                                .pop();

                            $('.video-thumbnails').append(`
                                <div class="video-container" id="youtube-video-${converted[0].meeting_id}">
                                    <iframe width="100%" height="400" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
                                    <a href="#" class="btn btn-danger remove-video" data-id="${converted[0].meeting_id}">
                                        Remover
                                    </a>
                                </div>
                            `.replace(/ID_PLACEHOLDER/g, converted[0].meeting_id));

                            $('#youtubeModal').modal('hide');
                            $('#youtubeLinkInput').val('');
                            $('#add-video-container').hide();
                        } else {
                            $('.video-thumbnails').append(`
                                <div class="video-container" id="youtube-video-error">
                                </div>`);
                        }
                    }
                });
            }

            // Função para adicionar o vídeo ao enviar o formulário
            $('#form-video-ata').submit(function(e) {
                e.preventDefault();
                var url = '{{ route('meeting.video.store') }}';
                var link = $('#youtubeLinkInput').val();

                if (link.includes('youtube.com') || link.includes('youtu.be')) {
                    let videoId = link.split('v=')[1] || link.split('/').pop();

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: $(this).serialize(),
                        success: function(result) {
                            $('.video-thumbnails').html('');

                            $('.video-thumbnails').append(`
                                <div class="video-container" id="youtube-video-${result.meeting_id}">
                                    <iframe width="100%" height="400" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
                                    <a href="#" class="btn btn-danger remove-video" data-id="${result.meeting_id}">
                                        Remover
                                    </a>
                                </div>
                            `.replace(/ID_PLACEHOLDER/g, result.meeting_id));

                            $('#youtubeModal').modal('hide');
                            $('#youtubeLinkInput').val('');
                            $('#add-video-container').hide();
                        },
                        error: 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.');
                }
            });

            //pega do modal
            $(document).on('click', '.remove-video', function(e) {
                e.preventDefault();
                videoIdToRemove = $(this).data('id');
                $('#confirmRemoveModal').modal('show');
                // console.log(this);
            });

            // Confirmação da remoção do vídeo
            $('#confirmRemoveBtn').on('click', function() {
                if (videoIdToRemove) {
                    $.ajax({
                        url: '/meetings/video/' + videoIdToRemove,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            $('#youtube-video-' + videoIdToRemove).remove();
                            $('#confirmRemoveModal').modal('hide');
                            toastr.success(response.success || 'Vídeo removido com sucesso.');
                        },
                        error: function(jqXHR) {
                            toastr.error(jqXHR.responseJSON?.error ||
                                'Erro ao remover o vídeo.');
                        }
                    });
                }
            });
        });
    </script>
@endsection