@extends('backend.admin_backend.admin_dashboard')

@section('admin')

<div class="container-fluid">

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

    <div class="row">

        <div class="col-12">

            <div class="page-title-box d-sm-flex align-items-center justify-content-between">

                <h4 class="mb-sm-0">
                    Student Promotion
                </h4>

                <div class="page-title-right">

                    <ol class="breadcrumb m-0">

                        <li class="breadcrumb-item">
                            Students
                        </li>

                        <li class="breadcrumb-item active">
                            Promotion
                        </li>

                    </ol>

                </div>

            </div>

        </div>

    </div>


    {{-- ==========================================================
         PROMOTION FORM
    =========================================================== --}}

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

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

            <h5 class="mb-0">

                <i class="fas fa-user-graduate me-2"></i>

                Promote / Re-enter Students

            </h5>

        </div>


        <div class="card-body">

            <div id="promotionMessage"></div>


            <div class="row g-3">

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

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

                    <label class="form-label fw-semibold">
                        Old Class
                    </label>

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

                        <option value="">
                            Select Old Class
                        </option>

                        <option value="all">
                            All Classes
                        </option>

                        @foreach($classes as $class)

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

                        @endforeach

                    </select>

                </div>


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

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

                    <label class="form-label fw-semibold">
                        Old Term
                    </label>

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

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

                        @foreach($terms as $term)

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

                        @endforeach

                    </select>

                </div>


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

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

                    <label class="form-label fw-semibold">
                        Old Session
                    </label>

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

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

                        @foreach($sessions as $session)

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

                        @endforeach

                    </select>

                </div>

            </div>


            <hr class="my-4">


            {{-- ==========================================================
                 NEW DESTINATION
            =========================================================== --}}

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

                <i class="fas fa-arrow-right text-success me-2"></i>

                New Class / Term / Session

            </h6>


            <div class="row g-3">

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

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

                    <label class="form-label fw-semibold">
                        New Class
                    </label>

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

                        <option value="">
                            Select New Class
                        </option>

                        @foreach($classes as $class)

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

                        @endforeach

                    </select>

                </div>


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

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

                    <label class="form-label fw-semibold">
                        New Term
                    </label>

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

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

                        @foreach($terms as $term)

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

                        @endforeach

                    </select>

                </div>


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

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

                    <label class="form-label fw-semibold">
                        New Session
                    </label>

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

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

                        @foreach($sessions as $session)

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

                        @endforeach

                    </select>

                </div>

            </div>


            <div class="mt-4">

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

                    <i class="fas fa-search me-1"></i>

                    Load Students

                </button>

            </div>

        </div>

    </div>


    {{-- ==========================================================
         STUDENT TABLE
    =========================================================== --}}

    <div
        id="promotionStudentsContainer"
        class="mt-4"
        style="display:none;"
    >

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

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

                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">

                    <h5 class="mb-0">

                        <i class="fas fa-users text-primary me-2"></i>

                        Students

                    </h5>


                    <div>

                        <button
                            type="button"
                            id="markAllPromotion"
                            class="btn btn-outline-primary btn-sm"
                        >

                            <i class="fas fa-check-double me-1"></i>

                            Mark All

                        </button>


                        <button
                            type="button"
                            id="clearAllPromotion"
                            class="btn btn-outline-secondary btn-sm"
                        >

                            <i class="fas fa-times me-1"></i>

                            Clear All

                        </button>

                    </div>

                </div>

            </div>


            <div class="card-body">

                <div class="table-responsive">

                    <table class="table table-bordered table-hover align-middle">

                        <thead class="table-light">

                            <tr>

                                <th width="50">
                                    #
                                </th>

                                <th>
                                    S/N
                                </th>

                                <th>
                                    Student ID
                                </th>

                                <th>
                                    Student Name
                                </th>

                                <th>
                                    Old Class
                                </th>

                            </tr>

                        </thead>


                        <tbody id="promotionStudentsBody">
                        </tbody>

                    </table>

                </div>


                <div class="text-end mt-3">

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

                        <i class="fas fa-user-graduate me-1"></i>

                        Promote / Re-enter Selected

                    </button>

                </div>

            </div>

        </div>

    </div>

</div>


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

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


{{-- ==========================================================
     JAVASCRIPT
=========================================================== --}}

<script>

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


        /*
        |--------------------------------------------------------------------------
        | CSRF
        |--------------------------------------------------------------------------
        */

        const csrfToken =
            document.querySelector(
                'meta[name="csrf-token"]'
            ).getAttribute('content');


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

        const oldClass =
            document.getElementById(
                'old_class_id'
            );

        const oldTerm =
            document.getElementById(
                'old_term'
            );

        const oldSession =
            document.getElementById(
                'old_session'
            );

        const newClass =
            document.getElementById(
                'new_class_id'
            );

        const newTerm =
            document.getElementById(
                'new_term'
            );

        const newSession =
            document.getElementById(
                'new_session'
            );

        const loadButton =
            document.getElementById(
                'loadPromotionStudents'
            );

        const promoteButton =
            document.getElementById(
                'promoteSelectedStudents'
            );

        const studentsBody =
            document.getElementById(
                'promotionStudentsBody'
            );

        const container =
            document.getElementById(
                'promotionStudentsContainer'
            );


        /*
        |--------------------------------------------------------------------------
        | SWEETALERT LOADING
        |--------------------------------------------------------------------------
        */

        function showLoading(
            title = 'Please wait...'
        ) {

            Swal.fire({

                title: title,

                html: `
                    <div
                        class="d-flex justify-content-center mt-3"
                    >

                        <div
                            class="spinner-border text-primary"
                            role="status"
                            style="
                                width:3rem;
                                height:3rem;
                            "
                        ></div>

                    </div>
                `,

                allowOutsideClick: false,

                allowEscapeKey: false,

                showConfirmButton: false

            });

        }


        /*
        |--------------------------------------------------------------------------
        | LOAD STUDENTS
        |--------------------------------------------------------------------------
        */

        loadButton.addEventListener(
            'click',
            async function () {


                if (
                    !oldClass.value ||
                    !oldTerm.value ||
                    !oldSession.value
                ) {

                    Swal.fire({

                        icon: 'warning',

                        title: 'Incomplete Selection',

                        text:
                            'Please select Old Class, Old Term and Old Session.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                showLoading(
                    'Loading Students...'
                );


                studentsBody.innerHTML = '';

                container.style.display = 'none';


                try {


                    const response =
                        await fetch(
                            "{{ route('admin.student.promotion.load') }}",
                            {

                                method: 'POST',

                                headers: {

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

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        class_id:
                                            oldClass.value,

                                        term:
                                            oldTerm.value,

                                        session:
                                            oldSession.value

                                    })

                            }
                        );


                    const data =
                        await response.json();


                    Swal.close();


                    if (!response.ok) {

                        throw new Error(
                            data.message ??
                            'Unable to load students.'
                        );

                    }


                    if (
                        !data.success ||
                        !data.students ||
                        data.students.length === 0
                    ) {

                        container.style.display =
                            'block';


                        studentsBody.innerHTML = `

                            <tr>

                                <td
                                    colspan="5"
                                    class="text-center text-muted py-4"
                                >

                                    No students found for
                                    the selected class,
                                    term and session.

                                </td>

                            </tr>

                        `;


                        Swal.fire({

                            icon: 'info',

                            title: 'No Students Found',

                            text:
                                'No students were found for the selected class, term and session.',

                            confirmButtonText:
                                'OK'

                        });


                        return;

                    }


                    data.students.forEach(
                        function (
                            assignment,
                            index
                        ) {


                            const student =
                                assignment.student;


                            const studentName =
                                student?.user?.name
                                ??
                                student?.name
                                ??
                                'Unknown Student';


                            const studentId =
                                student?.student_id
                                ??
                                student?.id
                                ??
                                assignment.student_id;


                            const className =
                                assignment.class?.class_name
                                ??
                                'N/A';


                            studentsBody.innerHTML += `

                                <tr>

                                    <td>

                                        <input
                                            type="checkbox"
                                            class="form-check-input promotionStudent"
                                            value="${assignment.student_id}"
                                        >

                                    </td>

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

                                    <td>
                                        ${studentId}
                                    </td>

                                    <td class="fw-semibold">
                                        ${studentName}
                                    </td>

                                    <td>
                                        ${className}
                                    </td>

                                </tr>

                            `;

                        }
                    );


                    container.style.display =
                        'block';


                    Swal.fire({

                        icon: 'success',

                        title: 'Students Loaded',

                        text:
                            `${data.students.length} student(s) loaded successfully.`,

                        timer: 1800,

                        showConfirmButton: false

                    });

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Loading Failed',

                        text:
                            error.message ??
                            'Unable to load students.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | MARK ALL
        |--------------------------------------------------------------------------
        */

        document.getElementById(
            'markAllPromotion'
        ).addEventListener(
            'click',
            function () {

                document
                    .querySelectorAll(
                        '.promotionStudent'
                    )
                    .forEach(
                        checkbox => {

                            checkbox.checked =
                                true;

                        }
                    );

            }
        );


        /*
        |--------------------------------------------------------------------------
        | CLEAR ALL
        |--------------------------------------------------------------------------
        */

        document.getElementById(
            'clearAllPromotion'
        ).addEventListener(
            'click',
            function () {

                document
                    .querySelectorAll(
                        '.promotionStudent'
                    )
                    .forEach(
                        checkbox => {

                            checkbox.checked =
                                false;

                        }
                    );

            }
        );


        /*
        |--------------------------------------------------------------------------
        | PROMOTE / RE-ENTER
        |--------------------------------------------------------------------------
        */

        promoteButton.addEventListener(
            'click',
            async function () {


                const selectedStudents =
                    Array.from(
                        document.querySelectorAll(
                            '.promotionStudent:checked'
                        )
                    )
                    .map(
                        checkbox =>
                            checkbox.value
                    );


                if (
                    selectedStudents.length === 0
                ) {

                    Swal.fire({

                        icon: 'warning',

                        title: 'No Student Selected',

                        text:
                            'Please select at least one student.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                if (
                    !newClass.value ||
                    !newTerm.value ||
                    !newSession.value
                ) {

                    Swal.fire({

                        icon: 'warning',

                        title: 'Incomplete Selection',

                        text:
                            'Please select the New Class, New Term and New Session.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | CONFIRMATION POPUP
                |--------------------------------------------------------------------------
                */

                const confirmation =
                    await Swal.fire({

                        icon: 'question',

                        title: 'Confirm Promotion',

                        html: `
                            <p>
                                You are about to
                                <strong>
                                    promote / re-enter
                                </strong>
                                <strong>
                                    ${selectedStudents.length}
                                </strong>
                                student(s).
                            </p>

                            <p class="mb-0">
                                Do you want to continue?
                            </p>
                        `,

                        showCancelButton: true,

                        confirmButtonText:
                            'Yes, Continue',

                        cancelButtonText:
                            'Cancel',

                        reverseButtons: true

                    });


                if (
                    !confirmation.isConfirmed
                ) {

                    return;

                }


                /*
                |--------------------------------------------------------------------------
                | LOADING POPUP
                |--------------------------------------------------------------------------
                */

                showLoading(
                    'Processing Promotion...'
                );


                try {


                    const response =
                        await fetch(
                            "{{ route('admin.student.promotion.store') }}",
                            {

                                method: 'POST',

                                headers: {

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

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        old_class_id:
                                            oldClass.value,

                                        old_term:
                                            oldTerm.value,

                                        old_session:
                                            oldSession.value,

                                        new_class_id:
                                            newClass.value,

                                        new_term:
                                            newTerm.value,

                                        new_session:
                                            newSession.value,

                                        student_ids:
                                            selectedStudents

                                    })

                            }
                        );


                    const data =
                        await response.json();


                    Swal.close();


                    if (!response.ok) {

                        throw new Error(
                            data.message ??
                            'Promotion failed.'
                        );

                    }


                    if (data.success) {


                        await Swal.fire({

                            icon: 'success',

                            title: 'Successful',

                            text:
                                data.message ??
                                'Students promoted successfully.',

                            confirmButtonText:
                                'OK'

                        });


                        document
                            .querySelectorAll(
                                '.promotionStudent:checked'
                            )
                            .forEach(
                                checkbox => {

                                    checkbox.checked =
                                        false;

                                }
                            );

                    } else {

                        Swal.fire({

                            icon: 'error',

                            title: 'Promotion Failed',

                            text:
                                data.message ??
                                'Promotion failed.',

                            confirmButtonText:
                                'OK'

                        });

                    }

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Error',

                        text:
                            error.message ??
                            'An error occurred while promoting students.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );

    }
);

</script>

@endsection