@extends('backend.student_backend.student_dashboard')

@section('student')

<div class="container-fluid">


    {{-- ==========================================================
         PAGE TITLE
    ========================================================== --}}

    <div class="row mb-0">

        <div class="col-12">

            <div class="card shadow-sm border-0">

                <div class="card-body">

                    <h4 class="mb-1">

                        <i class="fas fa-graduation-cap text-primary"></i>

                        My Results

                    </h4>

                    <p class="text-muted mb-0">

                        Select your class, term and academic session
                        to view your result.

                    </p>

                </div>

            </div>

        </div>

    </div>



    {{-- ==========================================================
         RESULT FILTER FORM
    ========================================================== --}}

    <form
        id="studentResultForm"
    >

        @csrf


        <div class="card shadow-sm border-0">


            <div class="card-header text-white" style="background-color: #198754;">

                <h5 class="mb-0" style="color:#fff;">

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

                    Select Result

                </h5>

            </div>



            <div class="card-body">


                <div class="row">


                    {{-- CLASS --}}

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

                        <label class="form-label">

                            Class

                        </label>


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

                            <option value="">

                                Select Class

                            </option>


                            @forelse($classes as $class)

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

                                    {{ $class->class_name }}

                                </option>

                            @empty

                                <option
                                    value=""
                                    disabled
                                >

                                    No class assigned

                                </option>

                            @endforelse

                        </select>

                    </div>



                    {{-- TERM --}}

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

                        <label class="form-label">

                            Term

                        </label>


                        <select
                            class="form-select"
                            name="term"
                            id="studentResultTerm"
                            required
                        >

                            <option value="">

                                Select Term

                            </option>


                            @foreach($terms as $term)

                                <option

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

                                    @if(
                                        $currentTerm &&
                                        $currentTerm->name === $term->name
                                    )
                                        selected
                                    @endif

                                >

                                    {{ $term->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- SESSION --}}

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

                        <label class="form-label">

                            Academic Session

                        </label>


                        <select
                            class="form-select"
                            name="session"
                            id="studentResultSession"
                            required
                        >

                            <option value="">

                                Select Session

                            </option>


                            @foreach($sessions as $session)

                                <option

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

                                    @if(
                                        $currentSession &&
                                        $currentSession->name === $session->name
                                    )
                                        selected
                                    @endif

                                >

                                    {{ $session->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                </div>



                {{-- BUTTON --}}

                <div class="text-end">

                    <button

                        type="submit"

                        class="btn" style="background-color: #198754; color:#fff;"

                        id="viewStudentResultButton"

                    >

                        <span
                            id="studentResultButtonText"
                        >

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

                            View Result

                        </span>


                        <span

                            id="studentResultLoadingText"

                            style="display:none;"

                        >

                            <span
                                class="spinner-border spinner-border-sm"
                            ></span>

                            Loading...

                        </span>

                    </button>

                </div>


            </div>

        </div>

    </form>



    {{-- ==========================================================
         MESSAGE CONTAINER
    ========================================================== --}}

    <div

        id="studentResultMessage"

        class="mt-4"

    ></div>



    {{-- ==========================================================
         RESULT CONTAINER
    ========================================================== --}}

    <div

        id="studentResultContainer"

        class="mt-4"

    ></div>


</div>



{{-- ==========================================================
     AJAX SCRIPT
========================================================== --}}

<script>

document.addEventListener(

    'DOMContentLoaded',

    function () {


        /*
        |--------------------------------------------------------------------------
        | GET ELEMENTS
        |--------------------------------------------------------------------------
        */

        const form =

            document.getElementById(
                'studentResultForm'
            );


        const resultContainer =

            document.getElementById(
                'studentResultContainer'
            );


        const messageContainer =

            document.getElementById(
                'studentResultMessage'
            );


        const button =

            document.getElementById(
                'viewStudentResultButton'
            );


        const buttonText =

            document.getElementById(
                'studentResultButtonText'
            );


        const loadingText =

            document.getElementById(
                'studentResultLoadingText'
            );


        /*
        |--------------------------------------------------------------------------
        | FORM SUBMIT
        |--------------------------------------------------------------------------
        */

        form.addEventListener(

            'submit',

            function (event) {


                /*
                |--------------------------------------------------------------------------
                | PREVENT PAGE RELOAD
                |--------------------------------------------------------------------------
                */

                event.preventDefault();


                /*
                |--------------------------------------------------------------------------
                | CLEAR OLD MESSAGE
                |--------------------------------------------------------------------------
                */

                messageContainer.innerHTML = '';


                /*
                |--------------------------------------------------------------------------
                | CLEAR OLD RESULT
                |--------------------------------------------------------------------------
                */

                resultContainer.innerHTML = '';


                /*
                |--------------------------------------------------------------------------
                | GET FORM VALUES
                |--------------------------------------------------------------------------
                */

                const classId =

                    document.getElementById(
                        'studentResultClass'
                    ).value;


                const term =

                    document.getElementById(
                        'studentResultTerm'
                    ).value;


                const session =

                    document.getElementById(
                        'studentResultSession'
                    ).value;


                /*
                |--------------------------------------------------------------------------
                | FRONTEND VALIDATION
                |--------------------------------------------------------------------------
                */

                if (

                    !classId ||

                    !term ||

                    !session

                ) {


                    messageContainer.innerHTML =

                        `
                        <div
                            class="alert alert-warning alert-dismissible fade show"
                            role="alert"
                        >

                            Please select your class, term and academic session.

                            <button
                                type="button"
                                class="btn-close"
                                data-bs-dismiss="alert"
                            ></button>

                        </div>
                        `;


                    return;

                }


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

                button.disabled = true;


                buttonText.style.display = 'none';


                loadingText.style.display = 'inline';


                /*
                |--------------------------------------------------------------------------
                | CREATE FORM DATA
                |--------------------------------------------------------------------------
                */

                const formData = new FormData(
                    form
                );


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

                fetch(

                    "{{ route('student.result.load') }}",

                    {

                        method: 'POST',

                        headers: {

                            'X-Requested-With':

                                'XMLHttpRequest',

                            'Accept':

                                'application/json',

                        },

                        body: formData,

                    }

                )


                .then(

                    response => {


                        if (!response.ok) {


                            return response.json()

                            .then(

                                data => {

                                    throw data;

                                }

                            );

                        }


                        return response.json();

                    }

                )


                .then(

                    data => {


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

                        if (data.status) {


                            resultContainer.innerHTML =

                                data.html;


                            /*
                            |--------------------------------------------------------------------------
                            | SCROLL TO RESULT
                            |--------------------------------------------------------------------------
                            */

                            resultContainer.scrollIntoView(

                                {

                                    behavior: 'smooth',

                                    block: 'start',

                                }

                            );


                        }


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

                        else {


                            messageContainer.innerHTML =

                                `
                                <div
                                    class="alert alert-danger alert-dismissible fade show"
                                    role="alert"
                                >

                                    ${data.message}

                                    <button
                                        type="button"
                                        class="btn-close"
                                        data-bs-dismiss="alert"
                                    ></button>

                                </div>
                                `;

                        }

                    }

                )


                .catch(

                    error => {


                        let errorMessage =

                            'Something went wrong. Please try again.';


                        /*
                        |--------------------------------------------------------------------------
                        | LARAVEL VALIDATION ERRORS
                        |--------------------------------------------------------------------------
                        */

                        if (error.errors) {


                            errorMessage =

                                Object.values(
                                    error.errors
                                )

                                .flat()

                                .join('<br>');

                        }


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

                        else if (error.message) {


                            errorMessage =

                                error.message;

                        }


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

                        messageContainer.innerHTML =

                            `
                            <div
                                class="alert alert-danger alert-dismissible fade show"
                                role="alert"
                            >

                                ${errorMessage}

                                <button
                                    type="button"
                                    class="btn-close"
                                    data-bs-dismiss="alert"
                                ></button>

                            </div>
                            `;

                    }

                )


                .finally(

                    function () {


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

                        button.disabled = false;


                        /*
                        |--------------------------------------------------------------------------
                        | RESTORE BUTTON TEXT
                        |--------------------------------------------------------------------------
                        */

                        buttonText.style.display = 'inline';


                        loadingText.style.display = 'none';

                    }

                );


            }

        );


    }

);

</script>

@endsection