@extends('backend.admin_backend.admin_dashboard')

@section('admin')

<style>

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

.result-remark-card{

    border:none;

    border-radius:12px;

    overflow:hidden;

}


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

.result-remark-header{

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

    color:white;

    padding:18px 22px;

}


.result-remark-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;

}


/* ==========================================================
   RESULT AREA
========================================================== */

#resultRemarkContainer{

    margin-top:25px;

}


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

.loading-box{

    text-align:center;

    padding:40px;

    color:#198754;

}


.loading-box i{

    font-size:30px;

}


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

@media(max-width:768px){

    .result-remark-header h4{

        font-size:16px;

    }

}

</style>


<div class="container-fluid">


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

    <div class="card shadow result-remark-card">


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

        <div class="result-remark-header">

            <h4 style="color:white;">

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

                Result Remark

            </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="remark_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="remark_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="remark_session"

                        >

                            <option value="">

                                Select 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="loadResultRemark"

                        class="btn btn-success"

                    >

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

                        Load Results

                    </button>

                </div>


            </div>



            {{-- =================================================
                 RESULT AREA
            ================================================== --}}

            <div id="resultRemarkContainer">


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

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

                    <p class="mb-0">

                        Select class, term and session
                        to load student results.

                    </p>

                </div>


            </div>


        </div>

    </div>

</div>



<script>

$(document).ready(function () {


    /*
    |--------------------------------------------------------------------------
    | LOAD RESULT REMARK
    |--------------------------------------------------------------------------
    */

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


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


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


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


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

            if (!classId) {

                Swal.fire({

                    icon:'warning',

                    title:'Select Class',

                    text:'Please select a class.'

                });

                return;

            }


            if (!term) {

                Swal.fire({

                    icon:'warning',

                    title:'Select Term',

                    text:'Please select a term.'

                });

                return;

            }


            if (!session) {

                Swal.fire({

                    icon:'warning',

                    title:'Select Session',

                    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 Results...

                `);


            /*
            |--------------------------------------------------------------------------
            | LOADING AREA
            |--------------------------------------------------------------------------
            */

            $('#resultRemarkContainer').html(`

                <div class="loading-box">

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

                    <p class="mt-2">

                        Loading student results...

                    </p>

                </div>

            `);


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

            $.ajax({

                url:
                    "{{ route('admin.result.remark.load') }}",

                type:"POST",

                data:{

                    _token:
                        "{{ csrf_token() }}",

                    class_id:
                        classId,

                    term:
                        term,

                    session:
                        session

                },


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

                success:function(response){


                    if(response.status === false){

                        $('#resultRemarkContainer').html(`

                            <div class="alert alert-danger">

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

                                ${response.message}

                            </div>

                        `);

                        return;

                    }


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

                },


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

                error:function(xhr){

                    let message =
                        'Something went wrong.';


                    if(xhr.responseJSON){

                        if(xhr.responseJSON.message){

                            message =
                                xhr.responseJSON.message;

                        }


                        if(xhr.responseJSON.errors){

                            message =
                                Object.values(
                                    xhr.responseJSON.errors
                                )
                                .flat()
                                .join('<br>');

                        }

                    }


                    Swal.fire({

                        icon:'error',

                        title:'Error',

                        html:message

                    });

                },


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

                complete:function(){

                    button

                        .prop('disabled',false)

                        .html(`

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

                            Load Results

                        `);

                }

            });

        }

    );

});

</script>

@endsection