@extends('layout.master')
@section('title', 'Self Test Listing')
@section('listselftest', 'active')
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/datatables.net/jquery.dataTables.min.css')}}">
    <style>
        tr.high_risk{background: #fb9999 !important;}
        tr.medium_risk{background: #fdf59a !important;}
    </style>
    <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>
                        <th width="20%">Name</th>
                        <th>Phone</th>
                        <th>Address</th>
                        <th>Gender</th>
                        <th>Response</th>
                        <th>Risk</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

@endsection

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

<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();
        }
    });
    $(document).on('click', 'a.mark_as_contacted', function(){
        var val = $(this).data('token');
        if (val) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var url = '{{route('/listing/contact')}}';
            $.ajax({
                type: "POST",
                url: url,
                data: {token:val},
                success: function(data){
                    if(data.status > 0)
                    {
                        $.toast({text: data.message, icon: 'success', position: 'top-right'});
                        location.reload();
                    } else{
                        $.toast({text: data.message, icon: 'error', position: 'top-right'});
                    }
                },
            });
        }
    });

    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/selftest') }}',
                    "data": function ( d ) {
                        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 },
                    { data: 'name', name: 'name' },
                    { data: 'phone', name: 'phone',sClass:'text-center' },
                    { data: 'address', name: 'address',orderable:false,searchable:false },
                    { data: 'gender', name: 'gender',orderable:false,searchable:false },
                    { data: 'questions', name: 'questions',orderable:false,searchable:false },
                    { data: 'risk_level', name: 'risk_level', orderable:false,sClass:'text-center' },
                    { data: 'status', name: 'status', orderable:false,sClass:'text-center' }
                ],
                "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>
@endsection