@extends('layouts.crud')
@section('title', 'Finalidade de Transporte - Cadastrar Nova')
@section('content')

	<div class="card">
	    <div class="card-header d-flex justify-content-between align-items-end">
			<h3>Cadastrar Nova Finalidade de Transporte</h3>

			<div id="divVoltar" class='pb-1 mr-3'>
				<a href="{{ route('finalidades', []) }}" class="text-white">
					<i class="fas fa-reply"></i>
				</a>
			</div>
	    </div>

        <div class="card-body">
    		@if($errors->any())
    			<div class="alert alert-danger alert-dismissible fade show" role="alert">
    				@foreach($errors->all() as $error)
    			  		<li>{{ $error }}</li>
    				@endforeach
    			  	<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    				    <span aria-hidden="true">&times;</span>
    			  	</button>
    			</div>
    		@endif

			{!! Form::open(['route'=>'finalidades.store']) !!}
				<div class='form-row'>
                    <div class="form-group col-md-5">
                        {!! Form::label('nome', 'Nome:') !!}
                        {!! Form::text('nome', null, ['class'=>'form-control', 'maxlength'=>191, 'required']) !!}
                    </div>
                    <div class="form-group col-md-3">
                        {!! Form::label('taxa', '% cobrança de passagem:') !!}
                        {!! Form::text('taxa', null, ['data-mask'=>'decimal-3','placeholder'=>'100.00', 'class'=>'form-control', 'maxlength'=>6, 'required']) !!}
                    </div>
                    <div class="form-group col-md-4">
                        {!! Form::label('taxa_matricula', '% cobrança de cadastro/recadastro:') !!}
                        {!! Form::text('taxa_matricula', null, ['data-mask'=>'decimal-3','placeholder'=>'100.00', 'class'=>'form-control', 'maxlength'=>6, 'required']) !!}
                    </div>
                </div>

                @if(config('finalidades.permitir_valores_por_rota') && isset($rotas))
                <div class='form-row'>
                    <div class="form-group col-md-12">
                        <div class="custom-control custom-checkbox">
                            {!! Form::checkbox('usar_valor_por_rota', '1', false, ['class' => 'custom-control-input', 'id' => 'usar_valor_por_rota']) !!}
                            {!! Form::label('usar_valor_por_rota', 'Usar valor fixo por rota', ['class' => 'custom-control-label']) !!}
                        </div>
                    </div>
                </div>

                <div class="form-row" id="valores-rotas" style="display: none;">
                    <div class="col-md-12">
                        <h4>Valores por Rota</h4>
                        <hr>
                    </div>
                    @foreach($rotas as $rota)
                    <div class="form-group col-md-4">
                        {!! Form::label("rota_{$rota->id}", "Valor para rota {$rota->nome}:") !!}
                        {!! Form::text("valores_rotas[{$rota->id}]", null, [
                            'class' => 'form-control valor-rota',
                            'data-mask' => 'currency',
                            'placeholder' => 'R$ 0,00'
                        ]) !!}
                    </div>
                    @endforeach
                </div>
                @endif

    			<div class='form-row'>
    				<div class="form-group col-md-6">
    				{!! Form::reset('Limpar', ['class'=>'btn btn-default']) !!}
    				{!! Form::submit('Cadastrar', ['class'=>'btn btn-primary']) !!}
    			</div>

    		{!! Form::close() !!}
	    </div>
	</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const valoresRotasDiv = document.getElementById('valores-rotas');
            const usarValorPorRota = document.getElementById('usar_valor_por_rota');
            const camposValores = document.querySelectorAll('.valor-rota');

            function toggleValoresRotas() {
                if (usarValorPorRota.checked) {
                    valoresRotasDiv.style.display = 'flex';
                } else {
                    valoresRotasDiv.style.display = 'none';
                    camposValores.forEach(campo => {
                        campo.value = '';
                    });
                }
            }

            usarValorPorRota.addEventListener('change', toggleValoresRotas);
            toggleValoresRotas();
        });
    </script>
@stop 

@section('table-delete')
"finalidades"
@stop