@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">

                <h4 class="page-title">
                    Print Report Card
                </h4>

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

                    <ol class="breadcrumb m-0">

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

                        <li class="breadcrumb-item active">
                            Print Report Card
                        </li>

                    </ol>

                </div>

            </div>

        </div>

    </div>



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

    <div class="row">

        <div class="col-12">

            <div class="card">

                <div class="card-body">


                    {{-- ==================================================
                         TITLE
                    =================================================== --}}

                    <h4 class="header-title mb-3 no-print">

                        Generate Student Report Cards

                    </h4>


                    <p class="text-muted mb-4 no-print">

                        Select the class, term and academic session
                        to generate the students' report cards.

                    </p>



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

                    <form
                        id="reportCardFilterForm"
                        method="POST"
                    >

                        @csrf


                        <div class="row">


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

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

                                <label
                                    for="reportCardClass"
                                    class="form-label"
                                >

                                    Class

                                </label>


                                <select
                                    name="class_id"
                                    id="reportCardClass"
                                    class="form-select"
                                >

                                    <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
                                    for="reportCardTerm"
                                    class="form-label"
                                >

                                    Term

                                </label>


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

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


                                    @foreach($terms as $term)

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

                                            {{ $term->name }}

                                        </option>

                                    @endforeach

                                </select>

                            </div>



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

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

                                <label
                                    for="reportCardSession"
                                    class="form-label"
                                >

                                    Academic Session

                                </label>


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

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


                                    @foreach($sessions as $session)

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

                                            {{ $session->name }}

                                        </option>

                                    @endforeach

                                </select>

                            </div>


                        </div>



                        {{-- ==================================================
                             BUTTON
                        =================================================== --}}

                        <div class="mt-2">

                            <button
                                type="submit"
                                class="btn btn-primary"
                                id="loadReportCardsButton"
                            >

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

                                Generate Report Cards

                            </button>

                        </div>


                    </form>


                </div>

            </div>

        </div>

    </div>



    {{-- ==========================================================
         AJAX REPORT CARD RESULTS
    =========================================================== --}}

    <div
        class="row mt-3"
        id="reportCardResults"
    >

        {{--

            Report cards will be inserted here
            through AJAX.

        --}}

    </div>


</div>



{{-- ==============================================================
     PAGE STYLING
================================================================ --}}

<style>


/*
|--------------------------------------------------------------------------
| REPORT CARD FILTER
|--------------------------------------------------------------------------
*/

#reportCardFilterForm .form-label {

    font-weight: 600;

}


/*
|--------------------------------------------------------------------------
| REPORT CARD RESULTS
|--------------------------------------------------------------------------
*/

#reportCardResults {

    width: 100%;

}


/*
|--------------------------------------------------------------------------
| REPORT CARD ACTIONS
|--------------------------------------------------------------------------
*/

.report-card-actions {

    margin-bottom: 20px;

}


/*
|--------------------------------------------------------------------------
| REPORT CARD
|--------------------------------------------------------------------------
*/

.report-card {

    position: relative;

    background: #ffffff;

    width: 100%;

    margin-bottom: 30px;

    padding: 20px;

    border: 1px solid #dee2e6;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.08);

    overflow: hidden;
}

/* ==========================================================
   WATERMARK
========================================================== */

.report-watermark {

    position: absolute;

    top: 76%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 420px;

    height: 420px;

    opacity: 0.9;

    pointer-events: none;

    z-index: 0;

}


.report-watermark img {

    width: 100%;

    height: 100%;

    object-fit: contain;
}

.report-card > *:not(.report-watermark) {

    position: relative;

    z-index: 1;
}

@media print {

    .report-watermark {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        opacity: 0.06;

        z-index: 0;

        display: flex;

    }


    .report-card > *:not(.report-watermark) {

        position: relative;

        z-index: 1;

    }

}


/*
|--------------------------------------------------------------------------
| SCHOOL HEADER
|--------------------------------------------------------------------------
*/

.report-school-header {

    width: 100%;

    border-collapse: collapse;

}


.report-school-header td {

    border: 1px solid #000;

    vertical-align: middle;

}


/*
|--------------------------------------------------------------------------
| LOGO CELL
|--------------------------------------------------------------------------
*/

.school-logo-cell {

    width: 20%;

    text-align: left;

    padding: 10px;

}


.school-logo {

    width: 120px;

    max-width: 100%;

    height: auto;

}


/*
|--------------------------------------------------------------------------
| SCHOOL INFORMATION
|--------------------------------------------------------------------------
*/

.school-information-cell {

    width: 60%;

    text-align: center;

    padding: 10px;

}


.school-name {

    font-size: 24px;

    font-weight: 700;

    text-transform: uppercase;

    color: #198754;

}



.school-motto {

    font-size: 13px;

    font-style: italic;

    font-weight: 600;

    margin-top: 5px;

}





.pupil-id {

    font-size: 14px;

    font-weight: 600;

    margin-top: 3px;
    

}


/*
|--------------------------------------------------------------------------
| STUDENT PHOTO
|--------------------------------------------------------------------------
*/

.student-photo-cell {

    width: 20%;

    text-align: center;

    padding: 10px;

}


.student-photo {

    width: 120px;

    height: 120px;

    object-fit: cover;

    border: 1px solid #000;

}


/*
|--------------------------------------------------------------------------
| STUDENT INFORMATION TABLE
|--------------------------------------------------------------------------
*/

.report-student-information {

    width: 100%;

    margin-top: 10px;

    border-collapse: collapse;

}


.report-student-information td {

    border: 1px solid #000;

    padding: 8px;

    font-size: 14px;

}


.report-label {

    font-weight: 700;

}

/* 
|--------------------------------------------------------------------------
| COGNITIVE ASSESSMENT
|--------------------------------------------------------------------------
*/

.cognitive-assessment {

    width: 100%;

    margin-top: 15px;

}


/* 
|--------------------------------------------------------------------------
| ASSESSMENT TITLE
|--------------------------------------------------------------------------
*/

.assessment-title {

    width: 100%;

    border-bottom: none;

    text-align: center;

    font-size: 16px;

    font-weight: 700;

    padding: 8px;

    text-transform: uppercase;

}


/* 
|--------------------------------------------------------------------------
| COGNITIVE TABLE
|--------------------------------------------------------------------------
*/

.cognitive-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: auto;

}


/* 
|--------------------------------------------------------------------------
| TABLE CELLS
|--------------------------------------------------------------------------
*/

.cognitive-table th,
.cognitive-table td {

    border: 1px solid #000;

    padding: 7px;

    text-align: center;

    font-size: 13px;

}


/* 
|--------------------------------------------------------------------------
| TABLE HEADER
|--------------------------------------------------------------------------
*/

.cognitive-table th {

    font-weight: 700;

    background: #f1f1f1;

}


/* 
|--------------------------------------------------------------------------
| SUBJECT NAME
|--------------------------------------------------------------------------
*/

.cognitive-table .subject-name {

    text-align: left;

    font-weight: 600;

}


/* 
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width: 768px) {

    .cognitive-assessment {

        overflow-x: auto;

    }


    .cognitive-table {

        min-width: 800px;

    }

}


/* 
|--------------------------------------------------------------------------
| PRINT
|--------------------------------------------------------------------------
*/

@media print {

    .cognitive-assessment {

        width: 100%;

        page-break-inside: avoid;

    }


    .cognitive-table {

        width: 100%;

    }


    .cognitive-table th,
    .cognitive-table td {

        font-size: 10px;

        padding: 4px;

    }

}
/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width: 768px) {


    .report-card {

        padding: 10px;

        overflow-x: auto;

    }


    .school-name {

        font-size: 18px;

    }


    .school-address,
    .school-contact,
    .school-motto {

        font-size: 11px;

    }


    .performance-title {

        font-size: 14px;

    }


    .school-logo,
    .student-photo {

        width: 80px;

        height: 80px;

    }

}


/*
|--------------------------------------------------------------------------
| PRINT
|--------------------------------------------------------------------------
*/

@media print {


    body {

        background: #ffffff !important;

    }


    .report-card {

        background: #ffffff !important;

        box-shadow: none;

        border: none;

        margin: 0;

        padding: 0;

    }


    .report-card-actions {

        display: none !important;
        

    }

}


/* ==========================================================
   PRINT SETTINGS
========================================================== */

@media print {

    /* Hide all report card action buttons */
    .report-card-actions {
        display: none !important;
    }

    /* Hide forms and controls when printing */
    form,
    .print-controls,
    .report-page-controls,
    .search-form,
    .filter-form {
        display: none !important;
    }

    /* Hide anything specifically marked not to print */
    .no-print {
        display: none !important;
    }

    /* Remove unnecessary spacing */
    .report-card {
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* A4 print */
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

}


</style>



{{-- ==============================================================
     AJAX
================================================================ --}}

<script>

$(document).ready(function(){


    /*
    |--------------------------------------------------------------------------
    | SUBMIT REPORT CARD FORM
    |--------------------------------------------------------------------------
    */

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

            e.preventDefault();


            /*
            |--------------------------------------------------------------------------
            | GET FORM
            |--------------------------------------------------------------------------
            */

            let form = $(this);


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

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

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

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


            /*
            |--------------------------------------------------------------------------
            | VALIDATE CLASS
            |--------------------------------------------------------------------------
            */

            if(!classId){

                Swal.fire({

                    icon: 'warning',

                    title: 'Class Required',

                    text:
                        'Please select a class.'

                });

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | VALIDATE TERM
            |--------------------------------------------------------------------------
            */

            if(!term){

                Swal.fire({

                    icon: 'warning',

                    title: 'Term Required',

                    text:
                        'Please select a term.'

                });

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | VALIDATE SESSION
            |--------------------------------------------------------------------------
            */

            if(!session){

                Swal.fire({

                    icon: 'warning',

                    title: 'Session Required',

                    text:
                        'Please select an academic session.'

                });

                return;

            }


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

            Swal.fire({

                title:
                    'Generating Report Cards...',

                text:
                    'Please wait while the students report cards are being prepared.',

                allowOutsideClick:
                    false,

                allowEscapeKey:
                    false,

                showConfirmButton:
                    false,

                didOpen:
                    function(){

                        Swal.showLoading();

                    }

            });


            /*
            |--------------------------------------------------------------------------
            | CLEAR OLD RESULTS
            |--------------------------------------------------------------------------
            */

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


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

            $.ajax({

                url:
                    "{{ route('admin.print.report.card.load') }}",

                type:
                    "POST",

                data:
                    form.serialize(),


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

                success:
                    function(response){

                        Swal.close();


                        if(
                            response.status === true
                        ){

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


                            /*
                            |--------------------------------------------------------------------------
                            | SCROLL
                            |--------------------------------------------------------------------------
                            */

                            $('html, body').animate({

                                scrollTop:
                                    $('#reportCardResults')
                                    .offset()
                                    .top - 20

                            }, 500);


                        }else{

                            Swal.fire({

                                icon:
                                    'warning',

                                title:
                                    'Report Cards',

                                text:
                                    response.message ??
                                    'No report cards found.'

                            });

                        }

                    },


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

                error:
                    function(xhr){

                        console.error(xhr);

                        Swal.close();


                        let message =
                            'Something went wrong while generating the report cards.';


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

                            message =
                                xhr.responseJSON.message;

                        }


                        Swal.fire({

                            icon:
                                'error',

                            title:
                                'Error',

                            text:
                                message

                        });

                    }

            });

        }

    );

});

</script>


@endsection