@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('people.people.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('people.people.store') }}" accept-charset="UTF-8" id="create_people_form"
                name="create_people_form" class="form-horizontal needs-validation" novalidate enctype="multipart/form-data">
                {{ csrf_field() }}
                @include ('people.form', [
                    'people' => null,
                ])

                <div class="form-group">
                    <div align="center">
                        <button class="btn btn-primary" 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>



<span id="is_more_position" style="display:none">
    <div class="card">
        <div class="p-2" style="position: absolute;"><button class="btn btn-danger" type="button" onclick="rm_me(this)">ลบตำแหน่ง</button></div>
    <div class="card-body">
        <div class="form-group row {{ $errors->has('positions_id') ? 'has-error' : '' }}">
            <label   class="col-md-2 control-label">ตำแหน่ง/ยศ</label>
            <div class="col-md-4">
                <select class="form-control "  name="positions_id[]" required>

                    @foreach ($positions as $key => $position)
                        <option value="{{ $key }}" >
                            {{ $position }}
                        </option>
                    @endforeach
                </select>

                {!! $errors->first('positions_id', '<p class="form-text text-muted">:message</p>') !!}
            </div>
        </div>


        <div class="form-group row {{ $errors->has('start_position') ? 'has-error' : '' }}">
            <label for="start_position" class="col-md-2 control-label">วันที่เริ่มดำรงตำแหน่ง</label>
            <div class="col-md-4">
                <input class="form-control" name="start_position[]" type="text"   data-provide="datepicker" data-date-language="th-th"
                        pattern="\d{1,2}/\d{1,2}/\d{4}" 
                    placeholder="วันที่เริ่มดำรงตำแหน่ง">
                {!! $errors->first('start_position', '<p class="form-text text-muted">:message</p>') !!}
            </div>
        </div>


        <div class="form-group row {{ $errors->has('end_position') ? 'has-error' : '' }}">
            <label for="end_position" class="col-md-2 control-label">วันที่สิ้นสุดการดำรงตำแหน่ง</label>
            <div class="col-md-4">
                <input class="form-control" name="end_position[]" type="text"   data-provide="datepicker" data-date-language="th-th"
                        pattern="\d{1,2}/\d{1,2}/\d{4}" 
                    placeholder="วันที่สิ้นสุดการดำรงตำแหน่ง">
                {!! $errors->first('end_position', '<p class="form-text text-muted">:message</p>') !!}
            </div>
        </div>

    </div>
</div>
</span>  
@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