@extends('layouts/layout')
@section('title', 'Unit Locations')
@push('style')
@endpush

@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
    <!-- page content -->
			<div class="" role="main">
				<div class="">
					<div class="row">
						<div class="col-md-12 col-sm-12 mt-2">
							<div class="x_panel">
								<div class="x_title">
									<h2>Update Unit Location</h2>
									
									<div class="clearfix"></div>
								</div>
								<div class="x_content mt-0 p-0">
                                        <form action="{{url('unitlocations', $unit_locations[0]->id)}}" method="post" class="mb-3">
                                        @csrf
										@method('PUT')
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Client Name</label>
                                                <select class="select2 form-control" name="client" id="client" data-toggle="select2">
                                                    <option value="" selected>Select Client</option>
                                                    @foreach($clients as $client)
                                                        <option @if($unit_locations[0]->client_id == $client->client_id) selected @endif value="{{$client->client_id}}">{{$client->client_name}}</option>
                                                    @endforeach   
                                                </select>
                                                <span id="client_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Unit Name</label>
                                                <select class="select2 form-control" name="site" id="site" data-toggle="select2">
                                                    <option value="" selected>Select Unit</option>
                                                    @foreach($units as $unit)
                                                        <option @if($unit_locations[0]->unit_id == $unit->unit_id) selected @endif value="{{$unit->unit_id}}">{{$unit->unit_name}}</option>
                                                    @endforeach
                                                </select>
                                                <span id="site_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Unit Latitude</label>
                                                <input type="text" id="latitude" name="latitude" autocomplete="off" class="form-control" value="{{$unit_locations[0]->latitude}}" onkeyup="ValidateLatitude();">
                                                <span id="latitude_error" class="text-danger d-inline-block"></span><span id="lblLat" style="color: Red;display:none;"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Unit Longitude</label>
                                                <input type="text" id="longitude" name="longitude" autocomplete="off" class="form-control" value="{{$unit_locations[0]->longitude}}" onkeyup="ValidateLongitude();">
                                                <span id="longitude_error" class="text-danger d-inline-block"></span><span id="lblLot" style="color: Red;display:none;"></span>
                                            </div>
                                        </div>
										<div class="form-group">
                                            <div class="col-md-6 col-sm-6 offset-md-5">
                                                <input type="submit" class="btn btn-success btn-round btn-primary" name="create_template" id="create_template" value="Update Location" />
												<!-- <button type="submit" class="btn btn-round btn-primary">Submit</button> -->
											</div>
										</div>
									</form>
                                    
								</div>
								<!-- Display map in this div -->
                                            <div id="map" style="height: 400px; width: 100%;"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /page content -->
    @endsection
@push('scripts')
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    $(document).ready(function(){
        $('.select2').select2();
    });
</script>
<script>
    function ValidateLatitude() {
            $("#lblLat").hide();
            var regexLong = new RegExp('^(\\+|-)?(?:90(?:(?:\\.0{1,6})?)|(?:[0-9]|[1-8][0-9])(?:(?:\\.[0-9]{1,6})?))$');
            if (!regexLong.test($("#latitude").val())) {
                $("#lblLat").html("Invalid Latitude").show();
            }
        }
        function ValidateLongitude() {
            $("#lblLot").hide();
            var regexLong = new RegExp('^(\\+|-)?(?:90(?:(?:\\.0{1,6})?)|(?:[0-9]|[1-8][0-9])(?:(?:\\.[0-9]{1,6})?))$');
            if (!regexLong.test($("#longitude").val())) {
                $("#lblLot").html("Invalid Longitude").show();
            }
        }
</script>
<script>
    $(document).ready(function(){
        $("#create_template").on('click', function() {
            var error_msg = "";

            if($("#client").val() == "") {
                $("#client_error").text("Please select Client Name.");
                error_msg = "Error";
            } else {
                $("#client_error").text("");
            }

            if($("#site").val() == "") {
                $("#site_error").text("Please select Unit Name.");
                error_msg = "Error";
            } else {
                $("#site_error").text("");
            }

            if($("#latitude").val() == "") {
                $("#latitude_error").text("Please enter Latitude.");
                error_msg = "Error";
            } else {
                $("#latitude_error").text("");
            }

            if($("#longitude").val() == "") {
                $("#longitude_error").text("Please enter Longitude.");
                error_msg = "Error";
            } else {
                $("#longitude_error").text("");
            }

            if(error_msg) {
                return false;
            }
        });

    });
</script>
<script>
    $(document).ready(function () {
        $('#client').on('change', function() {
            var client_id = $('#client').val();
              $("#site").html('');
                $.ajax({
                    url: "{{url('loadunits')}}",
                    type: "post",
                    data: {
                        client_id : client_id,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                            $.each(res,function(key, value){
                                $("#site").append('<option value="' + value
                                .unit_id + '">' + value.unit_name + '</option>');
                            });
                         }
                   
                });
           });
       });
</script>
<script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
					center: { lat: 18.5204, lng: 73.8567 },
					zoom: 10
				});

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

            // Add event listener to update input boxes when marker is dragged
            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById('latitude').value = event.latLng.lat();
                document.getElementById('longitude').value = event.latLng.lng();
            });

            // Add event listener to update input boxes when map is clicked
            google.maps.event.addListener(map, 'click', function (event) {
                marker.setPosition(event.latLng);
                document.getElementById('latitude').value = event.latLng.lat();
                document.getElementById('longitude').value = event.latLng.lng();
            });
        }
    </script>

    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRXAKmCJgGvNaH0YkTZzvud-B611UcQyo&callback=initMap">
    </script>

@endpush