@extends('test.master')
@section('title', 'Find A Test Center ')

@section('levelCSS')
    {{--<link rel="stylesheet" href="{{asset('vendors/select2/select2.min.css')}}">--}}
    {{--<link rel="stylesheet" href="{{asset('vendors/select2-bootstrap-theme/select2-bootstrap.min.css')}}">--}}
@endsection
@section('body')
    <div class="container-fluid full-height">
        <div class="row row-height">
            <div class="col-lg-4 content-left">
                <div class="content-left-wrapper">
                    <!--a href="{{route('/')}}" id="logo"><img src="{{asset('images/logo.png')}}" alt="" width="129" height="55"></a>
                    <div id="social">
                        <ul>
                            <li><a href="#"><img src="{{asset('images/android.png')}}" class="img-responsive" style="max-height: 35px;" alt=""></a></li>
                        </ul>
                    </div-->
                    <!-- /social -->
                    <div>
                        <figure><img src="{{asset('images/logo.png')}}" alt="" class="img-fluid"></figure>
                        <!--h2>COVID-19 Self Assessment</h2-->
                        <p>This feature allows you to find a COVID-19 test center.</p>
                        <a href="#"><img src="{{asset('images/android.png')}}" class="img-responsive" style="max-height: 35px;" alt=""></a>
                    </div>
                    <div class="copy"><a href="{{route('/')}}" style="color: white;">Take the Test</a> <br><br>© 2025 eClat Healthcare Ltd</div>
                </div>
                <!-- /content-left-wrapper -->
            </div>
            <!-- /content-left -->

            <div class="col-lg-8 content-right" id="start">
                <div class="col-sm-12">
                    <div class="step submit">
                        <div class="row">
                            <div class="form-group col-sm-4">
                                <select name="state" id="state_id" required class="form-control">
                                    <option value="" selected="selected" >-Select 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="lga_id" required class="form-control">
                                    <option value="">-Select LGA-</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-3">
                                <select name="ward" id="ward_id" required class="form-control">
                                    <option value="">-Select Ward-</option>
                                </select>
                            </div>
                            <div class="form-group col-sm-2">
                                <button class="btn btn-md btn-success" id="submitBtn">Search</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div id="search_result">

                        </div>
                    </div>
                </div>

            </div>
            <!-- /content-right-->
        </div>
        <!-- /row-->
    </div>
    <!-- /container-fluid -->
@endsection

@section('levelJS')
    @include('partials.state_lga_js')
    <script src="{{asset('vendors/datatables.net/jquery.dataTables.js')}}"></script>
    <script>
        $(document).on('click', '#submitBtn', function(){
            var state = $("#state_id").val();
            var lga = $("#lga_id").val();
            var ward = $("#ward_id").val();
            var url = '{{route('/test_centre/fetch')}}';
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#search_result').html("Loading...please wait");
            $.ajax({
                type: "GET",
                url: url,
                data: 'state='+state+'&lga='+lga+'&ward='+ward,
                success: function(data){
                    $('#search_result').html(data.html);
                    if (data.count > 10) {
                        $('#result_table').dataTable({
                            "aLengthMenu": [
                                [10, 25, 50, 100, -1],
                                [10, 25, 50, 100, "All"]
                            ],
                            "sorting": false,
                            "bLengthChange": false,
                            "language": {
                                "search": "",
                                "sLengthMenu": "_MENU_"
                            },
                            "pagingType": "simple"
                        });
                        $('#result_table').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.addClass("form-control-sm");
                        });
                    }
                },
            });
        });

        $(document).ready(function () {
            $('#state_id').trigger('change');
        })
    </script>
@endsection