@extends('layouts.principal')

@section('titulo')
    {{$rotina->nome}} #{{$model->getValorId()}} - Configurando
@endsection

@section('voltar')
    <a class="btn btn-secondary" href="{{ route('geral', [$sistema->slug, 'rota', \App\Structural\Enums\Estrutura\Acao::CONSULTAR->slug()]) }}">Voltar</a>
@endsection

@section('content')

    @php
        $proximoPasso = \App\Structural\Enums\Estrutura\Acao::CONFIGURATUALIZAR;
    @endphp

    <form method="POST"
        action="{{ route('geral', [$sistema->slug, $rotina->slug, $proximoPasso->slug(), $model->{$model->getKeyName()}]) }}"
        data-rotina="{{ $rotina->id }}"
        data-acao="{{ $acao->id }}"
        class="cadastro">
        @csrf
        @method($proximoPasso->metodo())

        <div class="row div-dragDrop">
            <ol class="list-group list-group-numbered col-12 ol-dragDrop" id="js-ol-lista-sortable">
                @forelse ($sequencias as $sequencia)
                    @php
                        $idProdutor = $sequencia->produtor_rota_produtor_id;
                        $produtor = $sequencia->produtorRota->produtor;
                    @endphp
                    <li id="{{ $idProdutor }}" class="list-group-item li-dragDrop">

                        <input type="hidden" name="produtor[]" value="{{ $idProdutor }}" id="inputProdutor{{ $idProdutor }}" />

                        <label class="fw-bold">
                            {{ $produtor->nome }}
                        </label>
                        <label class="">
                            {{ $produtor->pessoaEndereco->enderecoCompleto }}
                        </label>
                        <label class="text-secondary">
                            {{ $sequencia->produtorRota->principal ? 'Principal' : '' }}
                        </label>

                    </li>
                @empty
                    <h3>
                        Não há produtores para essa rota!
                    </h3>
                @endforelse
            </ol>
        </div>

        <div class="col text-end">
            <br/>
            <button class="btn btn-success" type="submit">Salvar</button>
        </div>

    </form>

@endsection

@section('script')
    <script>
        $( function() {
            $( "#js-ol-lista-sortable" ).sortable({
                revert: 100,
                cursor: "move",
                delay: 20,
                placeholder: "drop-placeholder"
            });
        });
    </script>
@endsection