@extends('layouts.app')
@push('css')
@endpush
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <div class="d-inline p-2  text-dark" style="font-size: 26px; font-weight: bold">Criteria Wise Applications
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                        </div>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="header">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <b>Select Course</b>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="course">Select Course</label>
                            <select id="selectCourse"
                                class="searchable_select js-example-basic-single form-control @error('course_id') is-invalid @enderror"
                                name="course_id">
                                <option value="0">Select Course</option>
                                @foreach ($courses as $course)
                                    <option value="{{ $course->id }}">{{ $course->title }}</option>
                                @endforeach
                            </select>
                            <span id="error"></span>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <b>Filters</b>
                    </div>
                    <div class="card-body">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="course">Select Zone</label>
                                    <select id="select_zone"
                                        class="searchable_select js-example-basic-single form-control @error('zone_id') is-invalid @enderror"
                                        name="zone_id">
                                        <option value="">Select Zone</option>
                                        @foreach ($zones as $zone)
                                            <option value="{{ $zone->id }}">{{ $zone->zone_name }}</option>
                                        @endforeach
                                    </select>
                                    <span id="error"></span>
                                </div>
                                <div class="col-md-4">
                                    <label for="course">Select District</label>
                                    <select id="select_district"
                                        class="searchable_select js-example-basic-single form-control @error('district_id') is-invalid @enderror"
                                        name="district_id">
                                    </select>
                                    <span id="error"></span>
                                </div>
                                <div class="col-md-4">
                                    <label for="course">Select Upazila</label>
                                    <select id="select_upazila"
                                        class="searchable_select js-example-basic-single form-control @error('upazila_id') is-invalid @enderror"
                                        name="upazila_id">
                                    </select>
                                    <span id="error"></span>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="col-md-12 col-xs-12 col-sm-6">
                            <div class="pull-right">
                                <div class="form-group">
                                    <button class="btn btn-success" id="loadData" name="loadData">Load</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div id="formdata" style="background-color: #FFFFFF;"></div>
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection
@push('js')
    <script>
        $(document).ready(function() {

            // On course selection or change load all the data based on criteria matching/unmatching
            // Turned off because we will implement auto zone, district and upazila selection based on user location
            // $('select[name="course_id"]').on('change', function() {
            //     let outputDiv = document.getElementById('formdata');
            //     var course_id = $(this).val();
            //     if (course_id == 0) {
            //         outputDiv.innerHTML = "";
            //     } else {
            //         $.ajax({
            //             url: '{{ url('/') }}' + '/course/sortdata/' + course_id,
            //             type: "GET",
            //             beforeSend: function() {
            //                 $('#wait').show();
            //             },
            //             success: function(data) {
            //                 $("#formdata").html(data);
            //             },
            //             complete: function() {
            //                 $('#wait').hide();
            //             }

            //         });
            //     }
            // });


            // On Zone change load the related districts
            $('select[name="zone_id"]').on('change', function() {
                var zone_id = $(this).val();
                $("#formdata").css('visibility', 'hidden');
                if (zone_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/zone/district/' + zone_id,
                        type: "GET",
                        dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            var res = '<option value="">Select District</option>';
                            $.each(data.district, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .district_name +
                                    '</option>';
                            });
                            $('select[name="district_id"]').html(res);
                        },
                        error: function(err) {
                            $('#wait').hide();
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                } else {
                    $('#select_district').empty();
                    $('#select_upazila').empty();
                }
            });

            // On District change load the related upazilas
            $('select[name="district_id"]').on('change', function() {
                var district_id = $(this).val();
                $("#formdata").css('visibility', 'hidden');
                if (district_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/district/' + district_id,
                        type: "GET",
                        dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            var res = '<option value="">Select Upazila</option>';
                            $.each(data.upazila, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .upazila_name +
                                    '</option>';
                            });
                            $('select[name="upazila_id"]').html(res);
                        },
                        error: function(err) {
                            $('#wait').hide();
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                } else {
                    $('#select_upazila').empty();
                }
            });

            // Matching the CSRF token with POST requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Clicking on Load data
            $("#loadData").click(function() {
                event.preventDefault();
                // Check course id
                // It must be selected to load the data
                var course_id = $.trim($('select[name="course_id"] option:selected').val());
                console.log(course_id);
                if (course_id != 0) {
                    var zone_id = $.trim($('select[name="zone_id"] option:selected').val());
                    var district_id = $.trim($('select[name="district_id"] option:selected').val());
                    var upazila_id = $.trim($('select[name="upazila_id"] option:selected').val());
                    if (zone_id) {

                    } else {
                        zone_id = 0;
                    }
                    if (district_id) {

                    } else {
                        district_id = 0;
                    }
                    if (upazila_id) {

                    } else {
                        upazila_id = 0;
                    }
                    $.ajax({
                        url: '{{ url('/') }}' + '/sortdatabyfilter/' + course_id + '/' + zone_id + '/' + district_id + '/' + upazila_id,
                        type: "GET",
                        // dataType: "json",
                        beforeSend: function() {
                            $('#wait').show();
                        },
                        success: function(data) {
                            
                            console.log("Success");
                            // console.log(data);
                            $("#formdata").empty();
                            $("#formdata").html(data);
                            $("#formdata").css('visibility', 'visible');
                        },
                        error: function(err) {
                            $("#formdata").css('visibility', 'hidden');
                            Swal.fire(
                                'Cancelled',
                                'Error occured. Please contact administrator!',
                                'error'
                            );
                            $('#wait').hide();
                        },
                        complete: function() {
                            $('#wait').hide();
                        }
                    });
                } else {
                    Swal.fire(
                        'Cancelled',
                        'Error occured. Please select a course first!',
                        'error'
                    );
                }
            });
        });
    </script>
@endpush