@extends('backend.teacher_backend.teacher_dashboard')

@section('teacher')

<div class="container-fluid">

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

    <div class="row mb-0">

        <div class="col-md-12">

            <div class="card shadow-sm">

                <div class="card-body">

                    <h4 class="fw-bold mb-1">

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

                        Teacher Daily Attendance

                    </h4>

                    <small class="text-muted">

                        Record daily attendance for your assigned class.

                    </small>

                </div>

            </div>

        </div>

    </div>


    {{-- ==========================================================
         FILTER CARD
    =========================================================== --}}

    <div class="card shadow">

        <div class="card-header bg-success text-white">

            <strong>

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

                Attendance Loader

            </strong>

        </div>


        <div class="card-body">

            <form id="teacherAttendanceFilterForm">

                @csrf


                <div class="row">


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

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

                        <label class="form-label fw-bold">

                            Class

                        </label>


                        <select
                            name="class_id"
                            id="teacher_attendance_class"
                            class="form-select"
                            required
                        >

                            <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 fw-bold">

                            Term

                        </label>


                        <input
                            type="text"
                            name="term"
                            class="form-control"
                            value="{{ $currentTerm->name }}"
                            readonly
                        >

                    </div>


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

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

                        <label class="form-label fw-bold">

                            Academic Session

                        </label>


                        <input
                            type="text"
                            name="session"
                            class="form-control"
                            value="{{ $currentSession->name }}"
                            readonly
                        >

                    </div>


                </div>


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

                <button
                    type="submit"
                    class="btn btn-success"
                    id="loadTeacherAttendanceBtn"
                >

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

                    Load Students

                </button>


            </form>

        </div>

    </div>


    {{-- ==========================================================
         ATTENDANCE TABLE
    =========================================================== --}}

    <div
        id="teacherAttendanceContainer"
        class="mt-4"
    >

    </div>


</div>


<script>

$(document).ready(function(){


    /*
    |--------------------------------------------------------------------------
    | LOAD TEACHER ATTENDANCE
    |--------------------------------------------------------------------------
    */

    $('#teacherAttendanceFilterForm').submit(
        function(e){

            e.preventDefault();


            /*
            |--------------------------------------------------------------------------
            | LOADING MESSAGE
            |--------------------------------------------------------------------------
            */

            $('#teacherAttendanceContainer').html(`

                <div class="card shadow-sm">

                    <div class="card-body text-center p-5">

                        <div
                            class="spinner-border text-success"
                            role="status"
                        ></div>

                        <br><br>

                        <strong>
                            Loading students...
                        </strong>

                    </div>

                </div>

            `);


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

            $.ajax({

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

                type:
                    "GET",

                data:
                    $(this).serialize(),


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

                success:
                    function(response){

                        /*
                        |--------------------------------------------------------------------------
                        | JSON RESPONSE
                        |--------------------------------------------------------------------------
                        |
                        | Laravel may return JSON when:
                        |
                        | - teacher is unauthorized
                        | - no students assigned
                        | - attendance setting missing
                        |
                        */

                        if (
                            typeof response === 'object'
                            &&
                            response.status === false
                        ) {

                            Swal.fire({

                                icon:
                                    'warning',

                                title:
                                    'Attendance',

                                text:
                                    response.message

                            });


                            $('#teacherAttendanceContainer')
                                .html('');

                            return;
                        }


                        /*
                        |--------------------------------------------------------------------------
                        | TABLE HTML
                        |--------------------------------------------------------------------------
                        */

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

                    },


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

                error:
                    function(xhr){

                        /*
                        |--------------------------------------------------------------------------
                        | DO NOT SHOW RAW LARAVEL ERROR
                        |--------------------------------------------------------------------------
                        */

                        console.error(xhr);


                        let message =
                            'Something went wrong. Please try again.';


                        /*
                        |--------------------------------------------------------------------------
                        | VALIDATION / JSON MESSAGE
                        |--------------------------------------------------------------------------
                        */

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

                            message =
                                xhr.responseJSON.message;
                        }


                        Swal.fire({

                            icon:
                                'error',

                            title:
                                'Something went wrong',

                            text:
                                message

                        });


                        $('#teacherAttendanceContainer')
                            .html('');

                    }

            });

        }
    );

});

</script>

@endsection