@extends('layouts.app')

@section('content')

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

            <h5  class="my-1 float-left">{{ !empty($people->name) ? $people->name : 'ผู้มีสิทธิ์เลือกตั้ง' }}</h5>

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

                <a href="{{ route('people.people.index') }}" class="btn btn-primary" title="แสดง ผู้มีสิทธิ์เลือกตั้ง ทั้งหมด">
                    <i class=" fas fa-fw fa-th-list" aria-hidden="true"></i>
                </a>

                <a href="{{ route('people.people.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('people.people.update', $people->id) }}" id="edit_people_form" name="edit_people_form" accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
            {{ csrf_field() }}
            <input name="_method" type="hidden" value="PUT">
            @include ('people.form', [
                                        'people' => $people,
                                      ])

                <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('style')
 
<link href="{{asset('assets/css/component-chosen.css')}}" rel="stylesheet">
 <link href="{{asset('dpicker')}}/datepicker.css" rel="stylesheet" media="screen">
<link href="{{asset('dpicker')}}/prettify.css" rel="stylesheet">
@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_user_control(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) {
                    $('#homes_id').html('');
                    $('#homes_id').append(data);
                }
            })
        }

    </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>
        $('#homes_id').change(function(e) {
           /* alert('home'); */
            if ($(this).val() == '0') {
                $('#p-address').show();
            } else {
                $('#p-address').hide();
            }
        });
        if (parseInt($('#homes_id').val()) > 0) {
            $('#p-address').hide();
        }
    </script>
    <script>
        $('#born').change(function(e) {
            var byear = $(this).val();
            var nyear = new Date().getFullYear() + 543; // ปีปัจจุบัน
            var age = nyear - byear;
            $('#age').val(age);

        });
    </script>
    <script src="{{asset('assets/js/chosen.jquery.js')}}"></script>
    <script>

 $('.form-control-chosen').chosen(
 {
		allow_single_deselect: true, 
		search_contains: true,
		width: '100%'
});

function add_more_position()
{
    var eml = $('#is_more_position').html();
    $('#more_position').append(eml);
}
</script>
<script>
function rm_me(btn) {
    // หา element .card ที่อยู่ใกล้ที่สุดจากปุ่มนี้
    const card = btn.closest('.card');
    if (card) {
        card.remove(); // ลบออกจาก DOM
    }
}
</script>
<script src="{{asset('dpicker')}}/prettify.js"></script>
<script src="{{asset('dpicker')}}/bootstrap-datepicker.js?={{$version}}"></script>
<script src="{{asset('dpicker')}}/bootstrap-datepicker-thai.js"></script>
<script src="{{asset('dpicker')}}/bootstrap-datepicker.th.js"></script>
<script id="example_script" type="text/javascript">
      function demo() {
        $('.datepicker').datepicker();
      }
    </script>
 <script type="text/javascript">
      $(function(){
        $('pre[data-source]').each(function(){
          var $this = $(this),
            $source = $($this.data('source'));
          var text = [];
          $source.each(function(){
            var $s = $(this);
            if ($s.attr('type') == 'text/javascript'){
              text.push($s.html().replace(/(\n)*/, ''));
            } else {
              text.push($s.clone().wrap('<div>').parent().html()
                .replace(/(\"(?=[[{]))/g,'\'')
                .replace(/\]\"/g,']\'').replace(/\}\"/g,'\'') // javascript not support lookbehind
                .replace(/\&quot\;/g,'"'));
            }
          });
          
          $this.text(text.join('\n\n').replace(/\t/g, '    '));
        });

        prettyPrint();
        demo();
      });
 
 
    </script> 
@endsection