@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('documents.show') !!}
@endsection
@section('content')
    <div class="the-box rounded">
        <div class="form-group">
            <a href="{!! route('documents.index') !!}" class="btn btn-default">Voltar</a>
        </div>
        <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="col-md-12 col-sm-12">
                        <div class="form-group col-sm-3">
                            {!! Form::label('new_document_situation_id', 'Situação do documento:') !!}
                            {!! Form::select('new_document_situation_id', $document_situation, null, ['class' => 'form-control']) !!}
                        </div>

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

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

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

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

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

                        <div class="form-group col-sm-12">
                            <a href="{!! route('documents.index') !!}" class="btn btn-default pull-right">Voltar</a>
                            <button class="btn btn-info pull-right" type="button" onclick="save_processing()">
                                Salvar </button>
                        </div>

                        <div class="col-md-12">
                            <div class="timeline">
                                @forelse($documents 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->documentSituation->name }}
                                                </h4>
                                                <p>
                                                    <small class="text-muted">
                                                        <i class="fa fa-clock-o"></i>
                                                        {{ $processing->processing_document_date }}
                                                    </small>
                                                </p>
                                            </div>
                                            <div class="timeline-body">
                                                <p><strong>Status:</strong>
                                                    {{ $processing->statusProcessingDocument->name ?? '' }}</p>
                                                <p><strong>Destinatário:</strong> {{ $processing->destination->name ?? '' }}
                                                </p>
                                                <p>
                                                    <strong>Observação:</strong> {!! \Illuminate\Support\Str::limit($processing->observation, 150, '...') !!}
                                                </p>
                                                <div class="timeline-actions mt-2">
                                                    @if ($processing->file)
                                                        <a href="{{ asset('assets/processing_documents/' . $processing->file) }}"
                                                            target="_blank" class="btn btn-sm btn-primary">
                                                            Download Arquivo
                                                        </a>
                                                    @endif
                                                    @if (Auth::user()->id == $processing->owner_id ||
                                                            $first_documents->id === $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>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center">
                                        <strong>Não existe tramitação</strong>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix">

        </div>
    </div>
    <style>
        .timeline {
            position: relative;
            padding: 20px 0;
            list-style: none;
        }


        .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;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }


        .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;
            flex-shrink: 0;
        }

        .timeline-panel {
            position: relative;
            width: 45%;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
        }

        .timeline-panel::before {
            content: ' ';
            position: absolute;
            top: 26px;
            left: -15px;
            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;
            display: inline-block;
            border-top: 14px solid transparent;
            border-right: 14px solid #fff;
            border-left: 0 solid #fff;
            border-bottom: 14px solid transparent;
        }

        .timeline-item:nth-child(even) {
            justify-content: flex-start;
        }

        .timeline-item:nth-child(even) .timeline-panel {
            float: left;
        }

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

        .timeline-heading h4 {
            margin-top: 0;
            font-weight: bold;
            color: #555;
        }

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

            .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_processing_document_date').value = dateForm + '' + timeForm


        const assetsBaseUrl = '{{ asset('assets/processing_documents') }}';

        var save_processing = function() {
            url = '{{ route('processingDocuments.store') }}';

            if ($('#new_document_situation_id').val() == 0) {
                toastr.error('Selecione uma situação para tramitação!')
            } else {
                if ($('#new_status_processing_document_id').val() == 0) {
                    toastr.error('Selecione um status para tramitação!');
                } else {
                    if ($('#new_processing_document_date').val() == '') {
                        toastr.error('Selecione uma data para tramitação!');
                    } else {
                        var formData = new FormData();
                        formData.append('document_id', '{{ $document->id }}');
                        formData.append('document_situation_id', $('#new_document_situation_id').val());
                        formData.append('status_processing_document_id', $('#new_status_processing_document_id').val());
                        formData.append('processing_document_date', $('#new_processing_document_date').val());
                        formData.append('processing_document_date_first',
                            '{{ $first_documents->processing_document_date ?? '' }}');
                        formData.append('destination_id', $('#destination_id').val());
                        formData.append('observation', CKEDITOR.instances.new_document_observation.getData());
                        formData.append('date_end', null);

                        var fileInput = $('#file')[0];
                        if (fileInput.files.length > 0) {
                            formData.append('file', fileInput.files[0]);
                        }

                        $.ajax({
                            url: url,
                            data: formData,
                            processData: false,
                            contentType: false,
                            method: 'post',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).done(function(data) {
                            data = JSON.parse(data);

                            if (data) {
                                toastr.success('Tramitação salva com sucesso!');
                                location.reload();
                            } else {
                                toastr.error("Data menor que a do ultimo tramite");
                            }
                        }).fail(function(jqXHR, textStatus, errorThrown) {
                            console.error("Erro na requisição AJAX: " + textStatus, errorThrown);
                            toastr.error("Ocorreu um erro ao salvar a tramitação. Por favor, tente novamente.");
                        });
                    }
                }
            }
        }

        var delete_processing = function(id) {

            if (confirm('Deseja excluir?')) {

                url = '{{ route('processingDocuments.destroy', '') }}/' + id;

                $.ajax({
                    url: url,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                }).done(function(data) {
                    data = JSON.parse(data);

                    location.reload();
                    toastr.success('Tramitação excluída com sucesso!');

                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("Erro na requisição AJAX de exclusão: " + textStatus, errorThrown);
                    toastr.error("Ocorreu um erro ao excluir a tramitação. Por favor, tente novamente.");
                });
            }
        }
    </script>
@endsection