@extends('layout.master')
@section('title', $pagetitle)
@if ($is_gathering)
@section('listgathering', 'active')
@else
@section('listreport', 'active')
@endif
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/datatables.net/jquery.dataTables.min.css')}}">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endsection

@section('body')

    <div class="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="row">
                <div class="form-group col-sm-3">
                    <input type="text" id="filter_text" class="form-control" placeholder="Search name or phone" />
                </div>
                <div class="form-group col-sm-3">
                    <select name="state" id="state_id" required class="form-control">
                        <option value="" selected="selected" >- State -</option>
                        @foreach($states as $state)
                            <option value="{{$state->state_id}}" {{$default_state_id == $state->state_id  ? 'selected' : ''}}>{{$state->state_name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group col-sm-3">
                    <select name="lga" id="local_government" required class="form-control">
                        <option value="">-Select LGA-</option>
                    </select>
                </div>
                <div class="form-group col-sm-3">
                    <select name="ward" id="ward" required class="form-control">
                        <option value="">-Select Ward-</option>
                    </select>
                </div>
            </div>

            <div class="tab-pane fade show active" id="listing" role="tabpanel" aria-labelledby="listing-tab">
                <table class="table table-bordered" id="table-listing">
                    <thead>
                    <tr>
                        <th>Id</th>
                        @if($is_gathering == 0)
                            <th width="20%">Name</th>
                            <th>Gender</th>
                        @else
                            <th>Type</th>
                        @endif
                        <th>Phone</th>
                        <th>Address</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('levelJS')
<script type="text/javascript">

    $(document).on('change', '#state_id', function(){
        var state = $(this).val();
        var url = '{{route('/get_lga')}}';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "POST",
            url: url,
            data: 'state='+state+'&type=lga',
            success: function(data){
                $('#local_government').html(data);
                otable.draw();
            },
        });
    });

    $(document).on('change', '#local_government', function(){
        var state = $('#state_id').val();
        var lga = $(this).val();
        var url = '{{route('/get_lga')}}';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "POST",
            url: url,
            data: 'state='+state+'&lga='+lga+'&type=ward',
            success: function(data){
                $('#ward').html(data);
                otable.draw();
            },
        });
    });

    $(document).on('change', '#ward', function(){
        otable.draw();
    });

    $(document).on('keyup', '#filter_text', function(){
        var val = $(this).val();
        if (val.length > 2) {
            otable.draw();
        }
    });

    var otable;
    (function($) {
        'use strict';
        $(function() {
            otable =$('#table-listing').DataTable({
                "aLengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "All"]
                ],
                processing: true,
                serverSide: true,
                autoWidth: false,
                bFilter: false,
                pageLength: 25,
                // scrollX: true,
                "order": [[ 0, "desc" ]],
                ajax: {
                    "url": '{{ url('listing/report') }}',
                    "data": function ( d ) {
                        d.type = '{{$is_gathering}}';
                        d.state = $('#state_id').val();
                        d.lga = $('#local_government').val();
                        d.ward = $('#ward').val();
                        d.name = $('#filter_text').val();
                    }
                },
                columns: [
                    { data: 'id', name: 'id', sClass:'text-center',searchable:false },
                    @if (!$is_gathering){ data: 'name', name: 'name' },@endif
                    { data: 'gender', name: 'gender',orderable:false,searchable:false },
                    { data: 'phone', name: 'phone',sClass:'text-center' },
                    { data: 'address', name: 'address',orderable:false,searchable:false }
                ],
                "language": {
                    "search": "",
                    "sLengthMenu": "_MENU_"
                },
                "pagingType": "simple_numbers"
            });
            $('.dataTables_length').addClass('bs-select');
            $('#table-listing').each(function() {
                var datatable = $(this);
                // SEARCH - Add the placeholder for Search and Turn this into in-line form control
                var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
                // Only apply settings once
                if (search_input.parent().hasClass("input-group")) return;
                //search_input.attr("placeholder", "Search")
                search_input.removeClass('form-control-sm');
                search_input.addClass("form-control");

                // LENGTH - Inline-Form control
                var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
                length_sel.removeClass('form-control-sm');
            });
        });
    })(jQuery);

</script>
<script src="{{asset('vendors/datatables.net/jquery.dataTables.js')}}"></script>
@endsection