@extends('backend.admin_backend.admin_dashboard')

@section('admin')


<div class="container-fluid">

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

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h4 class="mb-1">
                <i class="fas fa-graduation-cap"></i>
                Promotion Grading
            </h4>

            <p class="text-muted mb-0">
                Set the minimum subject scores required for promotion.
            </p>

        </div>

    </div>


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

    <div class="card shadow-sm">

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

            <strong>
                Promotion Grading Requirements
            </strong>

        </div>


        <div class="card-body">


            {{-- ==================================================
                 CLASS / TERM / SESSION
            =================================================== --}}

            <div class="row">

                {{-- CLASS --}}

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

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

                    <select
                        class="form-select"
                        id="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 fw-bold">
                        Term
                    </label>

                    <select
                        class="form-select"
                        id="term"
                    >

                        <option value="">
                            Select Term
                        </option>

                        @foreach($terms as $termItem)

                            <option
                                value="{{ $termItem->name }}"
                                @if(
                                    $currentTerm &&
                                    $currentTerm->id == $termItem->id
                                )
                                    selected
                                @endif
                            >

                                {{ $termItem->name }}

                            </option>

                        @endforeach

                    </select>

                </div>


                {{-- SESSION --}}

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

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

                    <select
                        class="form-select"
                        id="session"
                    >

                        <option value="">
                            Select Session
                        </option>

                        @foreach($sessions as $sessionItem)

                            <option
                                value="{{ $sessionItem->name }}"
                                @if(
                                    $currentSession &&
                                    $currentSession->id == $sessionItem->id
                                )
                                    selected
                                @endif
                            >

                                {{ $sessionItem->name }}

                            </option>

                        @endforeach

                    </select>

                </div>

            </div>


            <hr>


            {{-- ==================================================
                 INSTRUCTION
            =================================================== --}}

            <div class="alert alert-info">

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

                <strong>
                    How promotion grading works:
                </strong>

                <ul class="mb-0 mt-2">

                    <li>
                        You can select between
                        <strong>1 and 5 subjects</strong>.
                    </li>

                    <li>
                        Empty subject fields will be ignored.
                    </li>

                    <li>
                        The student must meet the minimum score
                        in every subject you select.
                    </li>

                    <li>
                        If the student fails any selected subject,
                        the student will be
                        <strong>PROMOTED ON TRIAL</strong>.
                    </li>

                </ul>

            </div>


            {{-- ==================================================
                 SUBJECTS
            =================================================== --}}

            <div class="row">

                @for($i = 1; $i <= 5; $i++)

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

                        <div class="border rounded p-3">

                            <h6 class="fw-bold mb-3">

                                Subject {{ $i }}

                                @if($i > 1)

                                    <span class="text-muted">
                                        (Optional)
                                    </span>

                                @endif

                            </h6>


                            {{-- SUBJECT --}}

                            <div class="mb-3">

                                <label class="form-label">
                                    Subject
                                </label>

                                <select
                                    class="form-select subject-select"
                                    name="subjects[]"
                                    id="subject_{{ $i }}"
                                >

                                    <option value="">
                                        Select Subject
                                    </option>

                                </select>

                            </div>


                            {{-- MINIMUM SCORE --}}

                            <div>

                                <label class="form-label">

                                    Minimum Score

                                </label>

                                <input
                                    type="number"
                                    class="form-control minimum-score"
                                    name="minimum_scores[]"
                                    id="minimum_score_{{ $i }}"
                                    min="0"
                                    max="100"
                                    step="0.01"
                                    placeholder="Example: 50"
                                >

                            </div>

                        </div>

                    </div>

                @endfor

            </div>


            {{-- ==================================================
                 BUTTONS
            =================================================== --}}

            <div class="d-flex gap-2 mt-3">

                <button
                    type="button"
                    class="btn btn-primary"
                    id="savePromotionGrading"
                >

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

                    Save Grading

                </button>


                <button
                    type="button"
                    class="btn btn-danger"
                    id="deletePromotionGrading"
                >

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

                    Delete Configuration

                </button>

            </div>


            {{-- ==================================================
                 CURRENT CONFIGURATION
            =================================================== --}}

            <div
                class="mt-5"
                id="currentConfiguration"
            ></div>


        </div>

    </div>

</div>


{{-- ==========================================================
     SWEETALERT2
=========================================================== --}}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {


        /*
         * ======================================================
         * ELEMENTS
         * ======================================================
         */

        const classSelect =
            document.getElementById(
                'class_id'
            );

        const termSelect =
            document.getElementById(
                'term'
            );

        const sessionSelect =
            document.getElementById(
                'session'
            );

        const saveButton =
            document.getElementById(
                'savePromotionGrading'
            );

        const deleteButton =
            document.getElementById(
                'deletePromotionGrading'
            );

        const configuration =
            document.getElementById(
                'currentConfiguration'
            );


        const subjectSelects =
            document.querySelectorAll(
                '.subject-select'
            );


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

        function showLoading(
            message
        ) {

            Swal.fire({

                title: message,

                html:
                    `
                    <div class="spinner-border text-primary"
                         role="status">
                    </div>
                    `,

                allowOutsideClick: false,

                showConfirmButton: false

            });

        }


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

        function closeLoading()
        {
            Swal.close();
        }


        /*
         * ======================================================
         * RESET SUBJECTS
         * ======================================================
         */

        function resetSubjects()
        {

            subjectSelects.forEach(
                function(select)
                {

                    select.innerHTML =
                        `
                        <option value="">
                            Select Subject
                        </option>
                        `;

                }
            );


            document
                .querySelectorAll(
                    '.minimum-score'
                )
                .forEach(
                    function(input)
                    {

                        input.value = '';

                    }
                );

        }


        /*
         * ======================================================
         * LOAD SUBJECTS
         * ======================================================
         */

        function loadSubjects()
        {

            resetSubjects();

            configuration.innerHTML = '';


            const classId =
                classSelect.value;


            if (!classId)
            {
                return;
            }


            showLoading(
                'Loading subjects...'
            );


            fetch(
                "{{ route('admin.promotion.grading.load.subjects') }}",
                {

                    method: 'POST',

                    headers: {

                        'Content-Type':
                            'application/json',

                        'X-CSRF-TOKEN':
                            '{{ csrf_token() }}',

                        'Accept':
                            'application/json'

                    },

                    body:
                        JSON.stringify({

                            class_id:
                                classId

                        })

                }
            )
            .then(
                response =>
                    response.json()
            )
            .then(
                data =>
                {

                    closeLoading();


                    if (
                        !data.success
                    )
                    {

                        Swal.fire(
                            'Error',
                            'Unable to load subjects.',
                            'error'
                        );

                        return;

                    }


                    subjectSelects.forEach(
                        function(select)
                        {

                            data.subjects.forEach(
                                function(subject)
                                {

                                    const option =
                                        document.createElement(
                                            'option'
                                        );

                                    option.value =
                                        subject.id;

                                    option.textContent =
                                        subject.subject_name;

                                    select.appendChild(
                                        option
                                    );

                                }
                            );

                        }
                    );


                    loadRules();

                }
            )
            .catch(
                function(error)
                {

                    closeLoading();

                    console.error(error);

                    Swal.fire(
                        'Error',
                        'Something went wrong while loading subjects.',
                        'error'
                    );

                }
            );

        }


        /*
         * ======================================================
         * LOAD EXISTING RULES
         * ======================================================
         */

        function loadRules()
        {

            const classId =
                classSelect.value;

            const term =
                termSelect.value;

            const session =
                sessionSelect.value;


            if (
                !classId ||
                !term ||
                !session
            )
            {
                return;
            }


            fetch(
                "{{ route('admin.promotion.grading.load.rules') }}",
                {

                    method: 'POST',

                    headers: {

                        'Content-Type':
                            'application/json',

                        'X-CSRF-TOKEN':
                            '{{ csrf_token() }}',

                        'Accept':
                            'application/json'

                    },

                    body:
                        JSON.stringify({

                            class_id:
                                classId,

                            term:
                                term,

                            session:
                                session

                        })

                }
            )
            .then(
                response =>
                    response.json()
            )
            .then(
                data =>
                {

                    if (
                        !data.success
                    )
                    {
                        return;
                    }


                    /*
                     * Clear existing values
                     */
                    subjectSelects.forEach(
                        function(select)
                        {

                            select.value = '';

                        }
                    );


                    document
                        .querySelectorAll(
                            '.minimum-score'
                        )
                        .forEach(
                            function(input)
                            {

                                input.value = '';

                            }
                        );


                    /*
                     * ==================================================
                     * PUT EXISTING RULES INTO THE FORM
                     * ==================================================
                     */

                    data.rules.forEach(
                        function(rule, index)
                        {

                            if (
                                index >= 5
                            )
                            {
                                return;
                            }


                            const subjectSelect =
                                document.getElementById(
                                    'subject_' +
                                    (index + 1)
                                );


                            const scoreInput =
                                document.getElementById(
                                    'minimum_score_' +
                                    (index + 1)
                                );


                            if (
                                subjectSelect
                            )
                            {

                                subjectSelect.value =
                                    rule.subject_id;

                            }


                            if (
                                scoreInput
                            )
                            {

                                scoreInput.value =
                                    rule.minimum_score;

                            }

                        }
                    );


                    displayCurrentConfiguration(
                        data.rules
                    );

                }
            )
            .catch(
                function(error)
                {

                    console.error(error);

                }
            );

        }


        /*
         * ======================================================
         * DISPLAY CURRENT CONFIGURATION
         * ======================================================
         */

        function displayCurrentConfiguration(
            rules
        )
        {

            if (
                !rules ||
                rules.length === 0
            )
            {

                configuration.innerHTML =
                    `
                    <div class="alert alert-secondary">
                        No promotion grading has been configured
                        for this class, term and session.
                    </div>
                    `;

                return;

            }


            let html = '';


            html +=
                `
                <div class="card border-success">

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

                        <strong>
                            Current Promotion Grading
                        </strong>

                    </div>

                    <div class="card-body">

                        <div class="table-responsive">

                            <table class="table table-bordered">

                                <thead>

                                    <tr>

                                        <th>
                                            S/N
                                        </th>

                                        <th>
                                            Subject
                                        </th>

                                        <th>
                                            Minimum Score
                                        </th>

                                    </tr>

                                </thead>

                                <tbody>
                `;


            rules.forEach(
                function(rule, index)
                {

                    html +=
                        `
                        <tr>

                            <td>
                                ${index + 1}
                            </td>

                            <td>
                                ${rule.subject.subject_name}
                            </td>

                            <td>
                                ${rule.minimum_score}
                            </td>

                        </tr>
                        `;

                }
            );


            html +=
                `
                                </tbody>

                            </table>

                        </div>

                    </div>

                </div>
                `;


            configuration.innerHTML =
                html;

        }


        /*
         * ======================================================
         * CLASS CHANGED
         * ======================================================
         */

        classSelect.addEventListener(
            'change',
            loadSubjects
        );


        /*
         * ======================================================
         * TERM / SESSION CHANGED
         * ======================================================
         */

        termSelect.addEventListener(
            'change',
            loadRules
        );


        sessionSelect.addEventListener(
            'change',
            loadRules
        );


        /*
         * ======================================================
         * SAVE
         * ======================================================
         */

        saveButton.addEventListener(
            'click',
            function()
            {

                const classId =
                    classSelect.value;

                const term =
                    termSelect.value;

                const session =
                    sessionSelect.value;


                if (
                    !classId ||
                    !term ||
                    !session
                )
                {

                    Swal.fire(
                        'Required',
                        'Please select class, term and session.',
                        'warning'
                    );

                    return;

                }


                const subjects = [];

                const minimumScores = [];


                subjectSelects.forEach(
                    function(select, index)
                    {

                        const subjectId =
                            select.value;


                        const scoreInput =
                            document.getElementById(
                                'minimum_score_' +
                                (index + 1)
                            );


                        const score =
                            scoreInput.value;


                        subjects.push(
                            subjectId || null
                        );


                        minimumScores.push(
                            score === ''
                                ? null
                                : score
                        );

                    }
                );


                /*
                 * ==================================================
                 * CHECK THAT AT LEAST ONE SUBJECT WAS SELECTED
                 * ==================================================
                 */

                const selectedCount =
                    subjects.filter(
                        subject =>
                            subject !== null
                    ).length;


                if (
                    selectedCount === 0
                )
                {

                    Swal.fire(
                        'No Subject Selected',
                        'Please select at least one subject.',
                        'warning'
                    );

                    return;

                }


                /*
                 * ==================================================
                 * CHECK SCORE FOR SELECTED SUBJECTS
                 * ==================================================
                 */

                for (
                    let i = 0;
                    i < 5;
                    i++
                )
                {

                    if (
                        subjects[i] !== null &&
                        (
                            minimumScores[i] === null ||
                            minimumScores[i] === ''
                        )
                    )
                    {

                        Swal.fire(
                            'Minimum Score Required',
                            'Please enter the minimum score for every selected subject.',
                            'warning'
                        );

                        return;

                    }

                }


                /*
                 * ==================================================
                 * CONFIRM SAVE
                 * ==================================================
                 */

                Swal.fire({

                    title:
                        'Save Promotion Grading?',

                    text:
                        `You are configuring ${selectedCount} subject(s).`,

                    icon:
                        'question',

                    showCancelButton:
                        true,

                    confirmButtonText:
                        'Yes, Save',

                    cancelButtonText:
                        'Cancel'

                })
                .then(
                    function(result)
                    {

                        if (
                            !result.isConfirmed
                        )
                        {
                            return;
                        }


                        showLoading(
                            'Saving promotion grading...'
                        );


                        fetch(
                            "{{ route('admin.promotion.grading.store') }}",
                            {

                                method: 'POST',

                                headers: {

                                    'Content-Type':
                                        'application/json',

                                    'X-CSRF-TOKEN':
                                        '{{ csrf_token() }}',

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        class_id:
                                            classId,

                                        term:
                                            term,

                                        session:
                                            session,

                                        subjects:
                                            subjects,

                                        minimum_scores:
                                            minimumScores

                                    })

                            }
                        )
                        .then(
                            response =>
                                response.json()
                        )
                        .then(
                            data =>
                            {

                                closeLoading();


                                if (
                                    data.success
                                )
                                {

                                    Swal.fire(
                                        'Success',
                                        data.message,
                                        'success'
                                    );


                                    loadRules();

                                }
                                else
                                {

                                    Swal.fire(
                                        'Error',
                                        data.message ||
                                        'Unable to save configuration.',
                                        'error'
                                    );

                                }

                            }
                        )
                        .catch(
                            function(error)
                            {

                                closeLoading();

                                console.error(error);

                                Swal.fire(
                                    'Error',
                                    'Something went wrong while saving.',
                                    'error'
                                );

                            }
                        );

                    }
                );

            }
        );


        /*
         * ======================================================
         * DELETE CONFIGURATION
         * ======================================================
         */

        deleteButton.addEventListener(
            'click',
            function()
            {

                const classId =
                    classSelect.value;

                const term =
                    termSelect.value;

                const session =
                    sessionSelect.value;


                if (
                    !classId ||
                    !term ||
                    !session
                )
                {

                    Swal.fire(
                        'Required',
                        'Please select class, term and session.',
                        'warning'
                    );

                    return;

                }


                Swal.fire({

                    title:
                        'Delete Configuration?',

                    text:
                        'This will remove all promotion grading subjects for the selected class, term and session.',

                    icon:
                        'warning',

                    showCancelButton:
                        true,

                    confirmButtonText:
                        'Yes, Delete',

                    cancelButtonText:
                        'Cancel',

                    confirmButtonColor:
                        '#dc3545'

                })
                .then(
                    function(result)
                    {

                        if (
                            !result.isConfirmed
                        )
                        {
                            return;
                        }


                        showLoading(
                            'Deleting configuration...'
                        );


                        fetch(
                            "{{ route('admin.promotion.grading.delete') }}",
                            {

                                method: 'DELETE',

                                headers: {

                                    'Content-Type':
                                        'application/json',

                                    'X-CSRF-TOKEN':
                                        '{{ csrf_token() }}',

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        class_id:
                                            classId,

                                        term:
                                            term,

                                        session:
                                            session

                                    })

                            }
                        )
                        .then(
                            response =>
                                response.json()
                        )
                        .then(
                            data =>
                            {

                                closeLoading();


                                if (
                                    data.success
                                )
                                {

                                    Swal.fire(
                                        'Deleted',
                                        data.message,
                                        'success'
                                    );


                                    resetSubjects();

                                    configuration.innerHTML =
                                        `
                                        <div class="alert alert-secondary">
                                            No promotion grading has been configured.
                                        </div>
                                        `;

                                }
                                else
                                {

                                    Swal.fire(
                                        'Error',
                                        data.message ||
                                        'Unable to delete configuration.',
                                        'error'
                                    );

                                }

                            }
                        )
                        .catch(
                            function(error)
                            {

                                closeLoading();

                                console.error(error);

                                Swal.fire(
                                    'Error',
                                    'Something went wrong while deleting.',
                                    'error'
                                );

                            }
                        );

                    }
                );

            }
        );


        /*
         * ======================================================
         * AUTOMATICALLY LOAD CURRENT CLASS
         * ======================================================
         *
         * We don't automatically select a class because
         * the admin needs to choose the class.
         *
         * But if a class already has a value, load subjects.
         */
        if (
            classSelect.value
        )
        {

            loadSubjects();

        }

    }

);

</script>

@endsection