@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('lawsProjects.show') !!}
@endsection
@section('content')
    <div class="the-box rounded">
        <div class="form-group">
            <a href="{!! route('lawsProjects.index') !!}" class="btn btn-default">Voltar</a>
        </div>

        @if (isset($lawsProject))
            @if (isset($lawsProject->id) && $tramitacao)
                <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"></i> TRAMITAÇÃO</h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group col-sm-3">
                                {!! Form::label('new_advice_situation_id', 'Situação do projeto:') !!}
                                {!! Form::select('new_advice_situation_id', $advice_situation_law, null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group col-sm-3">
                                {!! Form::label('new_status_processing_law_id', 'Status do trâmite:') !!}
                                {!! Form::select('new_status_processing_law_id', $status_processing_law, null, ['class' => 'form-control']) !!}
                            </div>

                            @if (Auth::user()->roleHasPermission('dateAdvicesLawsProjects.edit'))
                                <div class="form-group col-sm-2">
                                    {!! Form::label('new_date_processing', 'Data:') !!}
                                    {!! Form::text('new_date_processing', null, ['class' => 'form-control datetimepicker1']) !!}
                                </div>
                            @else
                                <div class="form-group col-sm-2">
                                    {!! Form::label('new_date_processing', 'Data:') !!}
                                    {!! Form::text('new_date_processing', null, ['class' => 'form-control datetimepicker1', 'disabled']) !!}
                                </div>
                            @endif

                            <div class="form-group col-sm-2">
                                {!! Form::label('destination_id', 'Destinatários:') !!}
                                {!! Form::select('destination_id', $destinations, null, ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group col-sm-1">
                                {!! Form::label('date_end', 'Prazo:') !!}
                                {!! Form::text('date_end', null, ['class' => 'form-control datepicker']) !!}
                            </div>

                            <div class="form-group col-sm-1">
                                {!! Form::label('days', 'Dias:') !!}
                                {!! Form::number('days', null, ['class' => 'form-control', 'disabled']) !!}
                            </div>

                            <div class="form-group col-sm-12">
                                {!! Form::label('new_observation', ' Observações:') !!}
                                {!! Form::textarea('new_observation', null, ['class' => 'form-control ckeditor']) !!}
                            </div>

                            <div class="form-group col-sm-12">
                                {!! Form::label('processing_file', 'Anexar Arquivo:') !!}
                                {!! Form::file('processing_file', ['class' => 'form-control']) !!}
                            </div>

                            <div class="form-group col-sm-12">
                                <button class="btn btn-info pull-right" type="button" onclick="save_processing()">
                                    Salvar
                                </button>
                            </div>
                            <div class="col-md-12">
                                <div class="timeline">
                                    @forelse($processing_last as $key => $processing)
                                        <div class="timeline-item">
                                            <div class="timeline-badge">
                                                <i class="fa fa-check-circle"></i>
                                            </div>
                                            <div class="timeline-panel">
                                                <div class="timeline-heading">
                                                    <h4 class="timeline-title">
                                                        {{ $processing->adviceSituationLaw->name }}
                                                    </h4>
                                                    <p>
                                                        <small class="text-muted">
                                                            <i class="fa fa-clock-o"></i>
                                                            {{ $processing->processing_date }}
                                                        </small>
                                                    </p>
                                                </div>
                                                <div class="timeline-body">
                                                    <p><strong>Status:</strong>
                                                        {{ $processing->statusProcessingLaw->name ?? '' }}</p>
                                                    <p><strong>Destinatário:</strong>
                                                        {{ $processing->destination->name ?? '' }}
                                                    </p>
                                                    <p><strong>Prazo:</strong>
                                                        {{ $processing->date_end ?? 'Prazo não definido' }}</p>
                                                    <p>
                                                        <strong>Observação:</strong> {!! \Illuminate\Support\Str::limit($processing->obsevation, 150, '...') !!}
                                                    </p>
                                                    <p>
                                                        <strong>Anexo:</strong>
                                                        @if (isset($processing->processing_file))
                                                            <a
                                                                href="{{ asset('/assets/anexo_tramite_laws/' . $processing->processing_file) }}">
                                                                <button class="btn btn-primary">Download</button>
                                                            </a>
                                                        @else
                                                            <p>Nenhum anexo</p>
                                                        @endif
                                                    </p>
                                                    <div class="timeline-actions mt-2">
                                                        @if (Auth::user()->id === $processing->owner_id ||
                                                                $processing->id === $first_processing->id ||
                                                                Auth::user()->hasRole('root'))
                                                            <button type="button" class="btn btn-danger btn-sm"
                                                                onclick="delete_processing('{{ $processing->id }}')">
                                                                <i class="fa fa-trash"></i>
                                                            </button>
                                                            @if ($_SERVER['HTTP_HOST'] == 'cmcostarica.sis.superlegis.com.br' || $_SERVER['HTTP_HOST'] == 'dev.localhost:8000')
                                                                <button type="button" class="btn btn-primary btn-sm"
                                                                    onclick="openModalDate('{{ $processing->id }}', '{{ $processing->processing_date }}','{{ $processing->advice_situation_id }}')">
                                                                    <i class="fa fa-edit"></i>
                                                                </button>
                                                            @endif
                                                            <div class="modal fade" id="exampleModal" tabindex="-1"
                                                                aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                                <div class="modal-dialog">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h3 class="modal-title" id="exampleModalLabel">
                                                                                Alterar data da tramitação</h3>
                                                                            <button type="button" class="close"
                                                                                data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <form>
                                                                                <div id="container-alert">
                                                                                </div>
                                                                                <div class="form-group">
                                                                                    <label for="recipient-name"
                                                                                        class="col-form-label">Data:</label>
                                                                                    <input type="hidden" id="idProcessing">
                                                                                    <input type="hidden" id="idSituation">
                                                                                    <input type="text"
                                                                                        class="form-control"
                                                                                        id="dataModal" />
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary"
                                                                                data-dismiss="modal">Cancelar</button>
                                                                            <button type="button" class="btn btn-primary"
                                                                                onclick="updateTramite()">Salvar</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="text-center">
                                            <strong>Não existe tramitação</strong>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <style>
                /* Estilo para a linha do tempo */
                .timeline {
                    position: relative;
                    padding: 20px 0;
                    list-style: none;
                }

                /* Linha vertical centralizada */
                .timeline::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 50%;
                    width: 3px;
                    background-color: #eee;
                    transform: translateX(-50%);
                }

                .timeline-item {
                    margin-bottom: 20px;
                    position: relative;
                    /* Usa flexbox para alinhamento horizontal */
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }

                /* Marcação da linha do tempo */
                .timeline-badge {
                    color: #fff;
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 1.2em;
                    text-align: center;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 100;
                    border-radius: 50%;
                    background: #337ab7;
                    /* Cor do marcador */
                    /* Garante que o badge não afete o layout flexbox */
                    flex-shrink: 0;
                }

                /* Painel do conteúdo */
                .timeline-panel {
                    position: relative;
                    width: 45%;
                    /* Reduz a largura para caber os dois lados */
                    padding: 20px;
                    background-color: #fff;
                    border: 1px solid #d4d4d4;
                    border-radius: 2px;
                    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
                }

                /* Seta do painel para a linha */
                .timeline-panel::before {
                    content: ' ';
                    position: absolute;
                    top: 26px;
                    left: -15px;
                    /* Seta para a esquerda */
                    display: inline-block;
                    border-top: 15px solid transparent;
                    border-right: 15px solid #d4d4d4;
                    border-left: 0 solid #d4d4d4;
                    border-bottom: 15px solid transparent;
                }

                .timeline-panel::after {
                    content: ' ';
                    position: absolute;
                    top: 27px;
                    left: -14px;
                    /* Seta para a esquerda */
                    display: inline-block;
                    border-top: 14px solid transparent;
                    border-right: 14px solid #fff;
                    border-left: 0 solid #fff;
                    border-bottom: 14px solid transparent;
                }

                /* Lógica para alinhar os itens alternadamente */
                .timeline-item:nth-child(even) {
                    justify-content: flex-start;
                }

                .timeline-item:nth-child(even) .timeline-panel {
                    float: left;
                    /* Inverte a posição da seta para a direita */
                }

                .timeline-item:nth-child(even) .timeline-panel::before {
                    border-left: 15px solid #d4d4d4;
                    border-right: 0;
                    left: auto;
                    right: -15px;
                }

                .timeline-item:nth-child(even) .timeline-panel::after {
                    border-left: 14px solid #fff;
                    border-right: 0;
                    left: auto;
                    right: -14px;
                }

                /* Título do painel */
                .timeline-heading h4 {
                    margin-top: 0;
                    font-weight: bold;
                    color: #555;
                }

                /* Estilos de responsividade para telas menores */
                @media (max-width: 767px) {
                    .timeline::before {
                        left: 50%;
                        transform: translateX(-50%);
                    }

                    .timeline-item,
                    .timeline-item:nth-child(even) {
                        flex-direction: column;
                        align-items: center;
                        margin-bottom: 30px;
                    }

                    .timeline-badge {
                        position: relative;
                        left: auto;
                        top: auto;
                        margin-bottom: 10px;
                        transform: none;
                    }

                    .timeline-panel,
                    .timeline-item:nth-child(even) .timeline-panel {
                        width: 100%;
                        float: none;
                    }

                    /* Ajuste da seta em telas pequenas */
                    .timeline-panel::before,
                    .timeline-panel::after,
                    .timeline-item:nth-child(even) .timeline-panel::before,
                    .timeline-item:nth-child(even) .timeline-panel::after {
                        left: 50%;
                        transform: translateX(-50%);
                        border-right: none;
                        border-left: 15px solid transparent;
                        border-top: 0;
                        border-bottom: 15px solid #d4d4d4;
                        top: -15px;
                    }

                    .timeline-panel::after,
                    .timeline-item:nth-child(even) .timeline-panel::after {
                        border-bottom: 14px solid #fff;
                        top: -14px;
                    }
                }
            </style>
            <script>
                document.querySelector('#new_date_processing').value = dateForm + ' ' + timeForm

                const diffDate = () => {
                    const array_date = $('#new_date_processing').val().split(' ')
                    const date_first_split = array_date[0].split('/').reverse().join('/')
                    const date_last_split = $('#date_end').val().split('/').reverse().join('/')

                    let day1 = new Date(date_last_split);
                    let day2 = new Date(date_first_split);

                    return Math.abs(day1 - day2) / (1000 * 3600 * 24);
                }

                $('#date_end').on('change', () => {
                    document.querySelector('#days').value = diffDate()
                })

                $('#destination_id').on('change', () => {
                    console.log(diffDate());
                    document.querySelector('#days').value = diffDate()
                })

                $(document).ready(function() {
                    setTimeout(function() {
                        $('#comissao').addClass('chosen-select')
                    }, 500);
                });

                var addChosen = function() {

                    $('#comissao').addClass('chosen-select')

                };

                var newAdvice = function(project_id) {
                    var url = "/advice/create";
                    var laws_projects_id = project_id;
                    var to_id = [];
                    var type = [];
                    var label = [];

                    $('#comissao :selected').each(function(i, sel) {
                        to_id[i] = $(sel).val().substr(1);
                        type[i] = $(sel).val().substr(0, 1);
                        label[i] = $(sel).text();
                    });

                    const data = {
                        laws_projects_id: laws_projects_id,
                        document_id: 0,
                        to_id: to_id,
                        type: type,
                        description: CKEDITOR.instances['comissionDescriprion'].getData(),
                        legal_option: CKEDITOR.instances['legalOption'].getData(),
                        date_end: $('#date_end').val(),
                    }

                    if (to_id.length > 0) {

                        $.ajax({
                            url: url,
                            method: 'POST',
                            data: data
                        }).success(function(data) {
                            data = JSON.parse(data);

                            if (data) {
                                toastr.success("Pedido salvo com sucesso!!");
                            } else {
                                toastr.error("Erro ao salvar pedido!!");
                            }

                        })
                    } else {
                        toastr.error('Selecione um destino!');
                    }
                }

                function dataAtualFormatada(data) {
                    var dia = data.getDate();
                    if (dia.toString().length == 1)
                        dia = "0" + dia;
                    var mes = data.getMonth() + 1;
                    if (mes.toString().length == 1)
                        mes = "0" + mes;
                    var ano = data.getFullYear();
                    return dia + "/" + mes + "/" + ano;
                }
            </script>
        @endif
        <div class="clearfix">

        </div>
    </div>

    <script>
        // As variáveis de data e a lógica de autopreenchimento continuam as mesmas.
        if ({{ Auth::user()->can_request_secretary }}) {
            $('body').on('change', '#destination_id', () => {
                if ($('#destination_id').val() === '4') {
                    document.querySelector('#date_end').value = someDateForm
                    document.querySelector('#days').value = diffDate()
                } else if ($('#destination_id').val() === '6') {
                    document.querySelector('#date_end').value = someDateTwentyForm
                    document.querySelector('#days').value = diffDate()
                } else {
                    document.querySelector('#date_end').value = ''
                    document.querySelector('#days').value = diffDate()
                }
            });
        }

        const save_processing = () => {
            const url = '{{ route('processings.store') }}';

            if ($('#new_advice_situation_id').val() === '') {
                toastr.error('Selecione a situação da tramitação!');
            } else if ($('#new_status_processing_law_id').val() === '') {
                toastr.error('Selecione um status para tramitação!');
            } else if ($('#new_date_processing').val() === '') {
                toastr.error('Selecione uma data para tramitação!');
            } else {
                // Criamos um novo objeto FormData
                const data = new FormData();

                // Adicionamos todos os campos ao FormData
                data.append('law_projects_id', '{{ $lawsProject->id }}');
                data.append('advice_publication_id', $('#new_advice_publication_id').val() ||
                    ''); // Usamos || '' para evitar undefined
                data.append('advice_situation_id', $('#new_advice_situation_id').val() || '');
                data.append('status_processing_law_id', $('#new_status_processing_law_id').val() || '');
                data.append('processing_date', $('#new_date_processing').val());
                data.append('processing_date_first', '{{ $first_processing->processing_date ?? '' }}');
                data.append('destination_id', $('#destination_id').val() || '');
                data.append('obsevation', CKEDITOR.instances.new_observation.getData());

                // **Adicionamos o arquivo que você configurou**
                const fileInput = document.getElementById('processing_file');
                if (fileInput.files.length > 0) {
                    data.append('processing_file', fileInput.files[0]);
                }

                // Adicionamos o token CSRF
                data.append('_token', $('meta[name="csrf-token"]').attr('content'));

                $.ajax({
                    url: url,
                    data: data, // Usamos o objeto FormData
                    method: 'post',
                    processData: false, // Necessário para enviar FormData
                    contentType: false, // Necessário para enviar FormData
                    // Não é mais necessário o `headers` para o token CSRF, pois já está no FormData
                }).done(function(response) {
                    toastr.success('Tramitação salva com sucesso!');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    toastr.error("Erro ao salvar a tramitação. Por favor, tente novamente.");
                    console.error('AJAX Error:', textStatus, errorThrown);
                    console.error('Response:', jqXHR.responseText);
                });
            }
        };

        // O restante do seu código (delete_processing) pode ficar igual
        var delete_processing = function(id) {
            if (confirm('Deseja excluir?')) {
                const url = '/processings/' + id;

                $.ajax({
                    url: url,
                    method: 'DELETE',
                    // Adicionando o header CSRF para segurança, se ainda não estiver
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function() {
                    toastr.success('Tramitação excluída com sucesso!');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                }).fail(function() {
                    toastr.error("Erro ao excluir a tramitação. Por favor, tente novamente.");
                });
            }
        };
    </script>

    <script>
        // Seções de modal e atualização permanecem as mesmas, não precisam de ajuste para este cenário
        function openModalDate(id, data, situation) {
            $('#idProcessing').val(id);
            $('#dataModal').val(data);
            $('#idSituation').val(situation);
            $('#exampleModal').modal('show');
        }

        function updateTramite() {
            const dados = {
                id: $('#idProcessing').val(),
                data: $('#dataModal').val(),
                situation: $('#idSituation').val()
            };

            const url = '/lawProject/tramite/update/' + btoa(JSON.stringify(dados));
            $.ajax({
                url: url,
                method: 'POST',
                data: dados
            }).done(function(data) {
                $('#container-alert').append(
                    "<div class='alert alert-success' role='alert'>Tramitação alterada com sucesso!</div>"
                );
                location.reload();
            }).fail(function() {
                toastr.error("Erro ao atualizar a tramitação. Por favor, tente novamente.");
            });
        }
    </script>
@endsection