@extends('layouts.app')

@section('content')

<!-- @php 

$business = DB::table('business_types')->get();

@endphp -->

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header" style="background-color: #555316; color: white; font-size: 25px;">{{ __('Register') }}</div>

                <div class="card-body">
                    <form action="{{ route('register') }}" method="POST" enctype="multipart/form-data" novalidate>
                        {{ csrf_field() }}
                        
                        <h4>Personal Information:</h4>
                        <hr>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('First Name*') }}</label>
                            <div class="col-md-6">
                                <input id="first_name" type="text" class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name') }}" autocomplete="off" autofocus placeholder="Enter First Name">
                                @error('first_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Last Name*') }}</label>
                            <div class="col-md-6">
                                <input id="last_name" type="text" class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name') }}" autocomplete="off" autofocus placeholder="Enter Last Name">
                                @error('last_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Email*') }}</label>
                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autofocus autocomplete="off" placeholder="Enter Email">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right"> Phone*</label>
                            <div class="col-md-6">
                                <input type="hidden" name="phone" id="phone" value="" autocomplete="off">
                                <input id="formatted-phone" type="text" min="0" class="form-control @error('phone') is-invalid @enderror" name="formatted-phone" value="{{ old('phone') }}" autofocus autocomplete="off" placeholder="+1 111 111 1111">
                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Password*') }}</label>
                            <div class="input-group col-md-6">
                                <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" autofocus autocomplete="off" placeholder="Enter Password">
                                <div class="input-group-prepend">
                                 <div class="input-group-text"><i class="fa fa-eye-slash" id="eye"></i></div>
                                </div>
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password*') }}</label>
                            <div class="input-group col-md-6">
                                <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" id="cnfpwd" name="password_confirmation" autofocus autocomplete="off" placeholder="Enter Confirm Password">
                                <div class="input-group-prepend">
                                    <div class="input-group-text"><i class="fa fa-eye-slash" id="eye-pass"></i></div>
                                </div>
                                <!-- <input id="password-confirm" type="password" class="form-control cnfpwd @error('password_confirmation') is-invalid @enderror" name="password_confirmation" autofocus autocomplete="off" placeholder="Confirm Password"> -->
                                @error('password_confirmation')
                                    <div class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
                        </div>

                        <h4>Business Information:</h4>
                        <hr>
                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Business Name*') }}</label>
                            <div class="col-md-6">
                                <input id="business_name" type="text" class="form-control @error('business_name') is-invalid @enderror" name="business_name" value="{{ old('business_name') }}" autocomplete="off" autofocus placeholder="Enter Business Name">
                                @error('business_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <input type="hidden" name="latitude" />
                        <input type="hidden" name="longitude" />

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Address*') }}</label>
                            <div id="pac-container" class="col-md-6">
                                <input id="ship-address" type="text" class="form-control @error('address') is-invalid @enderror" name="address" value="{{ old('address') }}" autocomplete="off" placeholder="Enter Address">
                                @error('address')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div id="map" style="width:100%;height:400px;" hidden></div>

                        <div id="infowindow-content" hidden>
                            <span id="place-name" class="title"></span><br />
                            <span id="place-address"></span>
                        </div>

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('City*') }}</label>
                            <div class="col-md-6">
                                <input id="locality" type="text" class="form-control @error('city') is-invalid @enderror" name="city" value="{{ old('city') }}" autocomplete="off" autofocus placeholder="Enter City">
                                @error('city')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('State*') }}</label>
                            <div class="col-md-6">
                                <input id="state" type="text" class="form-control @error('state') is-invalid @enderror" name="state" value="{{ old('state') }}" autocomplete="off" autofocus placeholder="Enter State">
                                @error('state')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Zip*') }}</label>
                            <div class="col-md-6">
                                <input id="postcode" type="text" class="form-control @error('zip') is-invalid @enderror" name="zip" value="{{ old('zip') }}" autocomplete="off" autofocus placeholder="Enter Zip Code">
                                @error('zip')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <!-- insert file -->
                      
                        <!-- insert file certificate -->
                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Business License / Legal Documents / Certificate of Insurance /Identity Card*') }}</label>
                            <div class="col-md-6">
                            
                                <div style="border: 1px solid #ced4da; padding: 5px;border-radius: 3px;">
                                    <input id="document" type="file" class="@error('document') is-invalid @enderror" name="document[]" multiple="" autocomplete="off" autofocus>
                                </div>
                                @error('document')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        
                    <!--    <div class="input-group hdtuto control-group lst increment" >
                        
                            <input type="file" name="document[]" class="myfrm form-control">
                            <div class="input-group-btn"> 
                                <button class="btn btn-success" type="button"><i class="fldemo glyphicon glyphicon-plus"></i>Add</button>
                            </div>
                            </div>
                            <div class="clone hide">
                            <div class="hdtuto control-group lst input-group" style="margin-top:10px">
                                <input type="file" name="document[]" class="myfrm form-control">
                                <div class="input-group-btn"> 
                                <button class="btn btn-danger" type="button"><i class="fldemo glyphicon glyphicon-remove"></i> Remove</button>
                                </div>
                            </div>
                        </div> -->

                        <div class="row mb-3">
                            <label class="col-md-4 col-form-label text-md-right">{{ __('Business Type*') }}</label>
                            <div class="col-md-6">
                                <select name="business_type" id="business_type" class="form-control @error('business_type') is-invalid @enderror">
                                    <!-- @foreach (Config::get('constants.business_type') as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach -->
                                    <!-- <option value="" disabled selected>Business Type</option> -->
                                    @foreach($business as $b)
                                    <option value="{{ $b->slug }}">{{ $b->name }}</option>
                                    @endforeach

                                    @error('business_type')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </select>
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">

                                <button type="submit" class="btn btn-primary" validate>
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body" style="text-align: center">
                                        <p> <i class="icon-cart" aria-hidden="true"></i> You have new order, Please Check </p>
                                    </div>
                                    <div class="modal-footer">
                                        <a href="#" class="btn btn-warning" id="order-redirection" style="margin-right: 175px;"> Ok, let me check</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal -->
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery-3.2.1.min.js') }} "></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAquzgo847shlU-SpPXLZMgShv6EW9pQmw&callback=initMap&libraries=places&v=weekly&channel=2" async> </script> -->

<script src="https://unpkg.com/imask"></script>

<script type="text/javascript">
    
    $(document).ready(function() {
      $(".btn-success").click(function(){ 
          var lsthmtl = $(".clone").html();
          $(".increment").after(lsthmtl);
      });
      $("body").on("click",".btn-danger",function(){ 
          $(this).parents(".hdtuto").remove();
      });
    });

    let autocomplete;
    let address1Field;
    let address2Field;
    let postalField;

    function initAutocomplete() {
        address1Field = document.querySelector("#ship-address");
        address2Field = document.querySelector("#address2");
        postalField = document.querySelector("#postcode");
        // Create the autocomplete object, restricting the search predictions to
        // addresses in the US and Canada.
        autocomplete = new google.maps.places.Autocomplete(address1Field, {
            componentRestrictions: {
                country: ["us", "ca"]
            },
            fields: ["address_components", "geometry"],
            types: ["address"],
        });
        address1Field.focus();
        // When the user selects an address from the drop-down, populate the
        // address fields in the form.
        autocomplete.addListener("place_changed", fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        const place = autocomplete.getPlace();
        let address1 = "";
        let postcode = "";

        // Get each component of the address from the place details,
        // and then fill-in the corresponding field on the form.
        // place.address_components are google.maps.GeocoderAddressComponent objects
        // which are documented at http://goo.gle/3l5i5Mr
        for (const component of place.address_components) {
            const componentType = component.types[0];

            switch (componentType) {
                case "street_number": {
                    address1 = `${component.long_name} ${address1}`;
                    break;
                }

                case "route": {
                    address1 += component.short_name;
                    break;
                }

                case "postal_code": {
                    postcode = `${component.long_name}${postcode}`;
                    break;
                }

                case "postal_code_suffix": {
                    postcode = `${postcode}-${component.long_name}`;
                    break;
                }
                case "locality":
                    document.querySelector("#locality").value = component.long_name;
                    break;
                case "administrative_area_level_1": {
                    document.querySelector("#state").value = component.short_name;
                    break;
                }

            }
        }

        address1Field.value = address1;
        postalField.value = postcode;
        // After filling the form with address components from the Autocomplete
        // prediction, set cursor focus on the second address line to encourage
        // entry of subpremise information such as apartment, unit, or floor number.
        address2Field.focus();
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAquzgo847shlU-SpPXLZMgShv6EW9pQmw&callback=initAutocomplete&libraries=places&v=weekly" async></script>

<script type="text/javascript">
        $(function(){
        $('#eye').click(function(){
            
                if($(this).hasClass('fa-eye-slash')){
                
                $(this).removeClass('fa-eye-slash');
                
                $(this).addClass('fa-eye');
                
                $('#password').attr('type','text');
                    
                }else{
                
                $(this).removeClass('fa-eye');
                
                $(this).addClass('fa-eye-slash');  
                
                $('#password').attr('type','password');
                }
            });
        });

     
        $(function(){
        $('#eye-pass').click(function(){
            
            if($(this).hasClass('fa-eye-slash')){
                
            $(this).removeClass('fa-eye-slash');
                
            $(this).addClass('fa-eye');
                
            $('#cnfpwd').attr('type','text');
                    
            }else{
                
                $(this).removeClass('fa-eye');
                
                $(this).addClass('fa-eye-slash');  
                
                $('#cnfpwd').attr('type','password');
                }
            });
        });

    var element = document.getElementById('formatted-phone');
    var maskOptions = {
        mask: '+{1}000-000-0000-[****]',
    };
    var mask = IMask(element, maskOptions);

    $formatted = document.getElementById('formatted-phone');

    $formatted.addEventListener('input', function (e) {
        console.log(e)
        document.getElementById('phone').value = mask.unmaskedValue;
    })

    var previousMarker;

    function initMap() {

        const map = new google.maps.Map(document.getElementById("map"), {
            center: {
                lat: 40.749933,
                lng: -73.98633
            },
            zoom: 13,
            mapTypeControl: false,
        });
        const card = document.getElementById("pac-card");
        const input = document.getElementById("pac-input");
        const biasInputElement = document.getElementById("use-location-bias");
        const strictBoundsInputElement = document.getElementById("use-strict-bounds");

        const options = {
            fields: ["formatted_address", "geometry", "name"],
            strictBounds: false,
            types: ["establishment"],
        };

        map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

        const autocomplete = new google.maps.places.Autocomplete(input, options);

        // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the
        // bounds option in the request.
        autocomplete.bindTo("bounds", map);

        const infowindow = new google.maps.InfoWindow();
        const infowindowContent = document.getElementById("infowindow-content");

        infowindow.setContent(infowindowContent);

        const marker = new google.maps.Marker({
            map,
            anchorPoint: new google.maps.Point(0, -29),
        });

        google.maps.event.addListener(map, "click", function(e) {

            if (previousMarker)
                previousMarker.setMap(null);

            latLng = e.latLng;

            console.log(e.latLng.lat());
            console.log(e.latLng.lng());

            if (marker && marker.setMap) {
                marker.setMap(null);
            }
            addMarker(e.latLng, map);

        });

        autocomplete.addListener("place_changed", () => {
            infowindow.close();
            marker.setVisible(false);

            const place = autocomplete.getPlace();

            console.log(place)

            $('input[name=latitude]').val(place.geometry.location.lat())
            $('input[name=longitude]').val(place.geometry.location.lng())

            enableModalBtn();

            if (!place.geometry || !place.geometry.location) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }

            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
            infowindowContent.children["place-name"].textContent = place.name;
            infowindowContent.children["place-address"].textContent =
                place.formatted_address;
            infowindow.open(map, marker);
        });

        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        function setupClickListener(id, types) {
            const radioButton = document.getElementById(id);

            radioButton.addEventListener("click", () => {
                autocomplete.setTypes(types);
                input.value = "";
            });
        }

        setupClickListener("changetype-all", []);
        setupClickListener("changetype-address", ["address"]);
        setupClickListener("changetype-establishment", ["establishment"]);
        setupClickListener("changetype-geocode", ["geocode"]);
        setupClickListener("changetype-cities", ["(cities)"]);
        setupClickListener("changetype-regions", ["(regions)"]);

        biasInputElement.addEventListener("change", () => {
            if (biasInputElement.checked) {
                autocomplete.bindTo("bounds", map);
            } else {
                // User wants to turn off location bias, so three things need to happen:
                // 1. Unbind from map
                // 2. Reset the bounds to whole world
                // 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
                autocomplete.unbind("bounds");
                autocomplete.setBounds({
                    east: 180,
                    west: -180,
                    north: 90,
                    south: -90
                });
                strictBoundsInputElement.checked = biasInputElement.checked;
            }

        });
        strictBoundsInputElement.addEventListener("change", () => {
            autocomplete.setOptions({
                strictBounds: strictBoundsInputElement.checked,
            });
            if (strictBoundsInputElement.checked) {
                biasInputElement.checked = strictBoundsInputElement.checked;
                autocomplete.bindTo("bounds", map);
            }

            input.value = "";
        });
    }

    // Adds a marker to the map.
    function addMarker(location, map) {
        // Add the marker at the clicked location, and add the next-available label
        // from the array of alphabetical characters.
        previousMarker = new google.maps.Marker({
            position: latLng,
            draggable: false,
            map: map,
        });
    }

    function enableModalBtn() {
        if ($('input[name=latitude]').val() != '' && $('input[name=longitude]').val() != '') {
            $("#submit-merchantsite").attr('disabled', false);
        } else {
            $("#submit-merchantsite").attr('disabled', true);
        }
    }

    $(function() {
        $('#demo-form').parsley().on('field:validated', function() {
                var ok = $('.parsley-error').length === 0;
                $('.bs-callout-info').toggleClass('hidden', !ok);
                $('.bs-callout-warning').toggleClass('hidden', ok);
            })
            .on('form:submit', function() {
                return false; // Don't submit form for this demo
            });
    });

</script>
@endsection