@extends('layouts.base')
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <h2>
    <i class="fa fa-search"></i> គ្រប់គ្រង 	ឃុំ/សង្កាត់
    <!--<small>Version 2.0</small>-->
    </h2>
    <ol class="breadcrumb">
        <li><a href="{{ url('/') }}"><i class="fa fa-dashboard"></i> ទំព័រដើម</a></li>
        <li class="active">ទិន្នន័យរួម</li>
        <li class="active">គ្រប់គ្រង ឃុំ/សង្កាត់</li>
    </ol>
    <div>
        <a class="btn btn-primary"  href="{{ route('commune.create') }}">គ្រប់គ្រង​ ឃុំ/សង្កាត់ថ្មី &nbsp;<i class="fa fa-arrow-right"></i></a>
    </div>
    <div class="search-main">
        <div class="search-element">
            <div>
                <table class="table">
                    <tr>
                        <td>
                            {!! Form::select(
                                'pro_code',
                                $provinces,
                                null,
                                [
                                    'placeholder' => 'ជ្រើសរើស រាជធានី/ខេត្ត',
                                    'required' => true,
                                    'id'=>'selectProvince',
                                    'class' => 'apply-select2-special form-control',
                                ])
                            !!}
                        </td>
                        <td>
                            {!! Form::select(
                                    'dis_code',
                                    $districts,
                                    null,
                                    [
                                        'placeholder' => 'ជ្រើសរើស ក្រុង/ស្រុក/ខណ្ឌ',
                                        'required' => true,
                                        'id'=>'selectDistrict',
                                        'class' => 'apply-select2-special form-control',
                                    ])
                            !!}
                        </td>
                        <td style="vertical-align: middle">
                            <button type="button" value="search1" class="btn-search btn btn-info"><i class="fa fa-search"></i>&nbsp;ស្វែងរក</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</section>

<section class="content-header">
    <h2>
        <i class="flaticon-file"></i> បញ្ជីឈ្មោះ ឃុំ/សង្កាត់
    </h2>
</section>
<!-- Main content -->
<section class="content">
    <div id="loadingDiv"> 
        <span> Loading......</span>
    </div>
    <div id="data_ajax">
        
    </div>
</section>
<!-- /.content -->
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('.btn-search').click(function(){
        var province = $('#selectProvince').val();
        var district = $('#selectDistrict').val();
        if (province.trim() == '' || district.trim() == '') {
            alert('សូមជ្រើសរើសទិន្នន័យតាមប្រអប់នីមួយៗ');
        } else {
            var data = {pro_code: province, dis_code: district};
            $.ajax({
                data: data,
                type: 'GET',
                dataType: 'json',
                url: '/commune/search',
                error: function (jqXHR, status, err) {
                    console.log(jqXHR, status, err);
                },
                success: function (response) {
                    //console.log('respone', response);
                    var html = "<div class='row'><div class='col-xs-12'><div class='box-body'>";
                        html += "<table class='table table-striped'><thead><tr><th>ល.រ</th><th>រាជធានី/ខេត្ត</th><th>ក្រុង/ស្រុក/ខណ្ឌ</th>";
                        html +=  "<th>ឃុំ/សង្កាត់</th></thead><tbody>";
                    if (response.length > 0) {
                        for (var i = 0; i < response.length; i++) {
                            html += "<tr><td>"+(i+1)+"</td><td>"+response[i].province+"</td><td>"+response[i].district+"</td>";
                            html += "<td>"+response[i].commune+"</td>";
                            html += "</tr>";
                        }
                    } else {
                        html += "<tr><td colspan='4' style='text-align: center;'>មិនមានទិន្នន័យសម្រាប់ការស្វែងរកនេះទេ!</td></tr>";
                    }
                    html += "</tbody></table></div></div></div>";
                    $('#data_ajax').html(html);
                }
            });
        }

    });
})
</script>

@endpush