@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="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="" style="display: none;" 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="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">
                    <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('moobans.mooban.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="moobanTable" data-toggle="table" data-locale="th-TH" data-url="{{ route('get.Mooban') }}"
                        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]" data-show-export="true"
                        data-export-types='["csv", "excel", "txt", "json", "xml"]' data-show-columns="true"
                        data-show-columns-toggle-all="true" class="table table-bordered"> 
                    <thead>
                        <tr>
                            <th rowspan="2" data-formatter="indexFormatter">ลำดับที่</th>
                            <th colspan="4" class="text-center">พื้นที่</th>
                            <th colspan="4" class="text-center">จำนวน</th>
                            <th rowspan="2"  data-formatter="mapFormatter">พิกัด</th>
                            <th rowspan="2" data-formatter="actionFormatter">ดำเนินการ</th>
                                  
                        </tr>
                        <tr>
                            <th data-field="name" data-sortable="true">ชื่อหมู่บ้าน</th>
                            <th data-field="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="last_voter" data-sortable="true">ผู้มาใช้สิทธิฯ</th>
                            <th data-field="total_house" data-sortable="true">หลังคาเรือน</th>
                            <th data-field="total_home" data-sortable="true">เพิ่มบ้านเลขที่</th>
                            <th data-field="total_voter" data-sortable="true">ผู้มีสิทธิฯ</th>
                        </tr>
                    </thead>

                    </table>

                </div>
            </div>

             

    </div>
@endsection
@section('style')
    <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>
    <style>
        tbody td,
        tfoot td {
            text-align: center;
        }
    </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);
                }
            })
        }
    </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 mapFormatter(value, row) {
    if (!row.latitude || !row.longitude) return '-';
    return row.latitude + ', ' + row.longitude;
}
        function actionFormatter(value, row, index) {
            let showUrl = "{{ route('moobans.mooban.show', 0) }}" + row.id;
            let editUrl = "{{ route('moobans.mooban.show', 0) }}" + row.id;
            let deleteUrl = "{!! route('moobans.mooban.destroy', 0) !!}" + row.id;

  
  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>
    `;
          
         
        }

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

            $.ajax({
                url: '{!! route('moobans.mooban.destroy', 0) !!}' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'delete'
                },
                success: function(res) {
                    $('#moobanTable').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();


            return params;
        }

        $('#form-search').on('submit', function(e) {
            e.preventDefault();
            $('#moobanTable').bootstrapTable('refresh');
        });
    </script>
    <script>
function indexFormatter(value, row, index) {
    let options = $('#moobanTable').bootstrapTable('getOptions');
    let pageNumber = options.pageNumber;      // หน้าที่กำลังอยู่
    let pageSize = options.pageSize;          // จำนวนรายการต่อหน้า

    // คำนวณลำดับจริงตาม offset
    return ((pageNumber - 1) * pageSize) + index + 1;
}
</script>
@stop