@extends('layout.main')

@section('page-css')
    <link rel="stylesheet" href="{{ asset('assets/plugins/owl.carousel/assets/owl.carousel.css') }}">
@endsection

@section('main')
    <div class="modern-top-intoduce-section">

        <div class="container">
            <div class="row">

                <div class="col-md-12">
                    <div class="modern-top-hom-cat-section">

                        <div class="modern-home-search-bar-wrap">
                            <div class="search-wrapper">
                                <h3> <i class="fa fa-home"></i> @lang('app.find_your_property')</h3>

                                <form class="form-inline" action="{{ route('listing') }}" method="get">
                                    <div class="form-group">
                                        <div class="input-container ">
                                            <!-- <i class="fas fa-search icon"></i> -->
                                            <!--value = locationofsearcher is a variable-->
                                            <!--<input type="text"  autocomplete="off" class="form-control property-find" id="searchTerms" name="q" value="locationofsearcher" placeholder="Enter Address ,City ,Country" />-->
                                            <input type="text"  autocomplete="off" class="form-control property-find" id="searchTerms" name="q"  placeholder="Enter Address, Suburb, City or Country" />
                                        </div>
                                    </div>
<!--
                                    
-->
                                    <button type="submit" class="btn theme-btn property-find-button"> <i class="fa fa-search"></i> @lang('app.search_property')</button>
                                </form>

                                
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

            </div>
        </div>
    </div>
    <!--<div class='home-intro-area'>-->
    <!--    <h1>We Make Finding Your Dream Home Easier</h1>        -->
    <!--</div>-->
    
    <div class="app-info-home" style="margin-bottom:100px;margin-top:100px;">
        <!--<h1>Get Our App</h1>-->
        <div class="app-info-home-images">
            <a href="https://apps.apple.com/zw/app/kupeza-real-estate-platform/id1502322962">
                <img src='{{ asset('assets/svg/AppStore-Badge.png') }}'>
            </a>
        </div>
        <div class="app-info-home-images">
            <a href="https://play.google.com/store/apps/details?id=zm.co.kupeza.kupeza">
                <img src='{{ asset('assets/svg/GooglePlay-Badge.png') }}'>
            </a>
        </div>
        
    </div>
    
   <div class='container home-page-card-container'>
       <div class='row home-page-card-row'>
           <div class='col-md-4'>
               <a href="{{ route('listing') }}" style="outline:none"><div class="card kupeza-home-card">
                  <div class="card-md-img home-page-card-icon">
                    <img style="width:100%;" src='{{ asset('assets/img/kupeza3.jpg') }}'> 
                  </div>
                  <div class="card-body home-page-card-text">
                     <h3>Find Your Dream Home!</h3>  
                     <p>View our vast list of properties</p>
                     <p class="card-button">GET STARTED</p>
                  </div>
                </div></a>
           </div>
           <div class='col-md-4'>
            <a href="{{route('create_ad')}}" style="outline:none"><div class="card kupeza-home-card">
                  <div class="card-md-img home-page-card-icon">
                    <img style="width:100%;" src='{{ asset('assets/img/kupeza1.jpg') }}'>
                  </div>
                  <div class="card-body home-page-card-text">
                     <h3>Are You an Agent or Broker</h3>  
                     <p>Come and list your property for free</p>
                     <p class="card-button">GET STARTED</p>
                  </div>
               </div></a>
           </div>
           <div class='col-md-4'>
            <a href="{{route('create_ad')}}" style="outline:none"><div class="card kupeza-home-card">
                  <div class="card-md-img home-page-card-icon">
                    <img style="width:100%;" src='{{ asset('assets/img/kupeza2.jpg') }}'> 
                  </div>
                  <div class="card-body home-page-card-text">
                     <h3>Are You a Property Owner</h3>  
                     <p>Sell or Rent out your property for free</p>
                     <p class="card-button">GET STARTED</p>
                  </div>
               </div></a>
           </div>
       </div>
   </div>

   <div class="home-styled-underline"></div>

    <div class="kupeza-info-text">
        <p>
            Kupeza serves as a one stop real-estate website designed to help our users to find their Perfect Home.
            Whether you are looking to buy, rent or invest in property our sophisticated search tools will help you find exactly what you are looking for.
            Our Property Catalogue is updated Daily by the Registered agents that have joined our website. Give Kupeza a try Today!
        </p>
        <p id='useragent'></p>
    </div>

    <div class="home-styled-underline"></div>
    

    <div class="modern-post-ad-call-to-cation">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>@lang('app.want_something_sell_quickly')</h1>
                    <a href="{{route('create_ad')}}" class="btn btn-info btn-lg">@lang('app.post_an_ad')</a>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-js')
    <script>
        var isPhone = !! navigator.userAgent.match(/iphone|android/ig) || false;
        
        
        // document.getElementById('useragent').textContent = isPhone;
        if(isPhone){
            document.getElementById('mobilePhonePopUp').style.display = 'block';
            
            
        }
        
        document.getElementById('download-later').addEventListener("click", function(){
            document.getElementById('mobilePhonePopUp').style.display = 'none';
        });
    </script>
    <script>
        function generate_option_from_json(jsonData, fromLoad){
            //Load Category Json Data To Brand Select
            if(fromLoad === 'country_to_state'){
                var option = '';
                if (jsonData.length > 0) {
                    option += '<option value="" selected> @lang('app.select_state') </option>';
                    for ( i in jsonData){
                        option += '<option value="'+jsonData[i].id+'"> '+jsonData[i].state_name +' </option>';
                    }
                    $('#state_select').html(option);
                    $('#state_select').select2();
                }else {
                    $('#state_select').html('<option value="" selected> @lang('app.select_state') </option>');
                    $('#state_select').select2();
                }
                $('#loaderListingIcon').hide('slow');
            }
        }

        $(document).ready(function(){
            $('[name="country"]').change(function(){
                var country_id = $(this).val();
                $('#loaderListingIcon').show();
                $.ajax({
                    type : 'POST',
                    url : '{{ route('get_state_by_country') }}',
                    data : { country_id : country_id,  _token : '{{ csrf_token() }}' },
                    success : function (data) {
                        generate_option_from_json(data, 'country_to_state');
                    }
                });
            });
        });
    </script>
    
    <script>

var placeSearch, autocomplete;



function initAutocomplete() {

  autocomplete = new google.maps.places.Autocomplete(
      document.getElementById('searchTerms'), {types: ['geocode']});

  autocomplete.setFields(['address_component']);
    autocomplete.setComponentRestrictions(
            {'country': ['zm']});

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

function fillInAddress() {
  var place = autocomplete.getPlace();



}


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBv335_B2iABL3br4duZulkby226FJn0L4&libraries=places&callback=initAutocomplete"
        async defer></script>
@endsection