@extends('layouts.guidanceapp')
@section('content')
<link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap.min.css') }}">
<style>
    .label{color: gray;} 
</style>
<div class="row">
    <div class='col-sm-12'>
        <form class="form-horizontal" target="_blank" method="POST" action="{{url('/guidance', 'generate_report_city')}}">
            {{ csrf_field() }}
            <h3>List of Applicants - <i>Per City</i></h3><br>

            <div class="form form-group">
                <div class="col-sm-4">
                    <label class="label">Academic Year</label>
                    <select class='form-control' name="school_year" id="school_year" onchange="getApplicants()">
                        @foreach($setups as $setup)
                        <option value="{{$setup}}" @if($school_year->school_year == $setup) selected='selected' @endif > AY {{$setup}} - {{$setup+1}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-sm-4">
                    <label class="label">Exam Result</label>
                    <select class="form-control" name="result" id="result" onchange="getApplicants()">
                        <option value="">Select Exam Result</option>
                        <option value="Passed">Passed</option>
                        <option value="Failed">Failed</option>
                        <option value="">No Result</option>
                    </select>
                </div>
                <br><br><br>

                <div class="col-sm-4">
                    <label class="label">Academic Type</label>
                    <select class="form-control" name="acad_type" id="acad_type" onchange="getApplicants()">
                        <option value="">Select Academic Type</option>
                        @foreach ($academic_types as $academic_type)
                        <option value="{{$academic_type->academic_type}}">{{$academic_type->academic_type}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-sm-4" id="acad_program" onchange="getApplicants()"></div><br><br><br>

                <div class="col-sm-8">
                    <label class="label">City</label>
                    <select class="form-control select2" name="city" id="city" onchange="getApplicants()">
                        @foreach ($cities as $city)
                        <option value="{{$city->municipality}}">{{$city->municipality}}</option>
                        @endforeach
                    </select>
                </div>
                <br><br><br>

                <div class="col-sm-4 pull-right">
                    <button type="submit" name="submit" class="form form-control btn btn-success"><i class="fa fa-print"></i><strong> Print Report</strong></button>    
                </div>
            </div>    
        </form>
        <div class='row'>
            <div class='col-md-12'>
                <div id="studentlist">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap.min.js') }}"></script>
<script>
    $(document).ready(function () {
        $("#acad_type").on("change", function (e) {

            $.ajax({
                type: "GET",
                url: "/guidance/ajax/getacademicprogram/" + $("#acad_type").val(),
                success: function (data) {
                    $('#acad_program').empty();
                    $('#acad_program').html(data);
                }
            }
            );

        })
    })

    function getApplicants() {
        array = {};
        array['school_year'] = $("#school_year").val();
        array['result'] = $("#result").val();
        array['acad_type'] = $("#acad_type").val();
        array['acad_prog'] = $("#acad_prog").val();
        array['city'] = $("#city").val();
        $.ajax({
            type: "GET",
            url: "/guidance/ajax/getapplicants_city",
            data: array,
            success: function (data) {
                $('#studentlist').empty();
                $('#studentlist').html(data);
                table = $('#example').DataTable({
                    "scrollX": true
                });
            }

        });
    }
</script>
@stop