@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('master/master.customers')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{$alias}}/home">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{{$alias}}/customers">{{trans('master/master.customers')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($customer) && ($customer->id))
                        {{trans('master/master.edit_customer')}}
                    @else
                        {{trans('master/master.add_new_customer')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
{!! Form::model($customer, ['method' => 'post', 'files' => 'true']) !!}
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.customers_details')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_customers_details')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step" data-target="#account-details-vertical" role="tab" id="account-details-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">2</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.company_address')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_company_address')}}</span>
                        </span>
                    </button>
                </div>
                <div class="step contractor" data-target="#contractor-details-vertical" role="tab" id="contractor-details-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">3</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">{{trans('master/master.company_geo_address')}}</span>
                            <span class="bs-stepper-subtitle">{{trans('master/master.add_company_geo_address')}}</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.customers_details')}}</h5>
                        <small class="text-muted">{{trans('master/master.enter_customers_details')}}</small>
                    </div>
                    <input type="hidden" name="organization_id" value="{{$organization->id}}">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="name">{{trans('master/master.name')}} <span class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('name', isset($customer) && $customer->name ? $customer->name : old('name'), ['class' => 'form-control', 'id' => 'name']) !!} {!! $errors->first('name', '
                                    <label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>

                        <div class="col-md-6">
							<div class="mb-1">
								<label class="form-label" for="mobile">{{trans('master/master.mobile_number')}}</label><span class="mendatory-field text-danger">*</span>
                                <div class="d-flex">
                                    <div class="btn-group dropup dropdown-icon-wrapper">
                                        <select class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split pr-1 select2" name="dial_code" id="dial_code">
                                            @foreach($countries as $country)
                                                <option value="{{$country->dial_code}}" @if(isset($customer->dial_code)) @if(($customer->dial_code == $country->dial_code) || (old('dial_code') == $country->dial_code)) selected @endif @elseif(($country->dial_code)=='+91') selected @endif>
                                                    {{$country->code}} ({{$country->dial_code}})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="input-group input-group-merge ">
								        <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true" onKeyPress="if(this.value.length==15) return false;" id="mobile" name="mobile" class="form-control {{{$errors->has('mobile') ? 'error' : ''}}}" placeholder="Enter Mobile Number" value="{{ isset($customer) && $customer->mobile ? $customer->mobile : old('mobile') }}"/>
                                    </div>
                                </div>
								{!! $errors->first('mobile','<label id="basic-default-error" for="mobile" class="error">:message</label>')!!}
							</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
							<div class="mb-1">
								<label class="form-label" for="mobile">{{trans('master/master.email_id')}}</label>
								<input type="email" id="email" name="email" class="form-control {{{$errors->has('email') ? 'error' : ''}}}" placeholder="Enter Email ID" value="{{ isset($customer) && $customer->email ? $customer->email : old('email') }}"/>
								{!! $errors->first('email','<label id="basic-default-error" for="email" class="error">:message</label>')!!}
							</div>	
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1">
                                <label class="form-label" for="is_contractor">{{trans('master/master.company_name')}} </label>
                                {!! Form::text('company_name', isset($customer->company_name) ? $customer->company_name : old('company_name'), ['class' => 'form-control', 'id' => 'company_name']) !!} 
                                {!! $errors->first('company_name','<label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
							<div class="mb-1">
								<label class="form-label" for="employee_id">{{trans('master/master.customer_access_to')}} </label>
								<select class="form-control select2 select2UI" id="employee_id" name="employee_id[]" multiple>
                                    @foreach($employees as $employee)
                                        <option value="{{$employee->id}}" @if((!is_null($customerAccessEmployees) && in_array($employee->id, $customerAccessEmployees)) || (!empty(old('employee_id')) && in_array($employee->id, old('employee_id')))) selected @endif>{{ ucfirst($employee->name).' ('.$employee->employee_code.')' }}</option>
                                    @endforeach
                                </select>
                                {!! $errors->first('employee_id', '<label class="error" for="employee_id">:message</label>')!!}
							</div>	
                        </div>
                    
                        <div class="col-md-6">
                            <div class="mb-1">
                                <label class="form-label">{{trans('master/master.status')}}</label>
                                <select class="form-control select2" id="status" name="status">
                                    @foreach($customerStatus as $val)
                                        <option value="{{$val}}"  @if(($customer->status == $val) || (old('status') == $val)) selected @elseif($val=="active") selected @endif>{{ ucfirst($val) }}</option>
                                    @endforeach
                                </select>
                                {!! $errors->first('status', '<label class="error" for="status">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="button" class="btn btn-primary btn-next">
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="account-details-vertical" class="content position-relative" role="tabpanel" aria-labelledby="account-details-vertical-trigger" style="height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.company_address')}}</h5>
                        <small>{{trans('master/master.enter_company_address')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('company_address') ? 'has-error' : '' }}}">
                                <label  class="form-label" for="company_address">{{ trans('master/master.address') }}</label> 
                                {!! Form::text('company_address', isset($customer->company_address) && $customer->company_address ? $customer->company_address : old('company_address'), ['class' => 'form-control', 'id' => 'company_address']) !!}
                                {!! $errors->first('company_address', '<label class="error" for="company_address">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{ trans('master/master.country') }}</label>
                            <select class="form-control select2" id="country_id" name="country_id" onchange="getState(this.value)" >
                                <option value="">Select Country</option>
                                @foreach($countries as $country)
                                    <option value="{{$country->id}}" @if(isset($customer->country_id) && ($customer->country_id == $country->id) || (old('country_id') == $country->id)) selected @endif>
                                        {{$country->name}}
                                    </option>
                                @endforeach
                            </select> {!! $errors->first('country', '<label class="error" for="country">:message</label>')!!}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{ trans('master/master.state') }}</label>
                            <select class="form-control select2" id="state_id" name="state_id" onchange="getCity(this.value)" >
                                <option value="">Select State</option>
                                @foreach($states as $state)
                                    <option value="{{$state->id}}" @if(isset($customer->state_id) && ($customer->state_id == $state->id) || (old('state_id') == $state->id)) selected @endif>
                                        {{$state->name}}
                                    </option>
                                @endforeach   
                            </select> {!! $errors->first('state_id', '<label class="error" for="state">:message</label>')!!}
                        </div>
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{ trans('master/master.city') }}</label>
                            <select class="form-control select2" id="city_id" name="city_id" >
                                <option value="">Select City</option>
                                @foreach($cities as $city)
                                    <option value="{{$city->id}}" @if(isset($customer->city_id) && ($customer->city_id == $city->id) || (old('city_id') == $city->id)) selected @endif>
                                        {{$city->name}}
                                    </option>
                                @endforeach
                            </select> {!! $errors->first('city_id', '<label class="error" for="city">:message</label>')!!} 
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{ trans('master/master.pincode') }}</label> {!! Form::text('pincode', isset($customer->pincode) ? $customer->pincode : old('pincode'), ['class' => 'form-control', 'id' => 'pincode']) !!} {!! $errors->first('pincode','<label class="error" for="pincode">:message</label>')!!}
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('is_head_office') ? 'has-error' : '' }}}"><br>
                                <input type="checkbox" name="is_head_office" id="is_head_office" value="1" {{ isset($customer->is_head_office) && $customer->is_head_office == "1" ? 'checked' : '' }} class="form-check-input">
                                <label class="form-label"> {{ trans('master/master.is_head_office') }}</label>
                                {!! $errors->first('is_head_office', '<label class="error" for="is_head_office">:message</label>')!!} 
                            </div>
                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev">
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="button" class="btn btn-primary btn-next">
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.next')}}</span>
                                <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="contractor-details-vertical" class="content position-relative" role="tabpanel" aria-labelledby="contractor-details-vertical-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">{{trans('master/master.company_geo_address')}}</h5>
                        <small>{{trans('master/master.enter_company_geo_address')}}</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1">
								<label class="form-label" for="geo_address">{{ trans('master/master.address') }}</label>
                                {!! Form::text('geo_address', isset($customer) && $customer->geo_address ? $customer->geo_address : old('geo_address'), ['class' => 'form-control', 'id' => 'geo_address', 'onChange' => 'geolocate()']) !!}
                                {!! $errors->first('geo_address', '<label class="control-label" for="geo_address">:message</label>')!!}
                            </div>
                        </div>
						<div class="col-md-6">
							<div class="mb-1">
								<label class="form-label" for="geo_latitude">{{ trans('master/master.latitude') }}</label>
                                {!! Form::text('geo_latitude', isset($customer) && $customer->geo_latitude ? $customer->geo_latitude : old('geo_latitude'), ['class' => 'form-control', 'id' => 'geo_latitude']) !!}
                                {!! $errors->first('geo_latitude', '<label class="error" for="geo_latitude">:message</label>')!!}
							</div>
						</div>
                    </div>
					<div class="row">
						<div class="col-md-6">
							<div class="mb-1">
								<label class="form-label" for="geo_longitude">{{ trans('master/master.longitude') }}</label>
                                {!! Form::text('geo_longitude', isset($customer) && $customer->geo_longitude ? $customer->geo_longitude : old('geo_longitude'), ['class' => 'form-control', 'id' => 'geo_longitude']) !!}
                                {!! $errors->first('geo_longitude', '<label class="error" for="geo_longitude">:message</label>')!!}
							</div>
						</div>
                        <div class="col-md-6">
                            <div class="mb-1">
								<label class="form-label">{{ trans('master/master.radius') }}</label>
                                {!! Form::text('radius_in_meter', 
                                    isset($customer) && $customer->radius_in_meter ? $customer->radius_in_meter : old('radius_in_meter'), 
                                    ['class' => 'form-control',
                                    'id' => 'radius_in_meter']) 
                                !!}
                                {!! $errors->first('radius_in_meter', '<label class="error" for="radius_in_meter">:message</label>')!!}
                            </div>
                        </div>
                    </div>
					<div class="row">
						<div class="col-md-8">
                            <div class="form-group {{{ $errors->has('geo_address') ? 'has-error' : '' }}}">
                                <div id="map" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div><br><br><br><br>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" class="btn btn-outline-secondary btn-prev">
                                <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                <span class="align-middle d-sm-inline-block d-none">{{trans('common/common.previous')}}</span>
                            </button>
                            <button type="submit" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('common/common.submit')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
{!! Form::close() !!} 
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('app.js_google_map_key')}}&callback=initMap&libraries=drawing,places&v=weekly" defer></script>

<script type="text/javascript">
   function getState (country_id) {
        var url = "/ajax/states";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "country_id": country_id},
            success: function (data) {
                op = '<option value="">Select State</option>';
                $.each(data,function(key,value){
                    op += '<option value='+key+'>'+value+'</option>';
                    
                });
                $('#state_id').html(op);
            }
        });
    }
    function getCity (state_id) {
        var url = "/ajax/cities";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "state_id": state_id},
            success: function (data) {
                op = '<option value="">Select City</option>';
                $.each(data,function(key,value){
                    op += '<option value='+key+'>'+value+'</option>';
                    
                });
                $('#city_id').html(op);
            }
        });
    }
    $(document).ready(function() {
        if ($('#country_id').val() && !$('#state_id').val()) {
            getState($('#country_id').val());
        }
    });

    $(document).ready(function() {

        $("#country-id").change(function(){
            if ($('#country-id').val())) {
                getState($('#country-id').val());
                $('#city-id').val('').change();
            }
            
        });
        $("#state-id").change(function(){
            if ($('#state-id').val())) {
                getCity($('#state-id').val());
                
            }
            
        });
    });
</script>
<script type="text/javascript">
    var autocomplete;
    var gMap;
    var marker;
    var all_overlays = [];

    var geoLocation = {
        lat: 28.6294015,
        lng: 77.4406144
    };

    var radius = '';

    var geoPolygon = null;

    function initMap() {

        if ($('#geo_latitude').val()) {
            geoLocation = {
                lat: parseFloat($('#geo_latitude').val()),
                lng: parseFloat($('#geo_longitude').val())
            };
        }

        gMap = new google.maps.Map(document.getElementById("map"), {
            center: geoLocation,
            zoom: 17,
        });
        const drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.POLYLINE,
                ],
            },
            circleOptions: {
                fillColor: "#ffff00",
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1,
            },
        });

        const input = document.getElementById("geo_address")

        autocomplete = new google.maps.places.Autocomplete(
            document.getElementById("geo_address")
        );

        autocomplete.bindTo("bounds", gMap);

        autocomplete.addListener("place_changed", updateMap);

        marker = new google.maps.Marker({
            position: geoLocation,
            map: gMap,
            draggable:true
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            $("#geo_latitude").val(evt.latLng.lat().toFixed(6));
            $("#geo_longitude").val(evt.latLng.lng().toFixed(6));
            gMap.panTo(evt.latLng);
        });

        // centers the map on markers coords
        gMap.setCenter(marker.position);
        // adds the marker on the map
        marker.setMap(gMap);

        var radius = parseFloat($('#radius_in_meter').val());
        var circle = new google.maps.Circle({
            center: geoLocation,
            map: gMap,
            radius: radius,          // IN METERS.
            fillColor: '#FF6600',
            fillOpacity: 0.3,
            strokeColor: "#FFF",
            strokeWeight: 0         // DON'T SHOW CIRCLE BORDER.
        });

    }

    function removeOverlay() {

        if (geoPolygon) {
            geoPolygon.setMap(null);
        }

        for (var i = 0; i < all_overlays.length; i++) {
            all_overlays[i].overlay.setMap(null);
        }
        all_overlays = [];

        $('#geo_boundaries').val('[]');
    }

    function updateMap() {

        marker.setVisible(false);
        removeOverlay();
        const place = autocomplete.getPlace();

        console.log('here', place.geometry.location);

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

        $('#geo_latitude').val(place.geometry.location.lat())
        $('#geo_longitude').val(place.geometry.location.lng())

    }

    function geolocate() {
        if (navigator.geolocation) {
            removeOverlay();

            navigator.geolocation.getCurrentPosition((position) => {
                geoLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                };
                const circle = new google.maps.Circle({
                    center: geoLocation,
                    radius: position.coords.accuracy,
                });
                gMap.setCenter({
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                });
                $('#geo_latitude').val(position.coords.latitude)
                $('#geo_longitude').val(position.coords.longitude)

                // gMap.setZoom(13);
                // autocomplete.setBounds(circle.getBounds());
            });
        }
    }
</script>

@endpush