@extends('layouts.principal')

@section('titulo')
    Acompanhamento do Processo #{{$model->getValorId()}}
@endsection

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

@section('help')
    <x-form.help
        :model="$model">
    </x-form.help>
@endsection

@section('content')

    @php
        $removeBotoesPadrao = ['salvar'];
        $compEtapa = 'App\View\Components\Fluxo\Etapa';
    @endphp

    <div class="row" data-sistema="{{ $sistema->id }}" data-rotina="{{ $rotina->id }}" data-acao="{{ $acao->id }}">

        <x-form.inputs.hidden
            name="id"
            :required="false"
            label="Id"
            route="conf"
            :value="$model->id">
        </x-form.inputs.hidden>

        <x-step-by-step.set-of-steps id="fluxo{{ $model->id }}" type="border">

            @foreach($model->processoFases as $processoFase)
                @php
                    $situacao = App\Structural\Enums\Compra\ProcessoFaseSituacao::tryFrom($processoFase->situacao);
                @endphp

                <x-step-by-step.step
                    :id="'fase-' . $processoFase->id"
                    :title="$processoFase->fase->descricao"
                    :status="$situacao->label()"
                    :indicator="round($processoFase->percentual) . '%'"
                    :color="$situacao->colorStatus()"
                    :interaction="$situacao->interactionStatus()">
                </x-step-by-step.step>


            @endforeach

        </x-step-by-step.set-of-steps>

    </div>
@endsection

@section('script')
    @if(isset($model->comportamento) && $model->comportamento)
        <script src="{{ asset('/js/comportamento/'.$model->getNomeComportamento().'.js') }}" type="module"></script>
    @endif
@endsection