@extends('admin.layouts.master')

@section('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <style>
        #records {
            overflow-x: auto;
            border-color: #cccccc;
            border-width: 1px;
            border-radius: 5px;
            min-height: 50px;
            padding: 10px;
        }
    </style>
@endsection
@section('title')
    {{'Manage Results'}}
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Manage Results</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Manage Results</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="overlay-wrapper">
                <div id="spiner">
                </div>
                <div class="row mb-4">
                    <div class="col-md-3">
                        <label for="filterdepartment">Department</label>
                        <select class="form-control" name="filterdepartment" id="filterdepartment">
                            <option value="" selected disabled> Select</option>

                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="filterprogram">Programme</label>
                        <select class="form-control" name="filterprogram" id="filterprogram">
                            <option value="" selected disabled> Select</option>

                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="filtersession">Session</label>
                        <select class="form-control" name="filtersession" id="filtersession">
                            <option value="" selected disabled> Select</option>

                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="filtersemester">Semester</label>
                        <select class="form-control" name="filtersemester" id="filtersemester">
                            <option value="" selected disabled> Select</option>
                            <option value="1">January</option>
                            <option value="2">May</option>
                            <option value="3">September</option>

                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-primary btn-generate" style="background: #1e7e34; color: white">Generate</button>
                    </div>
                    <br/>
                    <br/>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div id="records">

                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
@endsection

@section('js')
    <!-- DataTables -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
        $(function () {
            //ajax setup
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            //Load Faculties
            $.ajax({
                url: '{{route("departments.load")}}',
            }).done(function (data) {
                $('#filterdepartment').html("<option value='' selected disabled>Select</option>" + data);
            });

            //Load Faculties
            $.ajax({
                url: '{{route("sessions.load")}}',
            }).done(function (data) {
                $('#filtersession').html("<option value='' selected disabled>Select</option>" + data);
            });

            $("#filterdepartment").change(function () {
                $.ajax({
                    url: "{{route("programmes.load")}}",
                    method: "POST",
                    data: {
                        department_name: $("#filterdepartment").val()
                    },
                    dataType: "text",
                    success: function (response) {
                        $("#filterprogram").html("<option value='' selected disabled>Select</option>" + response);
                    }
                });
            });
            
            
            function fetchData(){
                $.ajax({
                    url: '{{route('admin.result.manage')}}',
                    method: "GET",
                    data: {
                        department_name: $("#filterdepartment").val(),
                        degree_name: $("#filterprogram").val(),
                        resultsession: $("#filtersession").val(),
                        semester: $("#filtersemester").val()
                    },
                    dataType: "json",
                    beforeSend: function(){
                        $("#spiner").addClass("overlay");
                        $("#spiner").addClass("dark");
                        $("#spiner").html("<i class=\"fas fa-3x fa-sync-alt fa-spin\"></i>\n");
                    },
                    success: function (response) {
                        $("#spiner").removeClass("overlay");
                        $("#spiner").removeClass("dark");
                        $("#spiner").html("");
                        $("#records").html(response.html);
                        $('#dataTable').DataTable({
                            "paging": false,
                            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                            pageLength: 50,
                            dom: "<'row'<'col-sm-12'B>>" +
                            "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                            "<'row'<'col-sm-12'tr>>" +
                            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
                        });
                    }
                });
            }

            $(".btn-generate").click(function () {
               fetchData(); 
            });

            $(document).on("change", ".check_all", function () {
                $('.selectedstudents').prop('checked', $(this).prop("checked"));
            });

            $(document).on("change", ".selectedstudents", function () {
                if ($('.selectedstudents:checked').length == $('.selectedstudents').length) {
                    $('.check_all').prop('checked', true);
                } else {
                    $('.check_all').prop('checked', false);
                }
            });

            // delete class
            $('body').on('click', '.selectedrecords', function () {
                var arrstudentid = new Array();
                $('.selectedstudents:checked').each(function() {
                    arrstudentid.push($(this).val());
                });
                // Convert the array to JSON format
                var jsonData = JSON.stringify(arrstudentid);
                //alert(jsonData);
                //exit();
                Swal.fire({
                    title: "Do you want save the selected records",
                    icon: 'question',
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                    confirmButtonClass: "btn-success",
                    confirmButtonText: "Ok",
                    cancelButtonText: "Cancel"
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: "{{route('result.status.change')}}",
                            method: "POST",
                            data: {
                                department_name: $("#filterdepartment").val(),
                                degree_name: $("#filterprogram").val(),
                                resultsession: $("#filtersession").val(),
                                semester: $("#filtersemester").val(),
                                arrstudentid: jsonData
                            },
                            dataType: "json",
                            beforeSend: function(){
                                $("#spiner").addClass("overlay");
                                $("#spiner").addClass("dark");
                                $("#spiner").html("<i class=\"fas fa-3x fa-sync-alt fa-spin\"></i>\n");
                            },
                            success: function (data) {
                                $("#spiner").removeClass("overlay");
                                $("#spiner").removeClass("dark");
                                $("#spiner").html("");
                                if (data.type === 'success') {
                                    Swal.fire({
                                        title: 'Saved!',
                                        text: 'Successfully Saved',
                                        icon: 'success',
                                        showConfirmButton: false,
                                        timer: 2000
                                    })
                                    fetchData(); 
                                } else if (data.type === 'danger') {
                                    Swal.fire({
                                        title: 'Error saving record!',
                                        text: 'Try again',
                                        icon: 'error',
                                        showConfirmButton: false,
                                        timer: 2000
                                    })
                                }
                            },
                            error: function (data) {
                                $('#spiner').html('');
                                Swal.fire({
                                    title: 'Error deleting!',
                                    text: 'Try again',
                                    icon: 'error',
                                    showConfirmButton: false,
                                    timer: 2000
                                })
                            }
                        });
                    }
                })
            });

        });


    </script>
@endsection