@extends('layouts.main')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-datetimepicker.min.css')}}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
@endpush
@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header bg-light">
                {{__('strings.add_new_extra_trip')}}
            </div>
            
            <form id="extra_trip_form" method="post" action="{{route('user_create_extra_trips')}}">
            {{ csrf_field() }}
            {{ method_field('post') }}
            <input type="hidden" name="user_token" value="{{Auth::user()->SECURE_TOKEN}}" >
            <input type="hidden" name="nip" id="nip" >
            <div class="card-body">
                <div class="row col-md-2"></div>
                <div class="row col-md-8">
                    
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.driver_email')}}</label>
                            <input type="text" id="normal-input" class="form-control" name="driver_email" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.driver_name')}}</label>
                            <input type="text" id="normal-input" class="form-control" name="driver_name" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.driver_lastname')}}</label>
                            <input type="text" id="normal-input" class="form-control" name="driver_lastname">
                        </div>
                    </div>
                    
                    
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label">{{__('strings.date_time')}}</label>
                            <input type='text' class="form-control" id='date_time' required/>
                            <input type='hidden' id="utc_date_time" name="utc_date_time"/>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >Total</label>
                            <input type="number" id="normal-input" class="form-control" name="total" step="0.01" required>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.start_address')}}</label>
                            <input type="text" id="normal-input" class="form-control" name="start_address">
                        </div>
                    </div>
                    

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="textarea">{{__('strings.trip_addresses')}}</label>
                            <textarea id="textarea" class="form-control" rows="6" name="trip_addresses"></textarea>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">                                
                            <label for="status">Estatus de viaje.</label>
                            <select id="status" name="status" class="form-control" readonly>
                                <option value='FINALIZADA'>Finalizado</option>
                            </select>
                        </div>  
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">                                
                            <label for="taxi_type">{{__('strings.taxi_type')}} / Cap. Max.</label>
                            <select id="taxi_type" name="taxi_type" class="form-control">
                                <option value='PLUS'>QuiQ Plus / 4 </option>
                                <option value='Pocker'>QuiQ Pocker / 5</option>
                                <option value='SixPack'>QuiQ SixPack / 6</option>
                                <option value='Large'>QuiQ Large / 7</option>
                                <option value='Baby'>QuiQ Baby / 9</option>
                                <option value='XL'>QuiQ XL / 14</option>
                                <option value='BlckJack'>QuiQ BlckJack / 21</option>
                                <option value='BIG'>QuiQ BIG / 35</option>
                            </select>
                        </div>  
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="payment_type" class="form-control-label" >{{__('strings.payment_type')}}</label>
                            <input type="text" id="payment_type" class="form-control" name="payment_type" value="Crédito RedTrack">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.number_of_passengers')}}</label>
                            <input type="number" id="total_passengers" class="form-control" name="total_passengers" step="1" value="1" onchange="onTotalPassengerChange(this.value)">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.passengers')}}</label>
                            <input type="text" id="passengers" class="form-control" name="passengers">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.project')}}</label>
                            <input type="text" id="project" class="form-control" name="project">
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <label>Clasificación</label>                              
                        <select id="route_classification" name="route_classification" class="form-control mb-4">
                            @php $classification = App\RouteClassification::all(); @endphp
                            @foreach($classification as $cls)
                            <option value="{{$cls->classification}}">{{$cls->classification ?? ''}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.distance')}}</label>
                            <input type="number" id="distance" class="form-control" name="distance" step="0.1">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.eco')}}</label>
                            <input type="text" id="plates" class="form-control" name="plates">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.km_local')}}</label>
                            <input type="number" id="km_local" class="form-control" name="km_local" step="0.1">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.km_foreign')}}</label>
                            <input type="number" id="km_foreign" class="form-control" name="km_foreign" step="0.1">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.waiting_time')}}</label>
                            <input type="time" id="waiting_time" class="form-control" name="waiting_time" value="00:00">
                            <small class="form-text">En formato HH:MM (Hora:Minuto)</small>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="normal-input" class="form-control-label" >{{__('strings.extra_passengers')}}</label>
                            <input type="number" id="extra_passengers" class="form-control" name="extra_passengers" step="1" value="0">
                        </div>
                    </div>

                    <br><hr>
                    
                    <div class="col-md-12">
                        <input id="postButton" type="submit" class="btn btn-primary" value="{{__('strings.save')}}" >
                    </div>

                </div>
                <div class="row col-md-2"></div>
            </div>
        </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='{{asset('js/bootstrap-datetimepicker.min.js')}}'></script>

<script>
    $(document).ready(function() {
         $('#date_time').datetimepicker({
                format: 'YYYY-MM-DD HH:mm',
                stepping: 5,
                icons:{
                    time: 'far fa-clock',
                    date: 'far fa-calendar-alt',
                    up: 'fas fa-chevron-up',
                    down: 'fas fa-chevron-down',
                    previous: 'fas fa-chevron-left',
                    next: 'fas fa-chevron-right',
                    clear: 'far fa-trash-alt',
                    close: 'fas fa-times'
                }
            });
        
        $("#extra_trip_form").submit(function(e){
            
            if($("#nip").val() != "") {
                return true;
            }
            
            e.preventDefault();
            console.log('submit event');
            // request nip to logged user
            bootbox.prompt({
                title: "Nip",
                inputType: 'password',
                size: 'small',
                closeButton: false,
                callback: function (nip) { 
                    if(nip) {      
                        $("#nip").val(nip);
                        $("#extra_trip_form").submit();
                        $('#postButton').prop('disabled', true);
                        $.showPreloader("{{__('strings.loading')}}");
                    }
                    
             }
            });
        });
    });

    $("#date_time").on("dp.change", function (e) {
        var utcDateTime = moment($("#date_time").val()).utc().format('YYYY-MM-DD HH:mm');
        $('#utc_date_time').val(utcDateTime);
    });
    
    function onSubmit() {

        return true;
    }

    function onTotalPassengerChange(value) {
        $("#extra_passengers").val(parseInt(value) - 1);
    }
</script>
@endpush