@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="tambons_id" class="col-form-label">หมู่บ้าน</label>
                </div>

                <div class="col-auto">
                    <select class="form-control" id="moobans_id" name="moobans_id">
                        <option value="" style="display: none;"
                            {{ Request::input('moobans_id') == '' ? 'selected' : '' }} disabled 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">
                    <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('homes.home.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="homeTable" 
                data-toggle="table" 
                   data-locale="th-TH"
                data-url="{{ route('get.getHome') }}" 
                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-striped table-sm table-bordered">
                        <thead>
                            <tr>
                                <th data-field="id" data-sortable="true">ลำดับที่</th>                          
                                <th data-field="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="total_people" 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-field="remark" data-sortable="true">หมายเหตุ</th>
                                <th data-formatter="actionFormatter">จัดการ</th>         
                            </tr>
                        </thead>
                        
                        </tfoot>
                    </table>

                </div>
            </div>

      

    </div>
@endsection
@section('style')
    <style>
        tbody td, tfoot td {
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('bootstrap-table-master') }}/dist/bootstrap-table.min.css">
@stop



@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(amphurs_id) {
            $.ajax({
                type: 'POST',
                url: "{{ route('moobans.mooban.get_mooban_by_tambon', 0) }}" + amphurs_id,
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'text',
                success: function(data) {
                    $('#moobans_id').html('');
                    $('#moobans_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 actionFormatter(value, row, index) {
            let showUrl = "{{ route('homes.home.show', 0) }}" + row.id;
            let editUrl = "{{ route('homes.home.show', 0) }}" + row.id;
            let deleteUrl = "{!! route('homes.home.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('homes.home.destroy', 0) !!}' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'delete'
                },
                success: function(res) {
                    $('#homeTable').bootstrapTable('refresh');
                }
            });
        }
    </script>


    <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.amphurs_id = $('#amphurs_id').val();
    params.tambons_id = $('#tambons_id').val();
    params.moobans_id = $('#moobans_id').val();
 

    return params;
}

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

@stop