@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('election_histories.election_history.index') }}" class="btn btn-primary" title="แสดง Election History ทั้งหมด">
                    <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('election_histories.election_history.store') }}" accept-charset="UTF-8" id="create_election_history_form" name="create_election_history_form" class="form-horizontal">
            {{ csrf_field() }}
            @include ('election_histories.form', [
                                        'electionHistory' => 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>

@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);
      checkPositions();
}
</script>
<script>
function checkPositions() {
    const allowedValues = [5, 10, 11]; // ค่าที่อนุญาต
    const form = document.getElementById('create_people_form'); // ID ของฟอร์ม

     const selects = form.querySelectorAll('select[name="positions_id[]"]');

    let allValid = true;

    selects.forEach(select => {
        const value = parseInt(select.value);
        if (!allowedValues.includes(value)) {
            allValid = false;  // มีอันใดอันหนึ่งผิด
        }
    });

    if (allValid) {
       $('#is_voter').prop('disabled',false);
           $('#g_is_voter').show();
    }
   

  
    else{
        $('#is_voter').prop('disabled',true);
        $('#g_is_voter').hide(); }
}
    </script>
<script>
function rm_me(btn) {
    // หา element .card ที่อยู่ใกล้ที่สุดจากปุ่มนี้
    const card = btn.closest('.card');
    if (card) {
        card.remove(); // ลบออกจาก DOM
        checkPositions();
    }
}
</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