@extends('layouts.app')

@section('content')

    <div class="card">
  
        <div class="card-header bg-primary text-white">

            <h5  class="my-1 float-left">{{ !empty($title) ? $title : 'แก้ไขบ้านเลขที่'  }}</h5>

            <div class="btn-group btn-group-sm float-right" role="group">

                <a href="{{ route('homes.home.index') }}" class="btn btn-primary" title="แสดง บ้านเลขที่ ทั้งหมด">
                    <i class=" fas fa-fw fa-th-list" aria-hidden="true"></i>
                </a>

                <a href="{{ route('homes.home.create') }}" class="btn btn-success" title="เพิ่ม บ้านเลขที่ ใหม่">
                    <i class=" fas fa-fw fa-plus" aria-hidden="true"></i>
                </a>

            </div>
        </div>

        <div class="card-body">

            @if ($errors->any())
                <ul class="alert alert-danger">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            @endif

            <form method="POST" action="{{ route('homes.home.update', $home->id) }}" id="edit_home_form" name="edit_home_form" accept-charset="UTF-8" class="form-horizontal needs-validation" novalidate>
            {{ csrf_field() }}
            <input name="_method" type="hidden" value="PUT">
            @include ('homes.form', [
                                        'home' => $home,
                                      ])

                <div class="form-group">
                    <div align="center">
					<button class="btn btn-primary" type="submit">
					<i class="fas fa-fw fa-edit"></i> 
					ปรับปรุงข้อมูล</button>
					<button class="btn btn-light" type="reset">
					<i class="fas fa-fw fa-redo" aria-hidden="true"></i> 
					ยกเลิก</button>
				  </div>
                </div>
            </form>

        </div>
    </div>

@endsection


@section('script')
    <script>
        function get_tambons(amphurs_id) {
            $.ajax({
                type: 'POST',
                url: "{{ route('tambons.tambon.get_tambon_by_amphur', 0) }}" + amphurs_id,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'text',
                success: function(data) {
                    $('#tambons_id').html('');
                    $('#tambons_id').append(data);
                }
            })
        }

        function get_moobans(tambons_id) {
            $.ajax({
                type: 'POST',
                url: "{{ route('moobans.mooban.get_mooban_by_tambon', 0) }}" + tambons_id,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'text',
                success: function(data) {
                    $('#moobans_id').html('');
                    $('#moobans_id').append(data);
                }
            })
        }

        function get_homes(moobans_id) {
            $.ajax({
                type: 'POST',
                url: "{{ route('homes.home.get_home_by_mooban', 0) }}" + moobans_id,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'text',
                success: function(data) {
                    $('#homes_id').html('');
                    $('#homes_id').append(data);
                }
            })
        }

        function get_home_tracking_users(moobans_id) {
            $.ajax({
                type: 'POST',
                url: "{{ route('users.user.get_user_by_mooban', 0) }}" + moobans_id,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'text',
                success: function(data) {
                    $('#tracking_users_id').html('');
                    $('#tracking_users_id').append(data);
                }
            })
        }
      $('#address').change(function(e) {
    recheck_address($('#moobans_id').val(), $(this).val() , {{ $home->id }} );
});

function recheck_address(moobans_id, address , homes_id) {
    $.ajax({
        type: 'POST',
        url: "{{ route('homes.home.recheck_address_edit' ) }}" ,
        data: {
            '_token': '{{ csrf_token() }}',
            'moobans_id': moobans_id,
            'address': address,
            'homes_id' : homes_id
        },
        dataType: 'text',
        success: function(data) {
            if (data == '0') {
                  $('#address').prop('class','is-valid form-control');
					 $('#btn-submit').prop('disabled',false);
            } else {
               $('#address').prop('class','is-invalid form-control');
					 $('#btn-submit').prop('disabled',true);	
            }
        },
        error: function(xhr) {
            console.error('Error:', xhr.responseText);
        }
    });
}
 
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // เลือก input ทั้งหมดใน form
            const inputs = document.querySelectorAll('form input');

            inputs.forEach(function(input) {
                input.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter') {
                        event.preventDefault(); // ป้องกันการ submit
                        return false;
                    }
                });
            });
        });
    </script>
    <script>
        (() => {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            const forms = document.querySelectorAll('.needs-validation')

            // Loop over them and prevent submission
            Array.from(forms).forEach(form => {
                form.addEventListener('submit', event => {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }

                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>

    <script>
 

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

function showPosition(position) {
$('#lat') .val(position.coords.latitude ) ;
$('#lon') .val(position.coords.longitude ) ;
 
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
 
</script> 
@endsection