@extends('layouts.app')

@section('content')

    <div class="card">

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

            <h5 class="my-1 float-left">เพิ่ม บ้านเลขที่ ใหม่</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>
            </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.store') }}" accept-charset="UTF-8" id="create_home_form"
                name="create_home_form" class="form-horizontal needs-validation" novalidate>
                {{ csrf_field() }}
                @include ('homes.form', [
                    'home' => null,
                ])

                <div class="form-group">
                    <div align="center">
                        <button class="btn btn-primary" id="btn-submit" type="submit">
                            <i class="fas fa-fw fa-save"></i> บันทึก</button>
                        <button class="btn btn-light" type="reset" onclick="history.back();">
                            <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());
});

function recheck_address(moobans_id, address) {
    $.ajax({
        type: 'POST',
        url: "{{ route('homes.home.recheck_address') }}",
        data: {
            '_token': '{{ csrf_token() }}',
            'moobans_id': moobans_id,
            'address': address
        },
        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