@extends('user.layouts.user')

@section('content')
@include('user.includes.banner')
<div class="business-block text-center section">
    <div class="center">
        <h3>Browse Businesses by <span>Category</span></h3>
        <p>{{ get_setting('browse-businesses-by-category')}}</p>
        <ul>
            <li>
                <a href="javascript:void(0)" class="service_category" data="{{base64_encode(2)}}">
                    <img src="images/nightclub.jpg" alt="">
                    <h5>Night Life</h5>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" class="service_category" data="{{base64_encode(1)}}">
                    <img src="images/restaurant.jpg" alt="">
                    <h5>Restaurants</h5>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" class="service_category" data="{{base64_encode(3)}}">
                    <img src="images/home-service.jpg" alt="">
                    <h5>Home Services</h5>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- business block -->
<div class="collection-block texture-bg section">
    <div class="center">
        <h3>Recent <span>Collection</span></h3>
        <ul class="product-grid "  id="res_night_grid">

        </ul>
        <div class="view-btn text-center">
            <a class="btn" href="#" id="res_night_all">View Restaurants</a>
            <a class="btn" href="#" id="night_all"> View NightLife </a>
        </div>

    </div>
</div>
<!-- collcetion block -->
<div class="community-block section" style="background-image: url('images/review-bg.jpg')";>
    <div class="community-content">
        <h3>Help the <span>Community</span></h3>
        <p>Find Lifeple reviews helpful? Start helping others by sharing your experience.</p>
        <a class="btn" href="#">Start Your First Review</a>
    </div>
</div>
<!-- community block -->
<div class="home-service-block section">
    <div class="center">
        <h3>Find the <span>Home Services</span></h3>
        <ul class="product-grid" id="prof_service_grid">

        </ul>
        <div class="view-btn text-center">
            <a class="btn" href="javascript:void(0)" id="prof_service_all" >View all</a>
        </div>
        <div class="advertisment-block text-center">
            <img src="images/advertisment-banner.png" alt="">
        </div>
    </div>
</div>
<!-- home service block -->
<div class="app-block texture-bg section">
    <div class="center">
        <div class="left-block">
            <div class="mobile-image">
                <img src="images/mobile.png" alt="">
            </div>
        </div>
        <div class="right-block">
            <h2>Lifeple in Your Pocket</h2>
            <p>We’ll send you a link, open it on your phone to download the app.</p>
            <div class="submit-block">
                <input type="text" name="" id="" placeholder="Enter your email address">
                <input type="submit" value="Send Link">
            </div>
            <ul>
                <li><a href="#"><img src="images/img-appstore.png" alt=""></a></li>
                <li><a href="#"><img src="images/img-googleplay.png" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

<form method="post" id="service_search_form" action="">
    @csrf
    <input type="hidden" name="user_lat" value="" >
    <input type="hidden" name="user_long"  value="" >
    <input type="hidden" name="short_by" value="">
    <input type="hidden" name="service_id" value="">
    <input type="hidden" name="autocomplete_search" placeholder="San Francisco, CA" value="">
</form>
<!-- appstore googlepay section -->
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src='https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.min.js'></script>

<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<script  type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAYTlKiMDnDt-rv-ocbSg7qm73A0fqsJ8c"></script>
<script type='text/javascript'>

$(document).ready(function () {

    getLocation();

    $(".service_category").on("click", function () {

        var service_id = $(this).attr('data');
        var user_lat = $("#user_lat").val();
        var user_long = $("#user_long").val();
        var short_by = $("#short_by").val();
        var autocomplete_search = $("#autocomplete_search").val();

        $("#service_search_form").find('[name=user_lat]').val(user_lat);
        $("#service_search_form").find('[name=user_long]').val(user_long);
        $("#service_search_form").find('[name=short_by]').val(short_by);
        $("#service_search_form").find('[name=service_id]').val(service_id);

        $("#service_search_form").find('[name=autocomplete_search]').val(autocomplete_search);

        if (service_id == "MQ==" || service_id == "Mg==") {
            $("#service_search_form").attr("action", "{{route('frontend.rest_fillter')}}");
        } else if (service_id == "Mw==") {
            $("#service_search_form").attr("action", "{{route('frontend.prof_service_filter')}}");
        }

        $("#service_search_form").submit();
    });


    $("#prof_service_all").on("click", function () {
        var user_lat = $("#user_lat").val();
        var user_long = $("#user_long").val();
        var short_by = $("#short_by").val();
        var autocomplete_search = $("#autocomplete_search").val();
        var service_id = 'Mw==';

        $("#service_search_form").find('[name=user_lat]').val(user_lat);
        $("#service_search_form").find('[name=user_long]').val(user_long);
        $("#service_search_form").find('[name=short_by]').val(short_by);
        $("#service_search_form").find('[name=service_id]').val(service_id);
        $("#service_search_form").find('[name=autocomplete_search]').val(autocomplete_search);
        $("#service_search_form").attr("action", "{{route('frontend.prof_service_filter')}}");

        $("#service_search_form").submit();

    });


    $("#res_night_all").on("click", function () {
        var user_lat = $("#user_lat").val();
        var user_long = $("#user_long").val();
        var short_by = $("#short_by").val();
        var autocomplete_search = $("#autocomplete_search").val();
        var service_id = 'MQ==';

        $("#service_search_form").find('[name=user_lat]').val(user_lat);
        $("#service_search_form").find('[name=user_long]').val(user_long);
        $("#service_search_form").find('[name=short_by]').val(short_by);
        $("#service_search_form").find('[name=service_id]').val(service_id);
        $("#service_search_form").find('[name=autocomplete_search]').val(autocomplete_search);
        $("#service_search_form").attr("action", "{{route('frontend.rest_fillter')}}");

        $("#service_search_form").submit();

    });

    $("#night_all").on("click", function () {
        var user_lat = $("#user_lat").val();
        var user_long = $("#user_long").val();
        var short_by = $("#short_by").val();
        var autocomplete_search = $("#autocomplete_search").val();
        var service_id = 'Mg==';

        $("#service_search_form").find('[name=user_lat]').val(user_lat);
        $("#service_search_form").find('[name=user_long]').val(user_long);
        $("#service_search_form").find('[name=short_by]').val(short_by);
        $("#service_search_form").find('[name=service_id]').val(service_id);
        $("#service_search_form").find('[name=autocomplete_search]').val(autocomplete_search);
        $("#service_search_form").attr("action", "{{route('frontend.rest_fillter')}}");

        $("#service_search_form").submit();

    });


    $("#frontend_search_form").click(function () {


        var serv_url = "{{route('frontend.get_keyword_search_listing')}}";


//        if ($('#user_lat').val() == '')
//        {
//            getLocation();
//            load_div();
//            setTimeout(function () {
//
//                $("#home_search_form").attr('action', serv_url);
//                $("#home_search_form").submit();
//            }, 3000);
//        } else {

        load_div();
        $("#home_search_form").attr('action', serv_url);
        $("#home_search_form").submit();

//        }

    });
    function load_div() {
        $('#loding_div').modal('show');
        $('#loding_div').modal('show').find('.close-modal').css("display", "none");
    }


    $('#keyword_search').autocomplete({
        source: function (request, response) {
            if ($("#keyword_search").val() == '') {
                return false;
            }
            $.ajax({
                url: "{{ route('frontend.getlist_autocomplete') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                    '_token': $('meta[name="csrf_token"]').attr('content'),
                },
                data: {keyword_search: $("#keyword_search").val(), user_lat: $('#user_lat').val(), user_long: $('#user_long').val()},
                success: function (data) {
//                    console.log(data);

                    if (!data)
                        return false;
                    var json = $.parseJSON(data);
//                    alert(json);
                    response($.map(json, function (item) {
                        return {
                            name: item.keyword_name,
                            type: item.type
                        };
                    }));
                }
            });

        }
    })
            .autocomplete().data("ui-autocomplete")._renderItem = function (ul, item)
    {
        ul.addClass('home_key_search');
        return $('<li class="ui-menu-item" type_search="' + item.type + '" rel="' + item.name + '" ">')
                .append(item.name)
                .appendTo(ul);
    };


    $('body').on('click', '.ui-menu-item', function ()
    {
        var type = $(this).attr('type_search');
        //alert(type);
        var rel = $(this).attr('rel');
        $('#keyword_search').val(rel);
        $('#type_search').val(type);
        $("#auto_search").trigger("click");
        $(".ui-menu-item").hide();

    });



    $('body').on('keyup', '#autocomplete_search', function ()
    {
        if ($('#autocomplete_search').val() == '')
        {
            $('#user_lat').val('');
            $('#user_long').val('');
        }
    });


    setTimeout(function () {

// for showing res night list in dashboard wth subscription

        $.ajax({
            url: "{{ route('frontend.resnightSubsList') }}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                '_token': $('meta[name="csrf_token"]').attr('content'),
            },
            data: {user_lat: $('#user_lat').val(), user_long: $('#user_long').val()},
            success: function (data) {
                console.log(data);

                if (!data)
                    return false;
                $("#res_night_grid").html(data);
            }
        });


// for showing professional servicce list in dashboard wth subscription
        $.ajax({
            url: "{{ route('frontend.profServiceSubsList') }}",
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content'),
                '_token': $('meta[name="csrf_token"]').attr('content'),
            },
            data: {user_lat: $('#user_lat').val(), user_long: $('#user_long').val()},
            success: function (data) {
//                console.log(data);

                if (!data)
                    return false;

                $("#prof_service_grid").html(data);
            }
        });


    }, 3000);



});
</script>
<script>
    var user_lat = document.getElementById("user_lat");
    var user_long = document.getElementById("user_long");
    function getLocation() {
//         e.preventDefault();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
//        e.preventDefault();
        user_lat.value = position.coords.latitude;
        user_long.value = position.coords.longitude;
        var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var geocoder = geocoder = new google.maps.Geocoder();
        geocoder.geocode({'latLng': latlng}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    $("#autocomplete_search").val(results[1].formatted_address);

//                    alert("Location: " + results[1].formatted_address);
                }
            }
        });

//       console.log(a);
//        $("#last_event").val('nearby');
//        $("#res_night_search").submit();
    }

</script>



<script type='text/javascript'>
    google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() {
        var input = document.getElementById('autocomplete_search');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.addListener('place_changed', function () {
            var place = autocomplete.getPlace();
            // place variable will have all the information you are looking for.
            $('#user_lat').val(place.geometry['location'].lat());
            $('#user_long').val(place.geometry['location'].lng());
            $("#last_event").val('auto');
//            $("#res_night_search").submit();
        });
    }
</script>
<script>
    // This is the service worker with the Cache-first network

// Add this below content to your HTML page, or add the js file to your page at the very top to register service worker

// Check compatibility for the browser we're running this in
if ("serviceWorker" in navigator) {
  if (navigator.serviceWorker.controller) {
    console.log("[PWA Builder] active service worker found, no need to register");
  } else {
    // Register the service worker
    navigator.serviceWorker
      .register("pwabuilder-sw.js", {
        scope: "./"
      })
      .then(function (reg) {
        console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
      });
  }
}

</script>

@endsection