@extends('layouts.crud')
@section('title', 'Rotas - Cadastrar Nova')
@section('content')

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

			<div id="divVoltar" class='pb-1 mr-3'>
				<a href="{{ route('rotas', []) }}" 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'=>'rotas.store', 'files'=>true]) !!}
				<div class='form-row'>
                    <div class="form-group col-md-7">
                        {!! Form::label('nome', 'Nome:') !!}
                        {!! Form::text('nome', null, ['class'=>'form-control', 'maxlength'=>191, 'required']) !!}
                    </div>
                    <div class="form-group col-md-2">
                        {!! Form::label('kilometragem', 'Kilometragem:') !!}
                        {!! Form::text('kilometragem', null, ['class'=>'form-control', 'max'=>5000, 'required', 'data-mask'=>'decimal-3']) !!}
                    </div>
                    <div class="form-group col-md-2">
                        {!! Form::label('valorpassagem', 'Valor de Passagem:') !!}
                        {!! Form::number('valorpassagem', null, ['class'=>'form-control', 'max'=>5000, 'required', 'step'=>'0.01', 'style'=>'text-align: right']) !!}
                    </div>
                    <div class="form-group col-md-4">
                        {!! Form::label('inicio_viagens', 'Início das Viagens no Semestre:') !!}
                        {!! Form::date('inicio_viagens', null, ['class'=>'form-control', 'required']) !!}
                    </div>
                    <div class="form-group col-md-3">
                        {!! Form::label('parada_id[]', 'Paradas:') !!}
                        {!! Form::select('parada_id[]', \App\Models\Parada::orderBy('nome')->pluck('nome', 'id')->toArray(), null, ['class'=>'selectpicker form-control', 'required', 'multiple'=>true, 'data-live-search'=>'true', 'data-selected-text-format'=>'count > 2', 'data-actions-box'=>'true']) !!}
                    </div>
                </div>

                @if(config('app.name') === 'JULETUR')
                <div class='form-row'>
                    <div class="form-group col-md-4">
                        {!! Form::label('valor_viagem_agendada_realizada', 'Valor Viagem Agendada e Realizada:') !!}
                        {!! Form::number('valor_viagem_agendada_realizada', 0, ['class'=>'form-control', 'step'=>'0.01', 'style'=>'text-align: right']) !!}
                    </div>
                    <div class="form-group col-md-4">
                        {!! Form::label('valor_viagem_agendada_nao_realizada', 'Valor Viagem Agendada e Não Realizada:') !!}
                        {!! Form::number('valor_viagem_agendada_nao_realizada', 0, ['class'=>'form-control', 'step'=>'0.01', 'style'=>'text-align: right']) !!}
                    </div>
                    <div class="form-group col-md-4">
                        {!! Form::label('valor_viagem_extra', 'Valor Viagem Extra:') !!}
                        {!! Form::number('valor_viagem_extra', 0, ['class'=>'form-control', 'step'=>'0.01', 'style'=>'text-align: right']) !!}
                    </div>
                </div>
                @endif

                @if (config('app.name') === 'JULETUR')
                    <div class='form-row mb-4 mt-3' style="border: 1px solid #ccc; padding: 15px;">
                        <div class="col-md-12">
                            <h5>
                                Cobrar Apenas as Viagens <strong>Utilizadas</strong> entre:
                            </h5>
                        </div>
                        <div class="form-group col-md-4">
                            {!! Form::label('cobrar_apenas_as_utilizadas_inicio', 'Data Inicial:') !!}
                            {!! Form::date('cobrar_apenas_as_utilizadas_inicio', null, ['class'=>'form-control']) !!}
                        </div>
                        <div class="form-group col-md-4">
                            {!! Form::label('cobrar_apenas_as_utilizadas_fim', 'Data Final:') !!}
                            {!! Form::date('cobrar_apenas_as_utilizadas_fim', null, ['class'=>'form-control']) !!}
                        </div>
                    </div>
                @endif

                <!-- Configurações de Cronograma - Design Moderno -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-gradient-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-calendar-alt mr-2"></i>
                            Configurações de Cronograma
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Configurações de Viagem -->
                            <div class="col-md-6">
                                <div class="config-section mb-4">
                                    <h6 class="text-primary font-weight-bold mb-3">
                                        <i class="fas fa-route mr-2"></i>Controle de Viagens
                                    </h6>

                                    <div class="custom-control custom-switch mb-3">
                                        {!! Form::checkbox('permitir_alterar_turno_no_dia_atual', true, false, ['class'=>'custom-control-input', 'id'=>'permitir_alterar_turno']) !!}
                                        <label class="custom-control-label" for="permitir_alterar_turno">
                                            <strong>Permitir alteração de turno</strong>
                                            <br><small class="text-muted">Associado pode alterar turno com 48h de antecedência</small>
                                        </label>
                                    </div>



                                    <div class="form-group">
                                        <label for="dias_cancelamento" class="font-weight-bold">
                                            <i class="fas fa-clock mr-1"></i>Dias para cancelamento
                                        </label>
                                        <div class="input-group">
                                            {!! Form::number('dias_cancelamento', 1, ['class'=>'form-control', 'required', 'min'=>1, 'max'=>100, 'id'=>'dias_cancelamento']) !!}
                                            <div class="input-group-append">
                                                <span class="input-group-text">dias</span>
                                            </div>
                                        </div>
                                        <small class="form-text text-muted">Antecedência mínima para desmarcar viagem</small>
                                    </div>
                                </div>
                            </div>

                            <!-- Configurações de Cronograma -->
                            <div class="col-md-6">
                                <div class="config-section mb-4">
                                    <h6 class="text-primary font-weight-bold mb-3">
                                        <i class="fas fa-calendar-check mr-2"></i>Configurações do Cronograma
                                    </h6>

                                    <div class="custom-control custom-switch mb-3">
                                        {!! Form::checkbox('exigir_cronograma', true, true, ['class'=>'custom-control-input', 'id'=>'exigir_cronograma']) !!}
                                        <label class="custom-control-label" for="exigir_cronograma">
                                            <strong>Exigir preenchimento do cronograma</strong>
                                            <br><small class="text-muted">Caso contrário, usa tabela semanal</small>
                                        </label>
                                    </div>

                                    <div class="custom-control custom-switch mb-3">
                                        {!! Form::checkbox('cronograma_diario', true, false, ['class'=>'custom-control-input', 'id'=>'cronograma_diario']) !!}
                                        <label class="custom-control-label" for="cronograma_diario">
                                            <strong>Cronograma diário</strong>
                                            <br><small class="text-muted">Libera apenas a semana atual</small>
                                        </label>
                                    </div>

                                    <div class="custom-control custom-switch mb-3">
                                        {!! Form::checkbox('solicita_turno_viagem', true, false, ['class'=>'custom-control-input', 'id'=>'solicita_turno_viagem']) !!}
                                        <label class="custom-control-label" for="solicita_turno_viagem">
                                            <strong>Solicitar turno de viagem</strong>
                                            <br><small class="text-muted">Associado informa turno disponível</small>
                                        </label>
                                    </div>

                                    <div class="custom-control custom-switch mb-3">
                                        {!! Form::checkbox('solicitar_turno_dia_semana', true, false, ['class'=>'custom-control-input', 'id'=>'solicitar_turno_dia_semana']) !!}
                                        <label class="custom-control-label" for="solicitar_turno_dia_semana">
                                            <strong>Solicitar turno por dia da semana</strong>
                                            <br><small class="text-muted">Configuração específica por dia</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Informações Adicionais -->
                        <div class="alert alert-info border-0">
                            <div class="d-flex">
                                <i class="fas fa-info-circle fa-2x text-info mr-3 mt-1"></i>
                                <div>
                                    <h6 class="alert-heading">Informações Importantes</h6>
                                    <p class="mb-0">Estas configurações são específicas para esta rota e substituem as configurações gerais do sistema. As alterações afetarão todos os associados que utilizam esta rota.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Configurações de Termo de Assinatura - Design Moderno -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-gradient-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-file-signature mr-2"></i>
                            Configurações de Termo de Assinatura
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Configurações de Termo -->
                            <div class="col-md-12">
                                <div class="config-section mb-4">
                                    <h6 class="text-success font-weight-bold mb-3">
                                        <i class="fas fa-cog mr-2"></i>Configurações do Termo
                                    </h6>

                                    <div class="custom-control custom-switch mb-3">
                                        {!! Form::checkbox('utiliza_termo_individual', true, false, ['class'=>'custom-control-input', 'id'=>'utiliza_termo_individual']) !!}
                                        <label class="custom-control-label" for="utiliza_termo_individual">
                                            <strong>Utilizar termo de assinatura individual</strong>
                                            <br><small class="text-muted">Se ativado, esta rota usará seu próprio termo de compromisso. Caso contrário, usará o termo padrão das configurações.</small>
                                        </label>
                                    </div>

                                    <div id="configuracoes-termo" style="display: none;">
                                        <div class="form-group">
                                            {!! Form::label('termo_compromisso', 'Termo de Compromisso (.pdf):') !!}
                                            <input type='file' accept="application/pdf" id="termo_compromisso" name="termo_compromisso" class='filestyle' data-btnClass="btn-secondary-color" data-size="sm" data-placeholder="Nenhum Arquivo Selecionado" data-text="<i class='fas fa-upload'></i>&nbsp; Selecionar"/>
                                            <small class="form-text text-muted">Arquivo PDF do termo de compromisso específico para esta rota</small>
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-4">
                                                {!! Form::label('eixo_x', 'Posição Eixo X:') !!}
                                                {!! Form::number('eixo_x', null, ['class'=>'form-control', 'min'=>1, 'max'=>100]) !!}
                                                <small class="form-text text-muted">Posição X da assinatura no documento</small>
                                            </div>
                                            <div class="form-group col-md-4">
                                                {!! Form::label('eixo_y', 'Posição Eixo Y:') !!}
                                                {!! Form::number('eixo_y', null, ['class'=>'form-control', 'min'=>1, 'max'=>100]) !!}
                                                <small class="form-text text-muted">Posição Y da assinatura no documento</small>
                                            </div>
                                            <div class="form-group col-md-4">
                                                {!! Form::label('pagina_assinatura', 'Página da Assinatura:') !!}
                                                {!! Form::number('pagina_assinatura', null, ['class'=>'form-control', 'min'=>1, 'max'=>100]) !!}
                                                <small class="form-text text-muted">Número da página onde será colocada a assinatura</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Informações Adicionais -->
                        <div class="alert alert-success border-0">
                            <div class="d-flex">
                                <i class="fas fa-info-circle fa-2x text-success mr-3 mt-1"></i>
                                <div>
                                    <h6 class="alert-heading">Sobre os Termos de Assinatura</h6>
                                    <p class="mb-0">
                                        <strong>Termo Individual:</strong> Quando ativado, o termo individual desta rota será usado para todos os associados que se cadastrarem nesta rota.
                                        <br><strong>Termo Padrão:</strong> Caso contrário, será usado o termo padrão das configurações gerais do sistema.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

    			<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>
@stop

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

<script defer>
    window.addEventListener('load', function () {
        setTimeout(() => {
            $('#utiliza_termo_individual').change(function() {
                if ($(this).is(':checked')) {
                    $('#configuracoes-termo').show();
                } else {
                    $('#configuracoes-termo').hide();
                }
            });
        }, 150)
    });
</script>
<style>
    input[type=checkbox] {
        height: 20px;
        width: 20px;
    }

    /* Estilos para as configurações modernas */
    .bg-gradient-primary {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    }

    .config-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        border-left: 4px solid #007bff;
    }

    .custom-switch {
        padding-left: 2.75rem;
    }

    .custom-control-label {
        cursor: pointer;
        line-height: 1.4;
    }

    .custom-control-label strong {
        color: #495057;
        font-size: 0.95rem;
    }

    .custom-control-label small {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .custom-switch .custom-control-label::before {
        width: 2.5rem;
        height: 1.25rem;
        border-radius: 1.25rem;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
    }

    .custom-switch .custom-control-label::after {
        width: calc(1.25rem - 4px);
        height: calc(1.25rem - 4px);
        border-radius: calc(1.25rem - 4px);
        background-color: #fff;
        border: 1px solid #ced4da;
    }

    .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #007bff;
        border-color: #007bff;
    }

    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
        transform: translateX(1.25rem);
    }

    .input-group-text {
        background-color: #e9ecef;
        border-color: #ced4da;
        color: #495057;
        font-weight: 500;
    }

    .alert-info {
        background-color: #f8f9fa;
        border-left: 4px solid #17a2b8;
    }

    .card {
        transition: all 0.3s ease;
    }

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }

    .text-primary {
        color: #007bff !important;
    }

    .font-weight-bold {
        font-weight: 600 !important;
    }
</style>