@extends('layouts.meeting')

@section('content-meeting')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <link href="/assets/plugins/chosen/chosen.min.css" rel="stylesheet">

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

            @php
                $type = $type ?? 'ata';
                $signer = \App\Models\SignatureSigners::where('id_document', $meeting->id)
                    ->where('document_type', '!=', 'pauta')
                    ->first();

                $checkStatus = null;
                if ($signer) {
                    $checkStatus = $signer->status === 'SIGNED' ? 'SIGNED' : 'PENDING';
                }
            @endphp

            <div class="col-md-12 text-right">
                @if ($checkStatus === 'PENDING')
                    <div class="d-flex align-items-center gap-2">
                        <span class="btn btn-warning btn-sm">
                            <i class="fas fa-hourglass-half"></i> Aguardando assinaturas
                        </span>
                        <button type="button" class="btn btn-danger btn-sm"
                            onclick="window.location.href='{{ url('/document/start/signature/delete/' . $meeting->id) }}'">
                            Cancelar pedido de assinatura
                        </button>
                    </div>
                @elseif($checkStatus === 'SIGNED')
                    <span class="badge badge-success p-2">
                        <i class="fas fa-check"></i> Documento assinado
                    </span>
                    <a href="{!! route('signature.pdf.download', [$meeting->id, $type]) !!}" target="_blank" class="badge badge-danger p-2 icon-btn shadow-sm"
                        title="Download">
                        <i class="fas fa-download"> Download </i>
                    </a>
                @else
                    <button type="button" class="btn btn-success btn-rounded-lg" data-toggle="modal"
                        data-target="#modalSignature">
                        <i class="fas fa-pen-alt"></i> ASSINAR
                    </button>
                @endif
            </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 Signature Lot-->
    <div class="modal fade" id="modalSignature" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <img src="{{ asset('assets/images/assinatura-digital-image.png') }}" style="width: 100px;">
                    <h5 class="modal-title" id="lot-modal-title">Configurações de Assinatura</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form>
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="hidden" name="meeting_id" value="{{ $meeting->id }}" />
                                <input type="hidden" name="type" value="ata" />

                                <!-- Parlamentares Assinando -->
                                <div class="form-group">
                                    <label for="assemblymen" class="d-block">
                                        <i class="fa fa-user-plus"></i> Parlamentares Assinando
                                    </label>
                                    {!! Form::select('assemblymensList[]', $assemblymensList, null, [
                                        'class' => 'form-control assemblymenChosen',
                                        'id' => 'multiple-select-clear-field',
                                        'multiple' => true,
                                        'style' => 'width: 100%;',
                                        'data-placeholder' => 'Selecione o parlamentar...',
                                    ]) !!}
                                </div>

                                <!-- Modo de Assinatura -->
                                <div class="form-group">
                                    {!! Form::label('module', 'Modo de assinatura', ['class' => 'required']) !!}
                                    {!! Form::select(
                                        'module',
                                        [
                                            'SIMPLE' => 'Simples',
                                            'ADVANCED' => 'Avançada',
                                            'QUALIFIED' => 'Qualificada',
                                        ],
                                        null,
                                        [
                                            'class' => 'form-control',
                                            'id' => 'select-state',
                                        ],
                                    ) !!}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button id="btnAssinar" class="btn btn-success">
                            <i class="fas fa-pen-alt"></i> ASSINAR
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </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="{!! asset('chosen_v1.8.7/chosen.jquery.js') !!}" type="text/javascript"></script>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $('#btnAssinar').on('click', function(e) {
            e.preventDefault();

            let meeting_id = $("input[name='meeting_id']").val();
            let type = $("input[name='type']").val();
            let module = $("#select-state").val();
            let assemblymensList = $("#multiple-select-clear-field").val();

            Swal.fire({
                title: 'Enviando assinatura...',
                text: 'Aguarde enquanto processamos o documento.',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: "{{ route('meetings.signature') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    meeting_id: meeting_id,
                    type: type,
                    module: module,
                    assemblymensList: assemblymensList
                },
                success: function(res) {
                    Swal.close();
                    if (res.success) {
                        Swal.fire('Sucesso!', res.message, 'success').then(() => {
                            window.location.href = res.redirect;
                        });
                    } else {
                        Swal.fire('Erro', res.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    Swal.fire('Erro', xhr.responseJSON?.message || 'Erro inesperado.', 'error');
                }
            });
        });
    </script>

    <script>
        $(".assemblymenChosen").chosen({
            disable_search_threshold: 10,
            no_results_text: "Oops, nothing found!",
            width: "95%"
        });
    </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