@extends('layouts.app')
@section('meta.title')
    <title>Baboon - Apliko si Driver</title>
@endsection

@section('meta.description')
    <meta name="description" content="Baboon eshte aplikacion shqiptar ku porosit ushqim online nga kompjuteri, tablet apo celulari.">
@endsection

@section('meta.keywords')
    <meta name="keywords" content="baboon, baboon food delivery, baboon albania, pizza taxi, sherbim taksi 24 ore, delivery and food tirana, restorante ne tirane, fast food ne tirane,ushqim i castit.">
@endsection
@section('custom-css')

    <link href="{{ asset('/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" >
@endsection
@section('content')
    <div class="career-bg">

    </div>
    <div class="container">

        <div class="row">
            <div class="col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2">
                <div class="progress-delivery">
                    <p class="nr-progress-delivery"> 1 to 3 steps</p>
                    <div class="progress-bar-value">
                        <div class="progress-bar progress-bar-delivery-percentage" style="width: 40%;">
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">

                    <div class="panel-body order-history-list deliver-apply-form">
                        <fieldset>
                            <div class="panel-heading delivery-title">Na trego rreth vetes</div>
                            <form class="form-horizontal " method="POST" action="" >
                            {{ csrf_field() }}

                            <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                                <div class="col-md-12">
                                    <label for="name" class="control-label delivery-label">Emri</label>
                                    <input  type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Emri" required>

                                    @if ($errors->has('name'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                <div class="col-md-12">
                                    <label for="email" class=" control-label delivery-label">Addresa  E-Mail </label>
                                    <input type="email" class="form-control" name="email" value="{{ old('email') }}" placeholder="Email" required>

                                    @if ($errors->has('email'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('phone') ? ' has-error' : '' }}">
                                <div class="col-md-12">
                                    <label for="phone" class=" control-label delivery-label">Celulari </label>
                                    <input type="text" class="form-control" name="phone" value="{{ old('phone') }}" placeholder="Celulari" required>

                                    @if ($errors->has('phone'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('phone') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <label for="vehicle_type" class="control-label delivery-label">Lloji i mjetit </label>
                                    <div id="radios">
                                        <label for="scooting" class="material-icons">
                                            <input type="radio" name="mode" id="scooting" value="scooting" checked/>
                                            <span><img src="../images/scooter.svg"> </span>
                                        </label>
                                        <label for="driving" class="material-icons">
                                            <input type="radio" name="mode" id="driving" value="driving" />
                                            <span><img src="../images/car.svg"> </span>
                                        </label>
                                        <label for="cycling" class="material-icons">
                                            <input type="radio" name="mode" id="cycling" value="cycling" />
                                            <span><img src="../images/bicycle.svg"> </span>
                                        </label>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-12">
                                    <p class="delivery-desc">
                                        Duke përzgjedhur Next, ju jepni Baboon lejen që t'ju kontaktojë me email / telefon / sms,
                                        nëpërmjet detajeve të kontaktit që keni dhënë, në lidhje me aplikimin tuaj.
                                        <a href="#" class="delivery-desc"><u>Privacy Policy</u> </a> shpjegon se si ne përdorim dhe mbrojmë informacionin tuaj në
                                        lidhje me aplikimin tuaj dhe shërbimet e motorristit për Baboon.</p>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="" class="next btn btn-primary login-button">
                                    Next
                                </button>
                            </div>
                            {{--<input type="button" class="next btn btn-info" value="Next" />--}}
                        </form>
                        </fieldset>
                        <fieldset>
                            <div class="panel-heading delivery-title">Gjërat që duhet të kontrollojmë</div>
                            <form class="form-horizontal " method="POST" action="" >
                                {{ csrf_field() }}

                                <div class="form-group{{ $errors->has('birth_date') ? ' has-error' : '' }}">
                                    <div class="col-md-12">
                                        <label for="name" class="control-label delivery-label">Data e lindjes</label>

                                            <div class="form-group">
                                                <div class='input-group date' id='birth-date'>
                                                    <input type='text' class="form-control" placeholder="Data e lindjes"/>
                                                    <span class="input-group-addon">
                                                    <span class="fa fa-calendar"></span>
                                                    </span>
                                                </div>
                                            </div>

                                        @if ($errors->has('birth_date'))
                                            <span class="help-block">
                                            <strong>{{ $errors->first('birth_date') }}</strong>
                                            </span>
                                        @endif
                                        <p class="delivery-desc">
                                            Duhet të jeni të paktën 18 vjeç për të aplikuar.</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="previous btn btn-default">
                                        Kthehu
                                    </button>
                                </div>
                                <div class="col-md-9">
                                    <button type="button" class="next btn btn-default login-button ">
                                        Vazhdo
                                    </button>
                                </div>

                            {{--<input type="button" name="previous" class="previous btn btn-default" value="Previous" />--}}
                            {{--<input type="button" name="next" class="next btn btn-info" value="Next" />--}}
                            </form>
                        </fieldset>
                        <fieldset>
                            <div class="panel-heading delivery-title">Një gjë të fundit</div>
                            <form class="form-horizontal " method="POST" action="" >
                                {{ csrf_field() }}

                                <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                                    <div class="col-md-12">
                                        <label for="name" class="control-label delivery-label">Kodi i referimit (nëse aplikohet)</label>
                                        <input  type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Kodi i referimit    " required>

                                        @if ($errors->has('name'))
                                            <span class="help-block">
                                        <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">

                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <label for="vehicle_type" class="control-label delivery-label">Si keni dëgjuar për aplikimin?</label>
                                                <div id="radios">
                                                    <label for="rider" class="material-icons">
                                                        <input type="radio" name="mode" id="rider" value="Deliveroo Rider" checked/>
                                                        <span><img src="../images/bicycle.svg"> </span>
                                                    </label>
                                                    <label for="wordofmouth" class="material-icons">
                                                        <input type="radio" name="mode" id="wordofmouth" value="Word of Mouth" />
                                                        <span><img src="../images/wordofmouth.svg"> </span>
                                                    </label>
                                                    <label for="internet" class="material-icons">
                                                        <input type="radio" name="mode" id="internet" value="Internet" />
                                                        <span><img src="../images/phone.svg"> </span>
                                                    </label>
                                                    <label for="streetevent" class="material-icons">
                                                        <input type="radio" name="mode" id="streetevent" value="Street Event" />
                                                        <span><img src="../images/street.svg"> </span>
                                                    </label>
                                                    <label for="other" class="material-icons">
                                                        <input type="radio" name="mode" id="other" value="Other" />
                                                        <span><img src="../images/other.svg"> </span>
                                                    </label>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <button type="submit" class="previous btn btn-default">
                                        Kthehu
                                    </button>
                                </div>
                                <div class="col-md-9">
                                    <button type="submit" class="next btn btn-default login-button ">
                                        Dërgo aplikimin
                                    </button>
                                </div>

                                {{--<input type="button" name="previous" class="previous btn btn-default" value="Previous" />--}}
                                {{--<input type="button" name="next" class="next btn btn-info" value="Next" />--}}
                            </form>
                        </fieldset>
                        <fieldset>
                            <div class="panel-heading delivery-title">
                                Faleminderit për aplikimin !</div>
                            <form class="form-horizontal " method="POST" action="" >
                                {{ csrf_field() }}

                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label for="vehicle_type" class="control-label delivery-label">Whats next?</label>
                                        <div class="radio">
                                            <label >
                                                <input type="radio"  checked/>

                                                Përgjigjuni disa pyetjeve të tjera
                                            </label>
                                        </div>
                                        <div class="radio">
                                        <label >
                                            <input type="radio"  />

                                            Plotësoni procesin e aplikimit
                                        </label>
                                        </div>
                                        <div class="radio">
                                            <label >
                                                <input type="radio"  />
                                                Programoni sesionin tuaj në bord
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <button type="submit" class="next btn btn-default login-button ">
                                       Vazhdo
                                    </button>
                                </div>

                                {{--<input type="button" name="previous" class="previous btn btn-default" value="Previous" />--}}
                                {{--<input type="button" name="next" class="next btn btn-info" value="Next" />--}}
                            </form>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('custom-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#delivery-time').datetimepicker({
                format: 'LT'
            });
            $('#birth-date').datetimepicker({
                format:'DD/MM/YYYY',
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down",
                    left: "fa fa-arrow-left",
                    right: "fa fa-arrow-right"
                }
            });
        });

        $(document).ready(function(){
            var current = 1,current_step,next_step,steps;
            steps = $("fieldset").length;
            $(".next").click(function(){
                current_step = $(this).parent().parent().parent();
                next_step = $(this).parent().parent().parent().next();
                console.log(next_step);
                next_step.show();
                current_step.hide();
                setProgressBar(++current);
            });
            $(".previous").click(function(){
                current_step = $(this).parent().parent().parent();
                next_step = $(this).parent().parent().parent().prev();
                next_step.show();
                current_step.hide();
                setProgressBar(--current);
            });
            setProgressBar(current);
            // Change progress bar action
            function setProgressBar(curStep){
                var percent = parseFloat(100 / steps) * curStep;
                percent = percent.toFixed();
                $(".progress-bar")
                    .css("width",percent+"%")
                    .html(percent+"%");
            }
        });

    </script>
@endsection