@extends('backend.admin_backend.admin_dashboard')

@section('admin')


<style>

/* ==========================================================
   MAIN CARD
========================================================== */

.attendance-card{

    border:none;

    border-radius:12px;

    overflow:hidden;

}


/* ==========================================================
   HEADER
========================================================== */

.attendance-header{

    background:
        linear-gradient(
            135deg,
            #198754,
            #157347
        );

    color:white;

    padding:18px 22px;

}


.attendance-header h4{

    margin:0;

    font-weight:700;

}


/* ==========================================================
   SELECTION CARD
========================================================== */

.selection-card{

    background:#f8f9fa;

    border:1px solid #e3e3e3;

    border-radius:10px;

    padding:20px;

}


.form-label{

    font-weight:600;

}


/* ==========================================================
   ATTENDANCE AREA
========================================================== */

#attendanceArea{

    margin-top:25px;

}


/* ==========================================================
   LOADING
========================================================== */

.loading-box{

    text-align:center;

    padding:50px;

    color:#198754;

}


.loading-box i{

    font-size:30px;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .attendance-header h4{

        font-size:16px;

    }

}

</style>


<div class="container-fluid">


    {{-- =====================================================
         MAIN CARD
    ====================================================== --}}

    <div class="card shadow attendance-card">


        {{-- =================================================
             HEADER
        ================================================== --}}

        <div class="attendance-header">

            <h4 style="color:white;">

                <i class="fas fa-calendar-check"></i>

                Daily Student Attendance

            </h4>

        </div>



        <div class="card-body">


            {{-- =================================================
                 SELECTION FORM
            ================================================== --}}

            <div class="selection-card">


                <div class="row">


                    {{-- =========================================
                         CLASS
                    ========================================== --}}

                    <div class="col-md-4 mb-3">

                        <label class="form-label">

                            Class

                        </label>


                        <select
                            class="form-control"
                            id="attendance_class_id"
                        >

                            <option value="">

                                Select Class

                            </option>


                            @foreach($classes as $class)

                                <option
                                    value="{{ $class->id }}"
                                >

                                    {{ $class->class_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- =========================================
                         TERM
                    ========================================== --}}

                    <div class="col-md-4 mb-3">

                        <label class="form-label">

                            Term

                        </label>


                        <select
                            class="form-control"
                            id="attendance_term"
                        >

                            <option value="">

                                Select Term

                            </option>


                            @foreach($terms as $term)

                                <option
                                    value="{{ $term->name }}"

                                    {{ $currentTerm &&
                                       $currentTerm->name == $term->name
                                       ? 'selected'
                                       : '' }}
                                >

                                    {{ $term->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- =========================================
                         SESSION
                    ========================================== --}}

                    <div class="col-md-4 mb-3">

                        <label class="form-label">

                            Academic Session

                        </label>


                        <select
                            class="form-control"
                            id="attendance_session"
                        >

                            <option value="">

                                Select Academic Session

                            </option>


                            @foreach($sessions as $session)

                                <option
                                    value="{{ $session->name }}"

                                    {{ $currentSession &&
                                       $currentSession->name == $session->name
                                       ? 'selected'
                                       : '' }}
                                >

                                    {{ $session->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                </div>



                {{-- =================================================
                     LOAD BUTTON
                ================================================== --}}

                <div class="mt-2">

                    <button
                        type="button"
                        id="loadDailyAttendance"
                        class="btn btn-success"
                    >

                        <i class="fas fa-users"></i>

                        Load Students

                    </button>

                </div>


            </div>



            {{-- =================================================
                 ATTENDANCE AREA
            ================================================== --}}

            <div id="attendanceArea">


                <div class="text-muted text-center py-5">

                    <i
                        class="fas fa-calendar-check fa-2x mb-2"
                    ></i>


                    <p class="mb-0">

                        Select class, term and session
                        to load daily attendance.

                    </p>

                </div>


            </div>


        </div>

    </div>

</div>



<script>

$(document).ready(function(){


    /*
    |--------------------------------------------------------------------------
    | LOAD DAILY ATTENDANCE
    |--------------------------------------------------------------------------
    */

    $(document).on(
        'click',
        '#loadDailyAttendance',
        function()
    {


        /*
        |--------------------------------------------------------------------------
        | GET SELECTED VALUES
        |--------------------------------------------------------------------------
        */

        let classId =
            $('#attendance_class_id').val();

        let term =
            $('#attendance_term').val();

        let session =
            $('#attendance_session').val();


        /*
        |--------------------------------------------------------------------------
        | VALIDATE CLASS
        |--------------------------------------------------------------------------
        */

        if(!classId){

            Swal.fire({

                icon:'warning',

                title:'Class Required',

                text:'Please select a class.'

            });

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | VALIDATE TERM
        |--------------------------------------------------------------------------
        */

        if(!term){

            Swal.fire({

                icon:'warning',

                title:'Term Required',

                text:'Please select a term.'

            });

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | VALIDATE SESSION
        |--------------------------------------------------------------------------
        */

        if(!session){

            Swal.fire({

                icon:'warning',

                title:'Session Required',

                text:'Please select an academic session.'

            });

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | BUTTON
        |--------------------------------------------------------------------------
        */

        let button = $(this);


        button

            .prop(
                'disabled',
                true
            )

            .html(`

                <i class="fas fa-spinner fa-spin"></i>

                Loading Attendance...

            `);


        /*
        |--------------------------------------------------------------------------
        | LOADING SCREEN
        |--------------------------------------------------------------------------
        */

        $('#attendanceArea').html(`

            <div class="loading-box">

                <i class="fas fa-spinner fa-spin"></i>

                <p class="mt-2">

                    Loading students and attendance...

                </p>

            </div>

        `);


        /*
        |--------------------------------------------------------------------------
        | AJAX REQUEST
        |--------------------------------------------------------------------------
        */

        $.ajax({

            url:
                "{{ route('admin.daily.attendance.load') }}",

            type:
                "GET",

            data:{

                class_id:
                    classId,

                term:
                    term,

                session:
                    session

            },


            /*
            |--------------------------------------------------------------------------
            | SUCCESS
            |--------------------------------------------------------------------------
            */

            success:function(response){


                /*
                |--------------------------------------------------------------------------
                | SERVER ERROR
                |--------------------------------------------------------------------------
                */

                if(response.status === false){

                    $('#attendanceArea').html(`

                        <div class="alert alert-warning">

                            <i class="fas fa-exclamation-circle"></i>

                            ${response.message}

                        </div>

                    `);

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | INSERT TABLE
                |--------------------------------------------------------------------------
                */

                $('#attendanceArea')
                    .html(response);

            },


            /*
            |--------------------------------------------------------------------------
            | ERROR
            |--------------------------------------------------------------------------
            */

            error:function(xhr){

                console.log(
                    xhr.responseText
                );


                let message =
                    'Unable to load attendance.';


                if(
                    xhr.responseJSON &&
                    xhr.responseJSON.message
                ){

                    message =
                        xhr.responseJSON.message;

                }


                $('#attendanceArea').html(`

                    <div class="alert alert-danger">

                        <i class="fas fa-exclamation-circle"></i>

                        ${message}

                    </div>

                `);

            },


            /*
            |--------------------------------------------------------------------------
            | COMPLETE
            |--------------------------------------------------------------------------
            */

            complete:function(){

                button

                    .prop(
                        'disabled',
                        false
                    )

                    .html(`

                        <i class="fas fa-users"></i>

                        Load Students

                    `);

            }

        });

    });


});

</script>


@endsection