@extends('layouts.digitar')
    @section('Breadcrumbs')
        {!! Breadcrumbs::render('documents.show') !!}
    @endsection
    @section('content')
        @php
            $standaloneLegalOption = isset($document)
                ? $document->advices->first(function ($advice) {
                    return empty($advice->to_id) && $advice->hasLegalOpinion();
                })
                : null;
            $hasStandaloneLegalOption = !empty($standaloneLegalOption);
        @endphp
        <div class="the-box rounded">
            <div class="form-group">
                <a href="{!! route('documents.index') !!}" class="btn btn-default">Voltar</a>
            </div>
            @if (isset($document))
                <div class="the-box rounded">
                    <div class="form-group col-sm-12">
                        <div class="panel panel-square panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    <i class="fa fa-angle-double-right" style="margin-right: 5px"></i>PEDIDO DE PARECERES
                                </h3>
                                <div class="right-content">
                                    <div class="panel-action-buttons">
                                        <button type="button" class="btn btn-default btn-xs"
                                            @if (!$hasStandaloneLegalOption) onclick="openStandaloneLegalOptionModal()" @else disabled title="Parecer jurídico sem comissão já informado" @endif>
                                            <i class="fa fa-gavel" style="margin-right: 5px"></i>ADICIONAR PARECER JURÍDICO
                                        </button>
                                        <button type="button" class="btn btn-default btn-xs"
                                            onclick="openLegalAdviceModal()">
                                            <i class="fa fa-plus" style="margin-right: 5px"></i>SOLICITAR A COMISSÃO
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body">
                                @if ($standaloneLegalOption)
                                    <div class="standalone-legal-option-box">
                                        <div class="standalone-legal-option-box__header">
                                            <strong>Parecer jurídico cadastrado</strong>
                                            <button type="button" class="btn btn-info btn-xs edit-advice-btn"
                                                data-id="{{ $standaloneLegalOption->id }}">
                                                <i class="fa fa-pencil" style="margin-right: 5px"></i>EDITAR PARECER
                                            </button>
                                        </div>
                                        <div class="standalone-legal-option-box__content">
                                            {!! $standaloneLegalOption->legal_option !!}
                                        </div>
                                    </div>
                                @endif
                                @include('documents.tramites_table')
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="standaloneLegalOptionModal" tabindex="-1" role="dialog"
                        aria-labelledby="standaloneLegalOptionLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <h4 class="modal-title" id="standaloneLegalOptionLabel">PARECER JURÍDICO</h4>
                                    <p>Documento: {!! $document->number . '/' . $document->getYear($document->date) !!}</p>
                                </div>
                                <div class="modal-body">
                                    <label style="width: 100%;" for="standaloneDocumentLegalOption">
                                        Parecer jurídico:
                                        <div id="standalone-legal-option-container"></div>
                                    </label>
                                    <div class="alert alert-info" style="margin-top: 15px;">
                                        Este parecer é independente das comissões. O documento ainda pode receber pareceres jurídicos vinculados às comissões normalmente.
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                        Fechar
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                        onclick="storeStandaloneLegalOption({{ $document->id }})">
                                        SALVAR PARECER
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="editDocumentAdviceModal" tabindex="-1" role="dialog"
                        aria-labelledby="editDocumentAdviceLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <h4 class="modal-title" id="editDocumentAdviceLabel">SOLICITAÇÃO PARA COMISSÃO</h4>
                                    <p>Documento: {!! $document->number . '/' . $document->getYear($document->date) !!}</p>
                                </div>
                                <div class="modal-body">
                                    <label style="width: 100%" for="comissaoEditSelect">
                                        Selecione a comissão:
                                    </label>
                                    <select style="width: 100%" class="form-control js-example-basic-multiple"
                                        id="comissaoEditSelect" name="comission" multiple="multiple">
                                        @foreach (\App\Models\Commission::active()->get() as $comission)
                                            <option value="c{{ $comission->id }}">{{ $comission->name }}</option>
                                        @endforeach
                                    </select>
                                    <label style="margin-top: 15px; width: 100%;">
                                        Descrição da solicitação para a comissão:
                                        <div id="commission-description-container"></div>
                                    </label>
                                    <div class="alert alert-info" style="margin-top: 15px;">
                                        O parecer juridico deve ser preenchido depois, no icone especifico da linha do parecer.
                                    </div>
                                    <div class="mb-3">
                                        <label for="dataFinalEditInput" class="form-label">Data Final</label>
                                        <input type="date" class="form-control" id="dataFinalEditInput" name="date_end"
                                            required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="diasEditInput" class="form-label">Dias</label>
                                        <input type="number" class="form-control" id="diasEditInput" name="days"
                                            disabled>
                                    </div>
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                        Fechar
                                    </button>
                                    <button type="button" class="btn btn-primary"
                                        onclick="editDocumentAdvice({{ $document->id }})">
                                        SOLICITAR
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            @endif
        </div>
        <script>
            let commissionDescriptionEditor = null;
            let standaloneLegalOptionEditor = null;

            // Função para formatar a data e hora no formato DD/MM/YYYY HH:MM
            const formatDateTime = (date) => {
                const day = String(date.getDate()).padStart(2, '0');
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const year = date.getFullYear();
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                return `${day}/${month}/${year} ${hours}:${minutes}`;
            };

            // Função para formatar a data de YYYY-MM-DD para DD/MM/YYYY
            const formatDate = (dateString) => {
                if (!dateString) return '';
                const [year, month, day] = dateString.split('-');
                return `${day}/${month}/${year}`;
            };

            $(document).ready(function() {
                // Inicializa o Select2 para seleção múltipla
                $('.js-example-basic-multiple').select2({
                    placeholder: "Selecione as comissões",
                    allowClear: true
                });

                // Funções de formatação de data e envio de dados
                window.editDocumentAdvice = function(document_id) {
                    const url = "/advice/create";

                    const selectedOptions = $('#comissaoEditSelect').val();
                    if (!selectedOptions || selectedOptions.length === 0) {
                        toastr.error("Por favor, selecione ao menos uma comissão.");
                        return;
                    }

                    const to_id = selectedOptions.map(val => val.substr(1));
                    const type = selectedOptions.map(val => val.substr(0, 1));

                    let descriptionValue = '';
                    if (commissionDescriptionEditor) {
                        descriptionValue = commissionDescriptionEditor.getData();
                    } else {
                        descriptionValue = $("#documentCommissionDescriptionModal").val();
                    }

                    const dateEnd = $('#dataFinalEditInput').val();
                    const csrfToken = $('input[name="_token"]').val();

                    const now = new Date();
                    const formattedDateTime = formatDateTime(now);

                    let formattedDateEnd = formatDate(dateEnd);

                    const data = {
                        _token: csrfToken,
                        date: formattedDateTime,
                        document_id: document_id,
                        to_id: to_id,
                        type: type,
                        description: descriptionValue,
                        date_end: formattedDateEnd,
                    };

                    console.log("Enviando dados:", data);

                    $.ajax({
                        url: url,
                        data: data,
                        method: 'POST',
                        dataType: 'json',
                        success: (response) => {
                            if (response.success) {
                                toastr.success(response.message || "Pedido salvo com sucesso!");
                                window.location.reload();
                            } else {
                                toastr.error(response.message || "Erro ao salvar pedido!");
                            }
                        },
                        error: (xhr) => {
                            console.error("Erro na requisição:", xhr.responseText);
                            toastr.error("Erro na requisição! Verifique os dados.");
                        }
                    });
                };

                // Adiciona um listener para calcular os dias quando a data final mudar
                $('#dataFinalEditInput').on('change', function() {
                    const startDate = new Date();
                    const endDate = new Date($(this).val());
                    if (endDate) {
                        const timeDifference = endDate.getTime() - startDate.getTime();
                        const dayDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
                        $('#diasEditInput').val(dayDifference >= 0 ? dayDifference : '');
                    } else {
                        $('#diasEditInput').val('');
                    }
                });
            });

            window.openStandaloneLegalOptionModal = function() {
                $('#standalone-legal-option-container').empty();

                const textareaElement = $(
                    '<textarea name="legal_option" id="standaloneDocumentLegalOption" class="form-control"></textarea>'
                );
                $('#standalone-legal-option-container').append(textareaElement);

                if (typeof CKEDITOR === 'undefined') {
                    const ckeditorScript = document.createElement('script');
                    ckeditorScript.src = "https://cdn.ckeditor.com/4.20.1/full/ckeditor.js";
                    ckeditorScript.onload = () => {
                        standaloneLegalOptionEditor = CKEDITOR.replace('standaloneDocumentLegalOption', {
                            height: 220,
                            removePlugins: 'exportpdf,elementspath,resize',
                            allowedContent: true
                        });
                    };
                    document.head.appendChild(ckeditorScript);
                } else {
                    standaloneLegalOptionEditor = CKEDITOR.replace('standaloneDocumentLegalOption', {
                        height: 220,
                        removePlugins: 'exportpdf,elementspath,resize',
                        allowedContent: true
                    });
                }

                $('#standaloneLegalOptionModal').modal('show');
            };

            window.storeStandaloneLegalOption = function(document_id) {
                let legalOptionValue = '';

                if (standaloneLegalOptionEditor) {
                    legalOptionValue = standaloneLegalOptionEditor.getData();
                } else {
                    legalOptionValue = $("#standaloneDocumentLegalOption").val();
                }

                if (!legalOptionValue.replace(/<[^>]*>/g, '').trim()) {
                    toastr.error("Informe o parecer jurídico antes de salvar.");
                    return;
                }

                $.ajax({
                    url: "/advice/create",
                    data: {
                        _token: '{{ csrf_token() }}',
                        date: formatDateTime(new Date()),
                        document_id: document_id,
                        type: 'j',
                        legal_option: legalOptionValue,
                        date_end: null,
                    },
                    method: 'POST',
                    dataType: 'json',
                    success: (response) => {
                        if (response.success) {
                            toastr.success(response.message || "Parecer jurídico salvo com sucesso!");
                            window.location.reload();
                        } else {
                            toastr.error(response.message || "Erro ao salvar parecer jurídico!");
                        }
                    },
                    error: (xhr) => {
                        console.error("Erro na requisição:", xhr.responseText);
                        toastr.error("Erro na requisição! Verifique os dados.");
                    }
                });
            };

            // Função customizada para abrir o modal e inicializar o CKEditor
            window.openLegalAdviceModal = function() {
                $('#commission-description-container').empty();

                const textareaElement = $(
                    '<textarea name="description_modal" id="documentCommissionDescriptionModal" class="form-control"></textarea>'
                );
                $('#commission-description-container').append(textareaElement);

                if (typeof CKEDITOR === 'undefined') {
                    const ckeditorScript = document.createElement('script');
                    ckeditorScript.src = "https://cdn.ckeditor.com/4.20.1/full/ckeditor.js";
                    ckeditorScript.onload = () => {
                        commissionDescriptionEditor = CKEDITOR.replace('documentCommissionDescriptionModal', {
                            height: 160,
                            removePlugins: 'exportpdf,elementspath,resize',
                            allowedContent: true
                        });
                    };
                    document.head.appendChild(ckeditorScript);
                } else {
                    commissionDescriptionEditor = CKEDITOR.replace('documentCommissionDescriptionModal', {
                        height: 160,
                        removePlugins: 'exportpdf,elementspath,resize',
                        allowedContent: true
                    });
                }

                $('#editDocumentAdviceModal').modal('show');
            };

            $('#editDocumentAdviceModal').on('hidden.bs.modal', function() {
                if (commissionDescriptionEditor) {
                    commissionDescriptionEditor.destroy();
                    commissionDescriptionEditor = null;
                }
                $('#commission-description-container').empty();
            });

            $('#standaloneLegalOptionModal').on('hidden.bs.modal', function() {
                if (standaloneLegalOptionEditor) {
                    standaloneLegalOptionEditor.destroy();
                    standaloneLegalOptionEditor = null;
                }
                $('#standalone-legal-option-container').empty();
            });
        </script>
        <style>
            .panel-action-buttons {
                display: flex;
                gap: 6px;
                align-items: center;
            }

            .standalone-legal-option-box {
                border: 1px solid #d8dde6;
                border-radius: 4px;
                background: #fff;
                margin-bottom: 15px;
            }

            .standalone-legal-option-box__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                padding: 10px 12px;
                border-bottom: 1px solid #e7eaf0;
                background: #f7f9fc;
            }

            .standalone-legal-option-box__content {
                padding: 12px;
                max-height: 260px;
                overflow: auto;
            }
        </style>
    @endsection