@extends('web.layouts.layout')

@section('css')
    <style>
        .show_password{
            position: absolute;
            right: 2%;
            top: 54%;
            font-size: 16px;
        }
    </style>
@endsection

@section('container_content')
    <!--Contents-->
    <main>
        <!-- -------------- register ----------------- -->
        <section class="register">
            <div class="container">
                <h2> <i class="fas fa-chevron-left"></i>{{__('merchants.create_new_account')}}</h2>
                @include('web.layouts.partial')
                <form action="{{route('merchant.doRegister')}}" method="post" enctype="multipart/form-data">
                    @csrf()
                    <input type="hidden" name="latitude" id="latitude" value="">
                    <input type="hidden" name="longitude" id="longitude" value="">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="register-form">
                                <div class="form-group">
                                    <label  for="name">{{__('merchants.merchant_name')}}</label>
                                    <input type="text" name="name" id="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" placeholder="{{__('merchants.name')}}" value="{{old('name', '')}}">
                                </div>
                                <div class="form-group">
                                    <label for="email">{{__('merchants.email')}}</label>
                                    <input type="email" name="email" id="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" placeholder="{{__('merchants.email')}}" value="{{old('email', '')}}">
                                </div>
                                <div class="form-group">
                                    <label for="about_me">{{__('merchants.merchant_details')}}</label>
                                    <textarea name="about_me" id="about_me" maxlength="200" class="form-control {{$errors->has('about_me') ? 'is-invalid' : ''}}">{{old('about_me', '')}}</textarea>
                                </div>
                                <div class="row">
                                    <div class="col-md-7" >
                                        <div class="form-group catg">
                                            <h6 class="mb-3 light">{{__('merchants.category')}}</h6>
                                            @foreach($categories as $key=> $row)
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" {{ in_array($row['category_id'], $merchantCategories) ? 'checked' : '' }} value="{{ $row['category_id'] }}" class="custom-control-input" id="category_{{ $key }}" name="categories[]">
                                                    <label class="custom-control-label text-white" for="category_{{ $key }}"> {{ $row->name }} </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="profile-img mb-4">
                                            <img id="img-profile" class="img-fluid image-profile" src="{{asset('assets/web/images/register_image.jpeg')}}" alt="">
                                            <a href="#"><i class="far fa-edit"></i></a>
                                            <input type="file" name="photo" class="custom-file-input" id="input-profile">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="register-form">
                                <div class="form-group">
                                    <label for="location">{{__('merchants.choose_your_location')}}</label>
                                    <input type="text" name="location" id="location" class="form-control {{ $errors->has('location') ? 'is-invalid' : '' }}" placeholder="{{__('merchants.location')}}" value="{{old('location', '')}}">
                                    <!-- Button trigger modal -->
                                    <button type="button" class="butn small modal-btn" data-toggle="modal" data-target="#exampleModalCenter">
                                        <span>{{__('merchants.your_location')}}</span>
                                    </button>
                                </div>
                                <div class="form-group">
                                    <label for="phone">{{__('merchants.phone')}}</label>
                                    <input type="tel" name="phone" id="phone" class="form-control {{ $errors->has('phone') ? 'is-invalid' : '' }}" placeholder="{{__('merchants.phone')}}" value="{{old('phone', '')}}">
                                </div>
                                <div class="form-group">
                                    <label for="password">{{__('merchants.password')}}</label>
                                    <input type="password" name="password" id="password" class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" placeholder="*****">
                                    <a class="show_password" href="#"><i class="fa fa-eye-slash"></i></a>
                                </div>
                                <div class="form-group">
                                    <label for="password_confirmation">{{__('merchants.confirm_password')}}</label>
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control {{ $errors->has('password_confirmation') ? 'is-invalid' : '' }}" placeholder="*****">
                                </div>
                                <div class="form-group">
                                    <label>{{__('merchants.licence')}}</label>
                                    <div class="file-upload">
                                        <input class="file-upload__input" type="file" name="commercial_image" id="myFile">
                                        <button class="file-upload__button form-control file-upload__label" type="button"></button>
                                    </div>
                                </div>
                                <div class="text-center mt-4">
                                    <button class="butn color"><span>{{__('merchants.register')}}</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- -------------- banner1 ----------------- -->
        <!-- Modal -->
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">{{__('merchants.choose_your_location')}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div style="border:0; height: 400px; width: 100%" class="map" id="map"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="butn color small save_location"><span>{{__('merchants.save_location')}}</span></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- -------------- banner1 ----------------- -->

    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
    <script src="{{asset('assets/web/js/register.js')}}"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5HuBEjkPPxQH4c7Nhfx2-u5XXCtSIzUk&callback=initMap&libraries=&v=weekly" defer></script>

    <script>
        // The following example creates a marker in Stockholm, Sweden using a DROP
        // animation. Clicking on the marker will toggle the animation between a BOUNCE
        // animation and no animation.

        var marker;
        var save_location = $('.save_location');
        function initMap() {
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: parseFloat(lat) , lng: parseFloat(lng) }
            });

            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: { lat: parseFloat(lat) , lng: parseFloat(lng) }
            });

            marker.addListener("dragend", function (map) {
                let lat = map.latLng.lat(), lng = map.latLng.lng();
                localStorage.setItem('lat', lat);
                localStorage.setItem('lng', lng);
                $('#latitude').val(lat);
                $('#longitude').val(lng);
                var geocoder = new google.maps.Geocoder();
                var infowindow = new google.maps.InfoWindow()

                google.maps.event.addListener(marker, 'dragend', function() {
                    infowindow.close();
                });

                var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
                geocoder.geocode({ location: latlng }, function(results, status) {
                    if (status === "OK") {
                        if (results[0]) {
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                            document.getElementById('location').value = results[0].formatted_address
                        } else {
                            window.alert("No results found");
                        }
                    } else {
                        window.alert("Geocoder failed due to: " + status);
                    }
                });
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
        }

        save_location.click(function (map) {
            let lat = localStorage.getItem('lat'),
                lng = localStorage.getItem('lng');
            localStorage.setItem('lat', lat);
            localStorage.setItem('lng', lng);
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            var latlng = { lat: parseFloat(lat), lng: parseFloat(lng) };
            geocoder.geocode({ location: latlng }, function(results, status) {
                if (status === "OK") {
                    if (results[0]) {
                        infowindow.setContent(results[0].formatted_address);
                        infowindow.open(map, marker);
                        document.getElementById('location').value = results[0].formatted_address
                    } else {
                        window.alert("No results found");
                    }
                } else {
                    window.alert("Geocoder failed due to: " + status);
                }
            });
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }

            $('.modal').modal('hide')
        });
    </script>
@endsection