@extends('painel.layouts.dashboard')

@section('title', 'Orçamentos')

@section('title-dashboard')
<a class="btn btn-primary btn-xs" title="Novo Cadastro" onclick="AtivarCadastro();"><span class="glyphicon glyphicon-plus" aria-hidden="true"/></a>
Orçamentos
@endsection

@section('pg-home')
@endsection

@section('content')
@parent

<!-- Formulário Cadastro-->
<div id="div_cadastro" class="{{$displayCadastrar}}">
    @include('painel/orcamentos/create')
</div>

<!-- Formulário Editar-->
<div id="div_edit" class="{{$displayEdit}}">
    @if($displayEdit == 'displayblock')
    @include('painel/orcamentos/edit')
    @endif
</div>

<!-- Lista -->

<div class="row">
    <div class="col-md-12">        
        <!-- BEGIN SAMPLE TABLE PORTLET-->
        <div class="portlet box blue-steel">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-list"></i> Lista de Orçamentos
                    <small style="margin-left: 10px; color: #fff;">(Arraste as linhas para reordenar)</small>
                </div>
            </div>
            <div class="portlet-body">
                <table class="table table-bordered table-striped table-condensed flip-content width100p" id="pagination_perfil">
                    <thead class="flip-content">
                        <tr>
                            <th class="col-sm-1 text-aligncenter">{{trans('padrao.editar')}}</th><th> {{ trans('orcamentos.nome') }} </th><th> {{ trans('orcamentos.tipo') }} </th><th> {{ trans('orcamentos.status') }} </th><th class="col-sm-1 text-aligncenter">{{trans('padrao.excluir')}}</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-orcamentos">
                        {{-- */$x=0;/* --}}
                        @foreach($orcamentos as $item)
                        {{-- */$x++;/* --}} 
                        <tr data-id="{{ $item->id }}" style="cursor: move;">
                            <td class="text-aligncenter"><a href="{{ route('orcamentosEditar', $item->id) }}"><i class="fa fa-edit"></i></a></td>
                            <td>{{ $item->nome }}</td><td>{{ $item->tipo }}</td><td>{{ $item->status }}</td>
                            <td class="text-aligncenter"><a onclick="SetarRouter('{{ route('orcamentosExcluir', $item->id) }}');" href="#Confirmar_Exclusao" data-toggle='modal'><i class="fa fa-trash"></i></a></td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>        
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('sortable-orcamentos');
    if(el) {
        var sortable = Sortable.create(el, {
            animation: 150,
            ghostClass: 'sortable-ghost',
            onEnd: function(evt) {
                var ordem = [];
                var rows = el.querySelectorAll('tr[data-id]');
                rows.forEach(function(row) {
                    ordem.push(row.getAttribute('data-id'));
                });
                
                fetch('{{ route("orcamentosAtualizarOrdem") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ ordem: ordem })
                });
            }
        });
    }
});
</script>
<style>
.sortable-ghost {
    background-color: #f0f8ff !important;
    opacity: 0.8;
}
#sortable-orcamentos tr {
    cursor: move;
}
</style>
@endsection