@extends('layouts.app')

@section('content')

    @if (Session::has('success_message'))
        <div class="alert alert-success">
            <i class=" fas fa-fw fa-check" aria-hidden="true"></i>
            {!! session('success_message') !!}

            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>

        </div>
    @endif

    <div class="card">

        <div class="card-body">
            <form class="row g-3 justify-content-md-center" id ='form-search'>


                <div class="col-auto">
                    <label for="keyword" class="col-form-label">คำค้น</label>
                </div>

                <div class="col-auto">
                    <input type="text" class="form-control" id="keyword" name="keyword"
                        value="{{ Request::input('keyword') }}">

                </div>




                <div class="col-auto">
                    <label for="amphurs_id" class="col-form-label">อำเภอ</label>
                </div>

                <div class="col-auto">
                    <select class="form-control" id="amphurs_id" name="amphurs_id" onChange="get_tambons(this.value)">
                        <option value="" selected>
                            ระบุ อำเภอ
                        </option>
                        @foreach ($amphurs as $key => $amphur)
                            <option value="{{ $key }}"
                                {{ Request::input('amphurs_id') == $key ? 'selected' : '' }}> {{ $amphur }} </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-auto">
                    <label for="tambons_id" class="col-form-label">ตำบล</label>
                </div>

                <div class="col-auto">
                    <select class="form-control" id="tambons_id" name="tambons_id" onChange="get_moobans(this.value )">
                        <option value="" selected>ระบุ ตำบล</option>
                        @foreach ($tambons as $key => $tambon)
                            <option value="{{ $key }}"
                                {{ Request::input('tambons_id') == $key ? 'selected' : '' }}> {{ $tambon }} </option>
                        @endforeach
                    </select>
                </div>


                <div class="col-auto">
                    <label for="moobans_id" class="col-form-label">หมู่บ้าน</label>
                </div>

                <div class="col-auto">
                    <select class="form-control" id="moobans_id" name="moobans_id"
                        onchange="get_homes(this.value);get_tracking_users(this.value)">
                        <option value="" {{ Request::input('moobans_id') == '' ? 'selected' : '' }} selected>ระบุ
                            หมู่บ้าน
                        </option>
                        @foreach ($moobans as $mooban)
                            <option value="{{ $mooban->id }}"
                                {{ Request::input('moobans_id') == $mooban->id ? 'selected' : '' }}>
                                {{ $mooban->name }} หมู่ที่ {{ $mooban->moo }}
                            </option>
                        @endforeach
                    </select>
                </div>


                <div class="col-auto">
                    <label for="homes_id" class="col-form-label">บ้านเลขที่</label>
                </div>

                <div class="col-auto">
                    <select class="form-control" id="homes_id" name="homes_id">
                        <option value="" {{ Request::input('homes_id') == '' ? 'selected' : '' }} selected>ระบุ
                            บ้านเลขที่
                        </option>
                        @foreach ($homes as $home)
                            <option value="{{ $home->id }}"
                                {{ Request::input('homes_id') == $home->id ? 'selected' : '' }}>
                                {{ $home->address }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-auto">
                    <label for="positions_id" class="col-form-label">ค้นหาจากตำแหน่ง</label>
                </div>
                <div class="col-auto">
                    <select class="form-control form-control-chosen" id="positions_id" name="positions_id[]" multiple>
                        <option value="">ค้นหาจากตำแหน่ง </option>
                        @foreach ($positions as $position)
                            <option value="{{ $position->id }}"
                                {{ Request::input('positions_id') == $position->id ? 'selected' : '' }}>
                                {{ $position->name }}
                            </option>
                        @endforeach
                    </select>
                </div>



                <div class="col-auto">
                    <label for="tracking_users_id" class="col-form-label">ผู้รับผิดชอบใรการหาเสียง</label>
                </div>

                <div class="col-auto">
                    <select class="form-control form-control-chosen" id="tracking_users_id" name="tracking_users_id">
                        <option value="" {{ Request::input('tracking_users_id') == '' ? 'selected' : '' }} selected>
                            ผู้รับผิดชอบใรการหาเสียง
                        </option>

                    </select>
                </div>


                <div class="col-auto">
                    <button type="submit" class="btn btn-primary mb-3">ค้นหา</button>
                </div>
            </form>
        </div>



    </div>



    <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.create') }}" class="btn btn-success"
                    title="เพิ่ม ผู้มีสิทธิ์เลือกตั้ง ใหม่">
                    <i class="fas fa-fw  fa-plus" aria-hidden="true"></i>
                </a>
            </div>

        </div>


        <div class="card-body">

            <div class="table-responsive">
                <table id="peopleTable" 
                data-toggle="table" 
                   data-locale="th-TH"
                data-url="{{ route('get.People') }}" 
                data-pagination="true"
                data-query-params="queryParams"
                    data-side-pagination="server" 
                    data-search="true" 
                    data-sort-name="id" 
                    data-sort-order="asc"
                    data-page-size="20" 
                    data-page-list="[10, 20, 50, 100, ALL]" 
@if(auth()->user()->permission=='ADMIN')
                    data-show-export="true" 
                    data-export-types='["csv", "excel", "txt", "json", "xml"]'
@endif
                    data-show-columns="true" 
                    data-show-columns-toggle-all="true" 
                    class="table table-bordered">

                    <thead>
                        <tr>
                            <th data-field="id" data-sortable="true">#</th>
                            <th data-field="home_address" data-sortable="true">บ้านเลขที่</th>
                            <th data-field="mooban_name" data-sortable="true">หมู่บ้าน</th>
                            <th data-field="mooban_moo" data-sortable="true">หมู่</th>
                            <th data-field="tambon_name" data-sortable="true">ตำบล</th>
                            <th data-field="amphur_name" data-sortable="true">อำเภอ</th>
                            <th data-field="image" data-formatter="imgFormatter">รูป</th>
                            <th data-field="name" data-sortable="true">ชื่อ</th>
                            <th data-field="gender" data-sortable="true">เพศ</th>
                            <th data-field="born" data-sortable="true">เกิด</th>
                            <th data-field="age" data-sortable="true">อายุ</th>
                            <th data-field="tel" data-sortable="true">เบอร์โทร</th>
                            <th data-field="positions_str" data-sortable="true">ตำแหน่ง</th>
                            <th data-field="education_name" data-sortable="true">การศึกษา</th>
                            <th data-field="residence" data-sortable="true">ที่อยู่</th>
                            <th data-field="vote_location" data-sortable="true">หน่วยเลือกตั้ง</th>
                            <th data-field="associate_name" data-sortable="true">กลุ่ม</th>
                            <th data-field="user_name" data-sortable="true">ผู้สร้าง</th>
                            <th data-field="tracking_user_name" data-sortable="true">ติดตามโดย</th>
                            <th data-formatter="actionFormatter">จัดการ</th>
                        </tr>
                    </thead>
                </table>

            </div>
        </div>



    </div>
@endsection



@section('style')

    <link href="{{ asset('assets/css/component-chosen.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('bootstrap-table-master') }}/dist/bootstrap-table.min.css">

    <style>
.bootstrap-table .dropdown-menu li a:contains("0 รายการต่อหน้า") {
    color: transparent !important;
}
</style>
@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_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);
                    $('#tracking_users_id').trigger("chosen:updated");
                }
            })
        }
    </script>

    <script src="{{ asset('assets/js/chosen.jquery.js') }}"></script>
    <script>
        $('.form-control-chosen').chosen({
            allow_single_deselect: true,
            search_contains: true,
            width: '100%'
        });
    </script>

  

    <script>
        function imgFormatter(value, row) {
            if (!value) return '';
            return '<img src="/' + value + '" style="width:50px">';
        }

        function posFormatter(value, row) {
            if (!value) return '';
            return value.map(v => v.name).join(', ');
        }

        function actionFormatter(value, row, index) {
            let showUrl = "{{ route('people.people.show', 0) }}" + row.id;
           // let editUrl = "{{ route('people.people.edit', 0) }}" + row.id;
            let editUrl = "{{ route('people.people.edit', ':id') }}";
            editUrl = editUrl.replace(':id', row.id);
            let deleteUrl = "{!! route('people.people.destroy', 0) !!}" + row.id;

           @if(auth()->user()->permission=='ADMIN_AMP' || auth()->user()->permission=='ADMIN' || auth()->user()->permission=='ADMIN_TAM') 
 return `
        <div class="btn-group btn-group-sm" role="group">
            <a href="${showUrl}" class="btn btn-info" title="แสดงข้อมูล">
                <i class="fas fa-eye"></i>
            </a>
            <a href="${editUrl}" class="btn btn-primary" title="แก้ไขข้อมูล">
                <i class="fas fa-pencil-alt"></i>
            </a>
            <button class="btn btn-danger"
                onclick="deletePeople(${row.id})"
                title="ลบข้อมูล">
                <i class="fas fa-trash-alt"></i>
            </button>
        </div>
    `;
           @else
 return `
        <div class="btn-group btn-group-sm" role="group">
            <a href="${showUrl}" class="btn btn-info" title="แสดงข้อมูล">
                <i class="fas fa-eye"></i>
            </a>
            <a href="${editUrl}" class="btn btn-primary" title="แก้ไขข้อมูล">
                <i class="fas fa-pencil-alt"></i>
            </a> 
        </div>
    `;
           @endif
           
        }

        function deletePeople(id) {
            if (!confirm('ยืนยันการลบข้อมูล?')) return;

            $.ajax({
                url: '{!! route('people.people.destroy', 0) !!}' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'delete'
                },
                success: function(res) {
                    $('#peopleTable').bootstrapTable('refresh');
                }
            });
        }
    </script>
 <!-- #region 
-->

    <script src="{{ asset('bootstrap-table-master') }}/tableExport.min.js"></script>
    <script src="{{ asset('bootstrap-table-master') }}/libs/jsPDF/jspdf.umd.min.js"></script>
    <script src="{{ asset('bootstrap-table-master') }}/dist/bootstrap-table.js"></script>
    <script src="{{ asset('bootstrap-table-master') }}/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-th-TH.min.js"></script>
<script>
$(document).on('shown.bs.dropdown', '.page-list .dropdown', function () {
    $('.dropdown-menu li a').each(function () {
        // ถ้าข้อความคือ "0"
        if ($(this).text().trim() === '0') {
            $(this).text('ทั้งหมด');
        }
    });
});
</script>

<script>
    function queryParams(params) {

    params.keyword = $('#keyword').val();
    params.amphurs_id = $('#amphurs_id').val();
    params.tambons_id = $('#tambons_id').val();
    params.moobans_id = $('#moobans_id').val();
    params.homes_id = $('#homes_id').val();
    params.positions_id = $('#positions_id').val();  // ARRAY (multiple)
    params.tracking_users_id = $('#tracking_users_id').val();

    return params;
}

$('#form-search').on('submit', function(e) {
    e.preventDefault();
    $('#peopleTable').bootstrapTable('refresh');
});
</script>
  
@stop