@extends('backend.teacher_backend.teacher_dashboard')
@section('teacher')

<style>

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

.psycho-card{
    border:none;
    border-radius:12px;
    overflow:hidden;
}


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

.psycho-header{
    background:linear-gradient(135deg,#198754,#157347);
    color:white;
    padding:18px 22px;
}

.psycho-header h4{
    margin:0;
    font-weight:700;
}


/* ==========================================================
   FORM
========================================================== */

.form-label{
    font-weight:600;
}

.selection-card{
    background:#f8f9fa;
    border:1px solid #e3e3e3;
    border-radius:10px;
    padding:20px;
}


/* ==========================================================
   STUDENTS AREA
========================================================== */

#studentsArea{
    margin-top:25px;
}


/* ==========================================================
   COMMENT TITLE / TOP ACTION
========================================================== */

.assessment-topbar{
    position:sticky;
    top:0;
    z-index:1000;

    background:white;

    padding:15px 10px;

    border-bottom:1px solid #ddd;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}


/* Dynamic heading */

.assessment-title{
    margin:0;

    font-size:18px;

    font-weight:800;

    color:#198754;

    text-transform:uppercase;

    letter-spacing:.3px;
}


/* Top save button */

.top-save-btn{
    white-space:nowrap;
}


/* ==========================================================
   TABLE CONTAINER
========================================================== */

.table-responsive{
    overflow:auto;

    max-height:65vh;

    border:1px solid #dee2e6;
}


/* ==========================================================
   TABLE
========================================================== */

.psycho-table{
    border-collapse:separate;

    border-spacing:0;

    width:max-content;

    min-width:100%;

    background:white;
}


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

.psycho-table thead th{

    position:sticky;

    top:0;

    z-index:20;

    background:#198754;

    color:white;

    text-align:center;

    vertical-align:middle;

    white-space:nowrap;

    font-size:13px;

    padding:10px 8px;

    border:1px solid #157347;
}


/* ==========================================================
   TABLE BODY
========================================================== */

.psycho-table td{

    vertical-align:middle;

    text-align:center;

    white-space:nowrap;

    font-size:13px;

    padding:10px 8px;

    border:1px solid #dee2e6;

}


/* ==========================================================
   ZEBRA ROWS
========================================================== */

.psycho-table tbody tr:nth-child(even) td{
    background:#f8f9fa;
}

.psycho-table tbody tr:nth-child(odd) td{
    background:#ffffff;
}


/* ==========================================================
   HOVER
========================================================== */

.psycho-table tbody tr:hover td{
    background:#fff8d8 !important;

    transition:.2s;
}


/* ==========================================================
   STICKY LEFT COLUMNS
========================================================== */


/*
| S/N
*/

.sticky-sn{

    position:sticky;

    left:0;

    z-index:30;

    min-width:60px;

    width:60px;

}


/*
| STUDENT ID
*/

.sticky-id{

    position:sticky;

    left:60px;

    z-index:30;

    min-width:130px;

    width:130px;

}


/*
| STUDENT NAME
*/

.sticky-name{

    position:sticky;

    left:190px;

    z-index:30;

    min-width:220px;

    width:220px;

}


/* Sticky header versions */

.psycho-table thead .sticky-sn,
.psycho-table thead .sticky-id,
.psycho-table thead .sticky-name{

    z-index:50;

    background:#198754;

    color:white;

}


/* Sticky body cells */

.psycho-table tbody .sticky-sn,
.psycho-table tbody .sticky-id,
.psycho-table tbody .sticky-name{

    z-index:10;
}


/* ==========================================================
   STUDENT NAME
========================================================== */

.student-name{

    text-align:left !important;

    font-weight:600;

    text-transform:capitalize;

}


/* ==========================================================
   ASSESSMENT SELECT
========================================================== */

.grade-select{

    min-width:70px;

    font-weight:600;

    text-align:center;

}


/* ==========================================================
   COMMENTS
========================================================== */

.comment-input{

    min-width:220px;

    min-height:80px;

    resize:vertical;

}


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

.loading-box{

    text-align:center;

    padding:40px;

    color:#198754;
}

.loading-box i{

    font-size:30px;
}


/* ==========================================================
   BOTTOM SAVE BUTTON
========================================================== */

.bottom-save{

    padding:15px 0;
}


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

@media(max-width:768px){

    .assessment-title{

        font-size:14px;

    }

    .sticky-name{

        min-width:180px;

        width:180px;

    }

    .sticky-id{

        min-width:110px;

        width:110px;

    }

    .sticky-sn{

        min-width:50px;

        width:50px;

    }

    .sticky-id{

        left:50px;

    }

    .sticky-name{

        left:160px;

    }



/* ==========================================================
   MOBILE STICKY COLUMNS
   Reduce ONLY the first 3 columns on small screens
   Nothing is hidden - text wraps inside the cells
========================================================== */



    /* S/N */
    .psycho-table th:nth-child(1),
    .psycho-table td:nth-child(1){

        width:45px;
        min-width:45px;
        max-width:45px;

        white-space:normal !important;

        word-break:break-word;
        overflow-wrap:anywhere;

    }


    /* STUDENT ID */
    .psycho-table th:nth-child(2),
    .psycho-table td:nth-child(2){

        width:75px;
        min-width:75px;
        max-width:75px;

        white-space:normal !important;

        word-break:break-word;
        overflow-wrap:anywhere;

    }


    /* STUDENT NAME */
    .psycho-table th:nth-child(3),
    .psycho-table td:nth-child(3){

        width:105px;
        min-width:105px;
        max-width:105px;

        white-space:normal !important;

        word-break:break-word;
        overflow-wrap:anywhere;

    }


    /* Keep sticky positions on mobile */

    .psycho-table th:nth-child(1),
    .psycho-table td:nth-child(1){

        position:sticky;
        left:0;
        z-index:10;

    }


    .psycho-table th:nth-child(2),
    .psycho-table td:nth-child(2){

        position:sticky;
        left:45px;
        z-index:10;

    }


    .psycho-table th:nth-child(3),
    .psycho-table td:nth-child(3){

        position:sticky;
        left:120px;
        z-index:10;

    }


    /* Sticky header must remain above sticky body cells */

    .psycho-table thead th{

        position:sticky;
        top:0;
        z-index:20;

    }


    /* First 3 header cells need highest priority */

    .psycho-table thead th:nth-child(1),
    .psycho-table thead th:nth-child(2),
    .psycho-table thead th:nth-child(3){

        z-index:30;

    }

}

</style>

<div class="container-fluid">

    <div class="card shadow psycho-card">


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

        <div class="psycho-header">

            <h4 style="color:white;">

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

                Psychomotor & Comment Bank

            </h4>

        </div>


        <div class="card-body">


            {{-- =====================================================
                 SELECTION FORM
            ====================================================== --}}

            <div class="selection-card">

                <div class="row">


                    {{-- CLASS --}}

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

                        <label class="form-label">

                            Class

                        </label>

                        <select
                            class="form-control"
                            id="class_id"
                        >

                            <option value="">

                                Select Class

                            </option>

                            @foreach($classes as $class)

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

                                    {{ $class->class_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- TERM --}}

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

                        <label class="form-label">

                            Term

                        </label>

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

                            <option value="">

                                Select Term

                            </option>

                            @foreach($terms as $term)

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

                                    {{ $currentTerm &&
                                       $currentTerm->name == $term->name
                                       ? 'selected'
                                       : '' }}
                                >

                                    {{ $term->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                    {{-- SESSION --}}

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

                        <label class="form-label">

                            Academic Session

                        </label>

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

                            <option value="">

                                Select Session

                            </option>

                            @foreach($sessions as $session)

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

                                    {{ $currentSession &&
                                       $currentSession->name == $session->name
                                       ? 'selected'
                                       : '' }}
                                >

                                    {{ $session->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>


                </div>


                {{-- LOAD BUTTON --}}

                <div class="mt-2">

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

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

                        Load Students

                    </button>

                </div>

            </div>



            {{-- =====================================================
                 STUDENTS AREA
            ====================================================== --}}

            <div id="studentsArea">

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

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

                    <p class="mb-0">

                        Select class, term and session
                        to load students.

                    </p>

                </div>

            </div>


        </div>

    </div>

</div>



<script>

$(document).ready(function () {


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

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

        let classId = $('#class_id').val();
        let term = $('#term').val();
        let session = $('#session').val();


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

        if (!classId) {
            alert('Please select a class.');
            return;
        }

        if (!term) {
            alert('Please select a term.');
            return;
        }

        if (!session) {
            alert('Please select an academic session.');
            return;
        }


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

        let button = $(this);

        button
            .prop('disabled', true)
            .html(`
                <i class="fas fa-spinner fa-spin"></i>
                Loading Students...
            `);


        $('#studentsArea').html(`

            <div class="loading-box">

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

                <p class="mt-2">
                    Loading students...
                </p>

            </div>

        `);


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

        $.ajax({

            url: "{{ route('teacher.psycho.assessment.students') }}",

            type: "GET",

            data: {

                class_id: classId,
                term: term,
                session: session

            },


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

            success: function (response) {

                buildStudentTable(
                    response.students,
                    response.assessments
                );

            },


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

            error: function (xhr) {

                console.log(xhr.responseText);

                $('#studentsArea').html(`

                    <div class="alert alert-danger">

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

                        Unable to load students.<br> No student assigned to the selected class, term and session

                    </div>

                `);

            },


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

            complete: function () {

                button
                    .prop('disabled', false)
                    .html(`
                        <i class="fas fa-users"></i>
                        Load Students
                    `);

            }

        });

    });



    /*
    |--------------------------------------------------------------------------
    | SAVE ASSESSMENT
    |--------------------------------------------------------------------------
    |
    | THIS IS THE IMPORTANT PART.
    |
    | e.preventDefault() stops the normal form submission.
    | Therefore the page DOES NOT reload.
    |
    |--------------------------------------------------------------------------
    */

/*
|--------------------------------------------------------------------------
| SAVE ASSESSMENT
|--------------------------------------------------------------------------
*/

$(document).on('submit', '#assessmentForm', function (e) {

    e.preventDefault();
    e.stopImmediatePropagation();

    let form = $(this);

    let buttons = form.find('button[type="submit"]');

    /*
    |--------------------------------------------------------------------------
    | PREVENT DOUBLE CLICK
    |--------------------------------------------------------------------------
    */

    if (buttons.first().prop('disabled')) {
        return false;
    }


    /*
    |--------------------------------------------------------------------------
    | CONFIRMATION SWEET ALERT
    |--------------------------------------------------------------------------
    */

    Swal.fire({

        title: 'Save Assessments?',

        text: 'Are you sure you want to save these psychomotor assessments and comments?',

        icon: 'question',

        showCancelButton: true,

        confirmButtonColor: '#198754',

        cancelButtonColor: '#6c757d',

        confirmButtonText: 'Yes, Save Assessments',

        cancelButtonText: 'Cancel',

        reverseButtons: true

    }).then((result) => {


        /*
        |--------------------------------------------------------------------------
        | USER CANCELLED
        |--------------------------------------------------------------------------
        */

        if (!result.isConfirmed) {

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | DISABLE BUTTONS
        |--------------------------------------------------------------------------
        */

        buttons
            .prop('disabled', true)
            .html(`
                <span
                    class="spinner-border spinner-border-sm me-1"
                    role="status"
                    aria-hidden="true">
                </span>

                Saving...
            `);


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

        $.ajax({

            url: form.attr('action'),

            type: 'POST',

            data: form.serialize(),


            /*
            |--------------------------------------------------------------------------
            | BEFORE SEND
            |--------------------------------------------------------------------------
            */

            beforeSend: function () {

                Swal.fire({

                    title: 'Saving Assessments...',

                    text: 'Please wait while the assessments are being saved.',

                    allowOutsideClick: false,

                    allowEscapeKey: false,

                    showConfirmButton: false,

                    didOpen: () => {

                        Swal.showLoading();

                    }

                });

            },


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

            success: function (response) {


                /*
                |--------------------------------------------------------------------------
                | CLOSE LOADING ALERT
                |--------------------------------------------------------------------------
                */

                Swal.close();


                /*
                |--------------------------------------------------------------------------
                | RESTORE BUTTONS
                |--------------------------------------------------------------------------
                */

                buttons
                    .prop('disabled', false)
                    .html(`
                        <i class="fas fa-save"></i>
                        Save Assessments
                    `);


                /*
                |--------------------------------------------------------------------------
                | SUCCESS SWEET ALERT
                |--------------------------------------------------------------------------
                */

                Swal.fire({

                    title: 'Saved Successfully!',

                    text: response.message ||
                          'Psychomotor assessments and comments saved successfully.',

                    icon: 'success',

                    confirmButtonColor: '#198754',

                    confirmButtonText: 'OK'

                });

            },


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

            error: function (xhr) {


                /*
                |--------------------------------------------------------------------------
                | CLOSE LOADING ALERT
                |--------------------------------------------------------------------------
                */

                Swal.close();


                /*
                |--------------------------------------------------------------------------
                | RESTORE BUTTONS
                |--------------------------------------------------------------------------
                */

                buttons
                    .prop('disabled', false)
                    .html(`
                        <i class="fas fa-save"></i>
                        Save Assessments
                    `);


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

                let message =
                    'Unable to save the assessments. Please try again.';


                if (
                    xhr.responseJSON &&
                    xhr.responseJSON.message
                ) {

                    message = xhr.responseJSON.message;

                }


                /*
                |--------------------------------------------------------------------------
                | SWEET ALERT ERROR
                |--------------------------------------------------------------------------
                */

                Swal.fire({

                    title: 'Save Failed!',

                    text: message,

                    icon: 'error',

                    confirmButtonColor: '#dc3545',

                    confirmButtonText: 'OK'

                });

            }

        });

    });


    return false;

});

    /*
    |--------------------------------------------------------------------------
    | BUILD STUDENT TABLE
    |--------------------------------------------------------------------------
    */

    function buildStudentTable(students, assessments) {


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

            $('#studentsArea').html(`

                <div class="alert alert-warning">

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

                    No students found in this class.

                </div>

            `);

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | SELECTED VALUES
        |--------------------------------------------------------------------------
        */

        let className =
            $('#class_id option:selected')
                .text()
                .trim();

        let termName =
            $('#term option:selected')
                .text()
                .trim();

        let sessionName =
            $('#session option:selected')
                .text()
                .trim();


        /*
        |--------------------------------------------------------------------------
        | START FORM
        |--------------------------------------------------------------------------
        */

        let html = `

        <form

            method="POST"

            action="{{ route('teacher.psycho.assessment.save') }}"

            id="assessmentForm"

        >

            @csrf


            <input
                type="hidden"
                name="class_id"
                value="${$('#class_id').val()}"
            >


            <input
                type="hidden"
                name="term"
                value="${$('#term').val()}"
            >


            <input
                type="hidden"
                name="session"
                value="${$('#session').val()}"
            >


            <!-- TOP BAR -->

            <div class="assessment-topbar">

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

                    <h5 class="assessment-title">

                        STUDENT COMMENT FOR

                        ${escapeHtml(className)}

                        ${escapeHtml(termName)}

                        |

                        ${escapeHtml(sessionName)}

                    </h5>


                    <button
                        type="submit"
                        class="btn btn-success top-save-btn"
                    >

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

                        Save Assessments

                    </button>

                </div>

            </div>


            <!-- TABLE -->

            <div class="table-responsive mt-3">

                <table
                    class="table table-bordered psycho-table"
                >

                    <thead>

                        <tr>

                            <th class="sticky-sn">
                                S/N
                            </th>

                            <th class="sticky-id">
                                Student ID
                            </th>

                            <th class="sticky-name">
                                Student Name
                            </th>

                            <th>Attendance</th>

                            <th>Punctuality</th>

                            <th>Neatness</th>

                            <th>Honesty</th>

                            <th>Musical</th>

                            <th>Initiative</th>

                            <th>Creativity</th>

                            <th>Sport</th>

                            <th>Perseverance</th>

                            <th>Cooperation</th>

                            <th>Teacher Comment</th>


                        </tr>

                    </thead>


                    <tbody>

        `;


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

        $.each(
            students,
            function (index, student) {


                let assessment =
                    assessments[student.id] ?? null;


                html += `

                    <tr>


                        <td class="sticky-sn">

                            ${index + 1}

                        </td>


                        <td class="sticky-id">

                            ${
                                student.user
                                    ? escapeHtml(
                                        student.user.user_name
                                    )
                                    : '-'
                            }

                        </td>


                        <td class="sticky-name student-name">

                            ${escapeHtml(student.name)}

                        </td>


                        ${gradeSelect(
                            student.id,
                            'attendance',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'punctuality',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'neatness',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'honesty',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'musical',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'initiative',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'creativity',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'sport',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'perseverance',
                            assessment
                        )}


                        ${gradeSelect(
                            student.id,
                            'cooperation',
                            assessment
                        )}


                        <td>

                            <textarea

                                class="form-control comment-input"

                                name="students[${student.id}][teacher_comment]"

                                placeholder="Teacher comment"

                                rows="3"

                            >${escapeHtml(
                                assessment?.teacher_comment ?? ''
                            )}</textarea>

                        </td>






                    </tr>

                `;

            }
        );


        /*
        |--------------------------------------------------------------------------
        | CLOSE TABLE
        |--------------------------------------------------------------------------
        */

        html += `

                    </tbody>

                </table>

            </div>


            <!-- BOTTOM SAVE BUTTON -->

            <div class="bottom-save">

                <button

                    type="submit"

                    class="btn btn-success save-assessment-btn"

                >

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

                    Save Assessments

                </button>

            </div>


        </form>

        `;


        $('#studentsArea').html(html);

    }



    /*
    |--------------------------------------------------------------------------
    | GRADE SELECT
    |--------------------------------------------------------------------------
    */

    function gradeSelect(
        studentId,
        field,
        assessment
    ) {


        let current =
            assessment
                ? assessment[field] ?? ''
                : '';


        let html = `

            <td>

                <select

                    name="students[${studentId}][${field}]"

                    class="form-control grade-select"

                >

                    <option value="">
                        -
                    </option>

        `;


        let grades = [
            'A',
            'B',
            'C',
            'D',
            'E',
            'F'
        ];


        grades.forEach(function (grade) {

            html += `

                <option

                    value="${grade}"

                    ${
                        current === grade
                            ? 'selected'
                            : ''
                    }

                >

                    ${grade}

                </option>

            `;

        });


        html += `

                </select>

            </td>

        `;


        return html;

    }



    /*
    |--------------------------------------------------------------------------
    | ESCAPE HTML
    |--------------------------------------------------------------------------
    */

    function escapeHtml(value) {

        if (!value) {

            return '';

        }


        return $('<div>')
            .text(value)
            .html();

    }


});

</script>

@endsection