@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">


                <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>

        @if (count($homes) == 0)
            <div class="card-body text-center">
                <h4>ไม่พบข้อมูล บ้านเลขที่</h4>
            </div>
        @else
            <div class="card-body">

                <div class="table-responsive">
                    <table class="table table-striped table-sm table-bordered">
                        <thead>
                            <tr>
                                <th>ลำดับที่</th>
                                <th>เขตเลือกตั้ง</th>
                                <th>อำเภอ</th>
                                <th>ตำบล</th>
                                <th>หมู่บ้าน</th>
                                <th>หมู่ที่</th>
                                <th>บ้านเลขที่</th>
                                <th>จำนวนผู้ใช้สิทธิ</th>
                                <th>ผู้บันทึกข้อมูล</th>
                                <th>หมายเหตุ</th>

                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @foreach ($homes as $home)
                            @php
                           // $tt_voter+=  $home->total_people;
                            
                            @endphp
                                <tr>
                                    <td>{{ ++$r }}</td>

                                    <td>{{ optional($home->electorate)->name }}</td>
                                    <td>{{ optional($home->amphur)->name_th }}</td>
                                    <td>{{ optional($home->tambon)->name }}</td>
                                    <td>{{ optional($home->mooban)->name }}</td>
                                    <td>{{ (int) optional($home->mooban)->moo }}</td>
                                    <td> <a href="{{ route('homes.home.show', $home->id) }}"  
                                                    title="แสดงข้อมูล บ้านเลขที่">{{ $home->address }}</a></td>
                                    <td> <a href="{{ route('homes.home.show', $home->id) }}"  
                                                    title="แสดงข้อมูล บ้านเลขที่">{{ $home->total_people }}</a></td>
                                    <td>{{ optional($home->user)->name }}</td>
                                    <td>{{ $home->remark }}</td>

                                    <td>

                                        <form method="POST" action="{!! route('homes.home.destroy', $home->id) !!}" accept-charset="UTF-8">
                                            <input name="_method" value="DELETE" type="hidden">
                                            {{ csrf_field() }}

                                            <div class="btn-group btn-group-sm float-right" role="group">
                                                <a href="{{ route('homes.home.show', $home->id) }}" class="btn btn-info"
                                                    title="แสดงข้อมูล บ้านเลขที่">
                                                    <i class=" fas fa-fw fa-eye" aria-hidden="true"></i>
                                                </a>
                                                <a href="{{ route('homes.home.edit', $home->id) }}"
                                                    class="btn btn-primary" title="แก้ไขข้อมูล บ้านเลขที่">
                                                    <i class=" fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
                                                </a>

                                                <button type="submit" class="btn btn-danger" title="ลบ บ้านเลขที่ ทิ้ง"
                                                    onclick="return confirm('คลิก OK เพื่อยืนยันการลบ บ้านเลขที่ ')">
                                                    <i class=" fas fa-fw fa-trash-alt" aria-hidden="true"></i>
                                                </button>
                                            </div>

                                        </form>

                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        @php /*
                        <tfoot>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            
                            <td>  </td>
                            <td> </td>
                            <td> </td>
                            <td></td>
                            <td></td>
                            <td></td>
*/ @endphp
                        </tfoot>
                    </table>

                </div>
            </div>

            <div class="card-footer">
                {!! $homes->render() !!}
            </div>

        @endif

    </div>
@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(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>
@stop
@section('style')
    <style>
        tbody td, tfoot td {
            text-align: center;
        }
    </style>

@stop