@extends('layouts.app')
@section('title')
    <title>Baboon - Krijimi i Profilit</title>
@endsection

@section('custom-css')
    <style>
        .cappy-image {
            width: 100%;
            height: 100%;
        }
    </style>
@endsection

@section('content')
    <div class="address-cont">
        <div class="container">
            <div class="row title-row">
                <div class="col-md-8 col-md-offset-1 col-xs-6">
                    <h2>Krijo një profil </h2>
                    <h1> përpara se të porosisësh </h1>
                </div>
                <div class="col-md-3 col-xs-6 ">
                    <img src="{{session('order')['logo']}}" class="" width="130" height="130">
                </div>
            </div>
            <div class="row">
                <div class="col-md-7 col-md-offset-1">
                    <div class="panel panel-default panel-add profile-panel">
                        <div class="panel-heading">Krijoni një profil</div>
                        <div class="panel-body">
                            @if(\Session::has('success') || \Session::get('danger') == 'Kodi aktivizimit nuk eshte i sakte!')
                                <br>
                                <form class="form-horizontal" method="POST" action="{{ route('activate_submit') }}">
                                    {{ csrf_field() }}
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <input type="text" class="form-control" name="activisationCode" value=""
                                                   placeholder="kodi i verifikimit">
                                        </div>
                                    </div>
                                    <input type="hidden" name="route" value="profile">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-primary login-button" id="verify-code">
                                                Verifiko kodin
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            @else
                                <form class="form-horizontal" id="create-profile-form" method="POST"
                                      action="{{route('create-profile')}}">
                                    {{ csrf_field() }}

                                    <div class="form-group {{ $errors->has('name') ? ' has-error' : '' }} ">
                                        <div class="col-md-6">
                                            <label>Emri</label>
                                            <input type="text" class="form-control" name="name"
                                                   value="{{ session('user') ? session('user')['name'] : '' }}"
                                                   placeholder="Vendosni emrin" required autofocus>

                                            @if ($errors->has('name'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('name') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <label>Mbiemri</label>
                                            <input type="text" class="form-control" name="surname"
                                                   value="{{ old('surname') }}" placeholder="Vendosni mbiemrin" required
                                                   autofocus>

                                            @if ($errors->has('surname'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('surname') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group {{ $errors->has('phone') ? ' has-error' : '' }} ">
                                        <div class="col-md-6">
                                            <label>Adresa e Email-it</label>
                                            <input type="email" class="form-control" name="email"
                                                   value="{{ old('email') }}" placeholder="Vendosni e-mailin" required
                                                   autofocus>

                                            @if ($errors->has('email'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('email') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <label>Celulari</label>
                                            <input type="text" class="form-control" name="phone"
                                                   value="{{ old('phone') }}" placeholder="Vendosni celularin" required
                                                   autofocus>

                                            @if ($errors->has('phone'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('phone') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    <input type="hidden" name="latitude" id="profile-add-lat" value="">
                                    <input type="hidden" name="longitude" id="profile-add-lng" value="">

                                    <div class="form-group {{ $errors->has('addressPoints') ? ' has-error' : '' }}">
                                        <div class="col-md-12">
                                            <label>Adresa</label>
                                        </div>
                                        <div class="col-md-12">

                                            <input type="text" class="form-control" id="profileAddressPoints"
                                                   onkeypress="geolocate()" name="addressPoints" value=""
                                                   placeholder="Adresa" required>
                                            <span class="fa fa-map-marker form-control-feedback"
                                                  id="register-marker"></span>
                                            @if ($errors->has('addressPoints'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('addressPoints') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group {{ $errors->has('password') ? ' has-error' : '' }} ">
                                        <div class="col-md-6">
                                            <label>Fjalekalimi</label>
                                            <input type="password" class="form-control" name="password"
                                                   value="{{ old('password') }}" placeholder="Vendosni fjalekalimin"
                                                   required autofocus>

                                            @if ($errors->has('password'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('password') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                        <div class="col-md-6">
                                            <label>Konfirmo Fjalëkalimin</label>
                                            <input type="password" class="form-control" name="password_confirmation"
                                                   placeholder="Konfirmo Fjalëkalimin" required>
                                            @if ($errors->has('password_confirmation'))
                                                <span class="help-block">
                                                <strong>{{ $errors->first('password_confirmation') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-primary" id="order-create-profile">
                                                Vazhdo
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            @endif
                        </div>
                        <div class="cart-divider ">
                            <span class="col-md-1 or ">Or</span>
                        </div>
                        <div class="panel-heading">Keni një Llogari?</div>
                        <div class="panel-body">
                            <form class="form-horizontal " method="POST" action="{{route('login')}}">
                                {{ csrf_field() }}
                                <input type="hidden" name="route" value="profile">

                                <div class="form-group {{ $errors->has('email_profile') ? ' has-error' : '' }} ">
                                    <div class="col-md-6">
                                        <label>Adresa e Email-it</label>
                                        <input type="text" class="form-control" name="email_profile"
                                               value="{{ old('email') }}" placeholder="Vendosni e-mailin" required
                                               autofocus>

                                        @if ($errors->has('email_profile'))
                                            <span class="help-block">
                                                <strong>{{ $errors->first('emaemail_profileil') }}</strong>
                                            </span>
                                        @endif
                                    </div>

                                    <div class="col-md-6">
                                        <label>Fjalekalimi</label>
                                        <input type="password" class="form-control" name="password_profile"
                                               value="{{ old('password') }}" placeholder="Vendosni fjalekalimin"
                                               required autofocus>

                                        @if ($errors->has('password_profile'))
                                            <span class="help-block">
                                                <strong>{{ $errors->first('password_profile') }}</strong>
                                            </span>
                                        @endif
                                        <a class="btn btn-link forget-pass" href="{{ route('password.request') }}">
                                            <u> Keni harruar fjalëkalimin?</u>
                                        </a>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary" id="order-login">
                                            Hyr
                                        </button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12 new-restaurant-cont menu-category cart-tab add-cart-tab">
                        <p class="single-order-detail-rate "><b>Porosia juaj:</b></p>
                        @if(session('order'))
                            @foreach(session('order')['items'] as $item )
                                <div class="cart-item-container">
                                    <p class="cart-p">
                                        <span class="cart-item-quantity ">{{$item['quantity']}}</span>
                                        x
                                        <span class="cart-item-name">{{$item['name']}}</span>
                                        <span class="cart-item-tot-price pull-right">{{$item['price']}} L</span>
                                    </p>
                                </div>
                            @endforeach
                        @endif
                        <div class="cart-divider"></div>
                        <p class="cart-p"> Subtotali <span class="pull-right single-order-detail-title"
                                                           id="cart-subtotal">{{session('order')['subtotal']}} L</span>
                        </p>
                        <p class="cart-p"> Ulje e aplikuar <span class="pull-right single-order-detail-title"
                                                                 id="cart-sconto">0 L</span></p>
                        <p class="cart-p"> Kosto Transporti <span class="pull-right single-order-detail-title"
                                                                  id="cart-del-cost">{{session('order')['transportCost']}} L</span>
                        </p>
                        <p class="cart-p" id="cart-total-p"><b> Totali </b> <span
                                    class="single-order-detail-title pull-right" id="cart-total">{{session('order')['total']}} L</span>
                        </p>
                    </div>
                </div>
{{--                <div class="col-md-3">--}}
{{--                    <img src="{{asset('images/cappy-1200.jpeg')}}" class="cappy-image">--}}
{{--                </div>--}}
            </div>
        </div>
    </div>
@endsection
@section('custom-js')
    <script>
        var autocomplete;

        function initAutocomplete() {
            // Create the autocomplete object, restricting the search to geographical
            // location types.
            autocomplete = new google.maps.places.Autocomplete(
                /** @type {!HTMLInputElement} */(document.getElementById('profileAddressPoints')),
                {types: ['geocode']});

            autocomplete.addListener('place_changed', fillInAddress);
        }

        function fillInAddress() {
            var place = autocomplete.getPlace();
            $('#profile-add-lat').val(place.geometry.location.lat());
            $('#profile-add-lng').val(place.geometry.location.lng());
            console.log(place.geometry.location.lat());
            console.log(place.geometry.location.lng());
        }

        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAEIy2YqySuqOgFZXll0182KrQ6CkMMY0o&libraries=places&callback=initAutocomplete"
            async defer></script>
    <script>
        $('#order-create-profile').on('click', function () {
            console.log($('#create-profile-form').serialize());
        })
    </script>
@endsection