@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">
                    Manage Student Promotion
                </h4>

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

                    <ol class="breadcrumb m-0">

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

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

                    </ol>

                </div>

            </div>

        </div>

    </div>


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

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

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

            <h5 class="mb-0">

                <i class="fas fa-sliders-h me-2"></i>

                Search Promotion Records

            </h5>

        </div>


        <div class="card-body">

            <div class="row g-3">


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

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

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

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

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

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

                        @foreach($classes as $class)

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

                        @endforeach

                    </select>

                </div>


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

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

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

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

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

                        @foreach($terms as $term)

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

                        @endforeach

                    </select>

                </div>


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

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

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

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

                        <option value="">
                            Select 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="loadManagePromotion"
                    class="btn btn-primary"
                >

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

                    Load Promotion Records

                </button>

            </div>

        </div>

    </div>


    {{-- ==========================================================
         PROMOTION TABLE
    =========================================================== --}}

    <div
        id="managePromotionContainer"
        class="card border-0 shadow-sm mt-4"
        style="display:none;"
    >

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

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

                <div>

                    <h5 class="mb-1">

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

                        Promotion Records

                    </h5>

                    <small
                        class="text-muted"
                        id="recordCount"
                    ></small>

                </div>


                <div class="d-flex flex-wrap gap-2">


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

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

                        Mark All

                    </button>


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

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

                        Clear All

                    </button>


                    <button
                        type="button"
                        id="deleteSelected"
                        class="btn btn-warning btn-sm"
                    >

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

                        Delete Selected

                    </button>


                    <button
                        type="button"
                        id="deleteAll"
                        class="btn btn-danger btn-sm"
                    >

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

                        Delete All

                    </button>

                </div>

            </div>

        </div>


        <div class="card-body">


    {{-- ==========================================================
         STUDENT SEARCH BAR
    =========================================================== --}}

    <div class="row mb-3">

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

            <div class="input-group">

                <span class="input-group-text bg-primary text-white">

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

                </span>

                <input
                    type="text"
                    id="promotionStudentSearch"
                    class="form-control"
                    placeholder="Search student name, student ID, class or subject..."
                    autocomplete="off"
                >

            </div>

        </div>

    </div>

            <div class="table-responsive">

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

                    <thead class="table-light">

                        <tr>

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

                            <th>
                                S/N
                            </th>

                            <th>
                                Student ID
                            </th>

                            <th>
                                Student Name
                            </th>

                            <th>
                                Class
                            </th>

                            <th>
                                Subject
                            </th>

                            <th>
                                Term
                            </th>

                            <th>
                                Session
                            </th>

                            <th>
                                Promoted
                            </th>

                            <th>
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody
                        id="managePromotionBody"
                    >
                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


{{-- ==========================================================
     EDIT MODAL
=========================================================== --}}

<div
    class="modal fade"
    id="editPromotionModal"
    tabindex="-1"
    aria-hidden="true"
>

    <div class="modal-dialog">

        <div class="modal-content">


            <div class="modal-header">

                <h5 class="modal-title">

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

                    Edit Promotion Record

                </h5>

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

            </div>


            <div class="modal-body">


                <input
                    type="hidden"
                    id="edit_id"
                >


                <div class="mb-3">

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

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

                        @foreach($classes as $class)

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

                        @endforeach

                    </select>

                </div>


                <div class="mb-3">

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

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

                        @foreach($terms as $term)

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

                        @endforeach

                    </select>

                </div>


                <div class="mb-3">

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

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

                        @foreach($sessions as $session)

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

                        @endforeach

                    </select>

                </div>


                {{-- ==================================================
                     PROMOTED STRING
                =================================================== --}}

                <div class="mb-3">

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

                    <input
                        type="text"
                        id="edit_promoted"
                        class="form-control"
                        placeholder="Example: Promoted to JSS2"
                    >

                    <small class="text-muted">

                        Leave empty if the student was not promoted.

                    </small>

                </div>

            </div>


            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >

                    Cancel

                </button>


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

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

                    Save Changes

                </button>

            </div>

        </div>

    </div>

</div>



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

<script>

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


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

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


        /*
        |--------------------------------------------------------------------------
        | DATA
        |--------------------------------------------------------------------------
        */

        let currentRecords = [];


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

        const body =
            document.getElementById(
                'managePromotionBody'
            );

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

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

        const deleteSelectedButton =
            document.getElementById(
                'deleteSelected'
            );

        const deleteAllButton =
            document.getElementById(
                'deleteAll'
            );

        const saveEditButton =
            document.getElementById(
                'saveEditPromotion'
            );





                    /*
        |--------------------------------------------------------------------------
        | STUDENT SEARCH
        |--------------------------------------------------------------------------
        */

        const promotionStudentSearch =
            document.getElementById(
                'promotionStudentSearch'
            );


        function filterPromotionRecords()
        {

            const searchValue =
                promotionStudentSearch
                    .value
                    .trim()
                    .toLowerCase();


            const rows =
                document.querySelectorAll(
                    '#managePromotionBody tr'
                );


            let visibleCount = 0;


            rows.forEach(
                function (row)
                {

                    /*
                    |--------------------------------------------------------------------------
                    | Ignore the "No promotion records found" row
                    |--------------------------------------------------------------------------
                    */

                    if (
                        !row.querySelector(
                            '.manageCheckbox'
                        )
                    ) {

                        return;

                    }


                    const rowText =
                        row.textContent
                            .toLowerCase();


                    if (
                        searchValue === ''
                        ||
                        rowText.includes(
                            searchValue
                        )
                    ) {

                        row.style.display =
                            '';

                        visibleCount++;

                    } else {

                        row.style.display =
                            'none';

                    }

                }
            );


            /*
            |--------------------------------------------------------------------------
            | UPDATE RECORD COUNT
            |--------------------------------------------------------------------------
            */

            const recordCount =
                document.getElementById(
                    'recordCount'
                );


            if (recordCount) {

                if (searchValue === '') {

                    recordCount.textContent =
                        currentRecords.length +
                        ' records found.';

                } else {

                    recordCount.textContent =
                        visibleCount +
                        ' matching record(s) found.';

                }

            }

        }


        if (promotionStudentSearch) {

            promotionStudentSearch.addEventListener(
                'input',
                filterPromotionRecords
            );

        }


        
        /*
        |--------------------------------------------------------------------------
        | ROUTES
        |--------------------------------------------------------------------------
        */

        const loadRoute =
            "{{ route('admin.student.promotion.manage.load') }}";

        const updateRoute =
            "{{ route('admin.student.promotion.update', ['id' => '__ID__']) }}";

        const deleteRoute =
            "{{ route('admin.student.promotion.delete', ['id' => '__ID__']) }}";

        const deleteSelectedRoute =
            "{{ route('admin.student.promotion.delete.selected') }}";

        const deleteAllRoute =
            "{{ route('admin.student.promotion.delete.all') }}";


        /*
        |--------------------------------------------------------------------------
        | 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

            });

        }


        /*
        |--------------------------------------------------------------------------
        | READ RESPONSE
        |--------------------------------------------------------------------------
        */

        async function readResponse(
            response
        ) {

            const contentType =
                response.headers.get(
                    'content-type'
                ) || '';


            if (
                contentType.includes(
                    'application/json'
                )
            ) {

                const data =
                    await response.json();


                if (!response.ok) {

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

                }


                return data;

            }


            const text =
                await response.text();


            console.error(
                text
            );


            throw new Error(
                'The server returned an unexpected response.'
            );

        }


        /*
        |--------------------------------------------------------------------------
        | LOAD RECORDS
        |--------------------------------------------------------------------------
        */

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


                const classId =
                    document.getElementById(
                        'manage_class_id'
                    ).value;


                const term =
                    document.getElementById(
                        'manage_term'
                    ).value;


                const session =
                    document.getElementById(
                        'manage_session'
                    ).value;


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

                    Swal.fire({

                        icon: 'warning',

                        title: 'Incomplete Selection',

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

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                showLoading(
                    'Loading Promotion Records...'
                );


                try {


                    const response =
                        await fetch(
                            loadRoute,
                            {

                                method: 'POST',

                                headers: {

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

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        class_id:
                                            classId,

                                        term:
                                            term,

                                        session:
                                            session

                                    })

                            }
                        );


                    const data =
                        await readResponse(
                            response
                        );


                    currentRecords =
                        data.records ?? [];


                    renderRecords();


                    Swal.close();


                    if (
                        currentRecords.length === 0
                    ) {

                        Swal.fire({

                            icon: 'info',

                            title: 'No Records Found',

                            text:
                                'No promotion records were found.',

                            confirmButtonText:
                                'OK'

                        });

                    } else {

                        Swal.fire({

                            icon: 'success',

                            title: 'Records Loaded',

                            text:
                                `${currentRecords.length} promotion record(s) loaded.`,

                            timer: 1500,

                            showConfirmButton:
                                false

                        });

                    }

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Loading Failed',

                        text:
                            error.message ??
                            'Unable to load promotion records.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | RENDER RECORDS
        |--------------------------------------------------------------------------
        */

        function renderRecords()
        {

            body.innerHTML =
                '';


            if (
                currentRecords.length === 0
            ) {

                body.innerHTML = `

                    <tr>

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

                            No promotion records found.

                        </td>

                    </tr>

                `;

                document.getElementById(
                    'recordCount'
                ).textContent =
                    '0 records found.';

                container.style.display =
                    'block';

                return;

            }


            currentRecords.forEach(
                function (
                    record,
                    index
                ) {


                    const student =
                        record.student;


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


                    const studentId =
                        student?.user?.user_name
                        ??
                        student?.user_name
                        ??
                        record.user_name;


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


                    const subjectName =
                        record.subject?.subject_name
                        ??
                        record.subject?.name
                        ??
                        'N/A';


                    let promotedDisplay =
                        '<span class="badge bg-secondary">No</span>';


                    if (
                        record.promoted !== null &&
                        record.promoted !== undefined &&
                        String(record.promoted).trim() !== ''
                    ) {

                        promotedDisplay = `

                            <span class="badge bg-success">

                                ${record.promoted}

                            </span>

                        `;

                    }


                    body.innerHTML += `

                        <tr>

                            <td>

                                <input
                                    type="checkbox"
                                    class="form-check-input manageCheckbox"
                                    value="${record.id}"
                                >

                            </td>

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

                            <td>
                                ${studentId}
                            </td>

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

                            <td>
                                ${className}
                            </td>

                            <td>
                                ${subjectName}
                            </td>

                            <td>
                                ${record.term ?? ''}
                            </td>

                            <td>
                                ${record.session ?? ''}
                            </td>

                            <td>
                                ${promotedDisplay}
                            </td>

                            <td>

                    <!--
                                <button
                                    type="button"
                                    class="btn btn-sm btn-primary editPromotion"
                                    data-id="${record.id}"
                                    title="Edit"
                                >

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

                                </button>
                    -->


                                <button
                                    type="button"
                                    class="btn btn-sm btn-danger deletePromotion"
                                    data-id="${record.id}"
                                    title="Delete"
                                >

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

                                </button>

                            </td>

                        </tr>

                    `;

                }
            );


            document.getElementById(
                'recordCount'
            ).textContent =
                currentRecords.length +
                ' records found.';


            container.style.display =
                'block';

        }


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

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

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

                            checkbox.checked =
                                true;

                        }
                    );

            }
        );


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

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

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

                            checkbox.checked =
                                false;

                        }
                    );

            }
        );


        /*
        |--------------------------------------------------------------------------
        | DELETE SELECTED
        |--------------------------------------------------------------------------
        */

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


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


                if (
                    ids.length === 0
                ) {

                    Swal.fire({

                        icon: 'warning',

                        title: 'No Records Selected',

                        text:
                            'Please select at least one promotion record.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                const confirmation =
                    await Swal.fire({

                        icon: 'warning',

                        title: 'Delete Selected Records?',

                        html: `
                            <p>
                                You are about to delete
                                <strong>
                                    ${ids.length}
                                </strong>
                                selected record(s).
                            </p>

                            <p class="text-danger mb-0">
                                This action cannot be undone.
                            </p>
                        `,

                        showCancelButton:
                            true,

                        confirmButtonText:
                            'Yes, Delete',

                        cancelButtonText:
                            'Cancel',

                        confirmButtonColor:
                            '#d33',

                        reverseButtons:
                            true

                    });


                if (
                    !confirmation.isConfirmed
                ) {

                    return;

                }


                showLoading(
                    'Deleting Selected Records...'
                );


                try {


                    const response =
                        await fetch(
                            deleteSelectedRoute,
                            {

                                method: 'POST',

                                headers: {

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

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        ids:
                                            ids

                                    })

                            }
                        );


                    const data =
                        await readResponse(
                            response
                        );


                    Swal.close();


                    if (
                        data.success
                    ) {

                        await reloadRecords();


                        Swal.fire({

                            icon: 'success',

                            title: 'Deleted',

                            text:
                                data.message ??
                                'Selected records deleted successfully.',

                            timer: 1800,

                            showConfirmButton:
                                false

                        });

                    } else {

                        throw new Error(
                            data.message ??
                            'Unable to delete selected records.'
                        );

                    }

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Delete Failed',

                        text:
                            error.message ??
                            'Unable to delete selected records.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | DELETE ALL
        |--------------------------------------------------------------------------
        */

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


                const classId =
                    document.getElementById(
                        'manage_class_id'
                    ).value;


                const term =
                    document.getElementById(
                        'manage_term'
                    ).value;


                const session =
                    document.getElementById(
                        'manage_session'
                    ).value;


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

                    Swal.fire({

                        icon: 'warning',

                        title: 'Incomplete Selection',

                        text:
                            'Please select Class, Term and Session before deleting all records.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                const confirmation =
                    await Swal.fire({

                        icon: 'warning',

                        title: 'Delete ALL Records?',

                        html: `

                            <p>
                                This will delete
                                <strong>
                                    ALL
                                </strong>
                                promotion records matching:
                            </p>

                            <p>

                                <strong>
                                    Class:
                                </strong>
                                ${document.getElementById('manage_class_id').selectedOptions[0].text}

                                <br>

                                <strong>
                                    Term:
                                </strong>
                                ${term}

                                <br>

                                <strong>
                                    Session:
                                </strong>
                                ${session}

                            </p>

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

                                This action cannot be undone.

                            </p>

                        `,

                        showCancelButton:
                            true,

                        confirmButtonText:
                            'Yes, Delete All',

                        cancelButtonText:
                            'Cancel',

                        confirmButtonColor:
                            '#d33',

                        reverseButtons:
                            true

                    });


                if (
                    !confirmation.isConfirmed
                ) {

                    return;

                }


                showLoading(
                    'Deleting All Records...'
                );


                try {


                    const response =
                        await fetch(
                            deleteAllRoute,
                            {

                                method: 'POST',

                                headers: {

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

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        class_id:
                                            classId,

                                        term:
                                            term,

                                        session:
                                            session

                                    })

                            }
                        );


                    const data =
                        await readResponse(
                            response
                        );


                    Swal.close();


                    if (
                        data.success
                    ) {

                        await reloadRecords();


                        Swal.fire({

                            icon: 'success',

                            title: 'Deleted Successfully',

                            text:
                                data.message ??
                                'All matching promotion records have been deleted.',

                            timer: 1800,

                            showConfirmButton:
                                false

                        });

                    } else {

                        throw new Error(
                            data.message ??
                            'Unable to delete all records.'
                        );

                    }

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Delete Failed',

                        text:
                            error.message ??
                            'Unable to delete all records.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | EDIT RECORD
        |--------------------------------------------------------------------------
        */

        document.addEventListener(
            'click',
            function (event) {


                const button =
                    event.target.closest(
                        '.editPromotion'
                    );


                if (!button) {

                    return;

                }


                const id =
                    button.dataset.id;


                const record =
                    currentRecords.find(
                        item =>
                            String(item.id) ===
                            String(id)
                    );


                if (!record) {

                    Swal.fire({

                        icon: 'error',

                        title: 'Record Not Found',

                        text:
                            'The selected promotion record could not be found.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                document.getElementById(
                    'edit_id'
                ).value =
                    record.id;


                document.getElementById(
                    'edit_class_id'
                ).value =
                    record.student_classes_id;


                document.getElementById(
                    'edit_term'
                ).value =
                    record.term;


                document.getElementById(
                    'edit_session'
                ).value =
                    record.session;


                document.getElementById(
                    'edit_promoted'
                ).value =
                    record.promoted ?? '';


                const modalElement =
                    document.getElementById(
                        'editPromotionModal'
                    );


                const modal =
                    bootstrap.Modal.getOrCreateInstance(
                        modalElement
                    );


                modal.show();

            }
        );


        /*
        |--------------------------------------------------------------------------
        | SAVE EDIT
        |--------------------------------------------------------------------------
        */

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


                const id =
                    document.getElementById(
                        'edit_id'
                    ).value;


                if (!id) {

                    Swal.fire({

                        icon: 'error',

                        title: 'Invalid Record',

                        text:
                            'Invalid promotion record.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                const record =
                    currentRecords.find(
                        item =>
                            String(item.id) ===
                            String(id)
                    );


                if (!record) {

                    Swal.fire({

                        icon: 'error',

                        title: 'Record Not Found',

                        text:
                            'Promotion record could not be found.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                const studentClassesId =
                    document.getElementById(
                        'edit_class_id'
                    ).value;


                const term =
                    document.getElementById(
                        'edit_term'
                    ).value;


                const session =
                    document.getElementById(
                        'edit_session'
                    ).value;


                const promoted =
                    document.getElementById(
                        'edit_promoted'
                    ).value.trim();


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

                    Swal.fire({

                        icon: 'warning',

                        title: 'Incomplete Form',

                        text:
                            'Please complete Class, Term and Session.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                const confirmation =
                    await Swal.fire({

                        icon: 'question',

                        title: 'Save Changes?',

                        text:
                            'Are you sure you want to update this promotion record?',

                        showCancelButton:
                            true,

                        confirmButtonText:
                            'Yes, Save',

                        cancelButtonText:
                            'Cancel',

                        reverseButtons:
                            true

                    });


                if (
                    !confirmation.isConfirmed
                ) {

                    return;

                }


                showLoading(
                    'Saving Changes...'
                );


                try {


                    const updateUrl =
                        updateRoute.replace(
                            '__ID__',
                            id
                        );


                    const response =
                        await fetch(
                            updateUrl,
                            {

                                method: 'PUT',

                                headers: {

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

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json'

                                },

                                body:
                                    JSON.stringify({

                                        student_classes_id:
                                            studentClassesId,

                                        subject_id:
                                            record.subject_id,

                                        term:
                                            term,

                                        session:
                                            session,

                                        promoted:
                                            promoted === ''
                                                ? null
                                                : promoted

                                    })

                            }
                        );


                    const data =
                        await readResponse(
                            response
                        );


                    Swal.close();


                    if (
                        data.success
                    ) {


                        const modalElement =
                            document.getElementById(
                                'editPromotionModal'
                            );


                        const modal =
                            bootstrap.Modal.getInstance(
                                modalElement
                            );


                        if (modal) {

                            modal.hide();

                        }


                        await reloadRecords();


                        Swal.fire({

                            icon: 'success',

                            title: 'Updated Successfully',

                            text:
                                data.message ??
                                'Promotion record updated successfully.',

                            timer: 1800,

                            showConfirmButton:
                                false

                        });

                    } else {

                        throw new Error(
                            data.message ??
                            'Unable to update promotion record.'
                        );

                    }

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Update Failed',

                        text:
                            error.message ??
                            'Unable to update promotion record.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | DELETE ONE RECORD
        |--------------------------------------------------------------------------
        */

        document.addEventListener(
            'click',
            async function (event) {


                const button =
                    event.target.closest(
                        '.deletePromotion'
                    );


                if (!button) {

                    return;

                }


                const id =
                    button.dataset.id;


                if (!id) {

                    Swal.fire({

                        icon: 'error',

                        title: 'Invalid Record',

                        text:
                            'Invalid promotion record ID.',

                        confirmButtonText:
                            'OK'

                    });

                    return;

                }


                const confirmation =
                    await Swal.fire({

                        icon: 'warning',

                        title: 'Delete Promotion Record?',

                        text:
                            'Are you sure you want to delete this promotion record?',

                        showCancelButton:
                            true,

                        confirmButtonText:
                            'Yes, Delete',

                        cancelButtonText:
                            'Cancel',

                        confirmButtonColor:
                            '#d33',

                        reverseButtons:
                            true

                    });


                if (
                    !confirmation.isConfirmed
                ) {

                    return;

                }


                showLoading(
                    'Deleting Record...'
                );


                try {


                    const deleteUrl =
                        deleteRoute.replace(
                            '__ID__',
                            id
                        );


                    const response =
                        await fetch(
                            deleteUrl,
                            {

                                method: 'DELETE',

                                headers: {

                                    'X-CSRF-TOKEN':
                                        csrfToken,

                                    'Accept':
                                        'application/json',

                                    'X-Requested-With':
                                        'XMLHttpRequest'

                                }

                            }
                        );


                    const data =
                        await readResponse(
                            response
                        );


                    Swal.close();


                    if (
                        data.success
                    ) {


                        await reloadRecords();


                        Swal.fire({

                            icon: 'success',

                            title: 'Deleted Successfully',

                            text:
                                data.message ??
                                'Promotion record deleted successfully.',

                            timer: 1800,

                            showConfirmButton:
                                false

                        });

                    } else {

                        throw new Error(
                            data.message ??
                            'Unable to delete promotion record.'
                        );

                    }

                }

                catch (error) {

                    console.error(error);

                    Swal.close();


                    Swal.fire({

                        icon: 'error',

                        title: 'Delete Failed',

                        text:
                            error.message ??
                            'Unable to delete promotion record.',

                        confirmButtonText:
                            'OK'

                    });

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | RELOAD RECORDS
        |--------------------------------------------------------------------------
        */

        async function reloadRecords()
        {

            const classId =
                document.getElementById(
                    'manage_class_id'
                ).value;


            const term =
                document.getElementById(
                    'manage_term'
                ).value;


            const session =
                document.getElementById(
                    'manage_session'
                ).value;


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

                return;

            }


            const response =
                await fetch(
                    loadRoute,
                    {

                        method: 'POST',

                        headers: {

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

                            'X-CSRF-TOKEN':
                                csrfToken,

                            'Accept':
                                'application/json'

                        },

                        body:
                            JSON.stringify({

                                class_id:
                                    classId,

                                term:
                                    term,

                                session:
                                    session

                            })

                    }
                );


            const data =
                await readResponse(
                    response
                );


            currentRecords =
                data.records ?? [];


            renderRecords();

        }

    }
);

</script>

@endsection