@extends('backend.teacher_backend.teacher_dashboard')

@section('teacher')

<div class="container-fluid">

    {{-- ===========================================
        PAGE HEADER
    ============================================ --}}
    <div class="row mb-4">

        <div class="col-lg-12">

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

                <div class="card-body py-4">

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

                        <div>

                            <h2 class="fw-bold text-success mb-1">

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

                                Teacher Result Upload

                            </h2>

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

                                Upload and manage students' continuous assessment and examination scores.

                            </p>

                        </div>

                        <div class="text-end">

                            <span class="badge bg-success fs-6 px-3 py-2">

                                Teacher Portal

                            </span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- ===========================================
        FILTER CARD
    ============================================ --}}
    <div class="card border-0 shadow">

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

            <h5 class="mb-0">

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

                Result Loader

            </h5>

        </div>

        <div class="card-body">

            <form id="resultFilterForm">

                @csrf

                <div class="row">

                    {{-- CLASS --}}
                    <div class="col-lg-3 col-md-6 mb-3">

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

                            Class

                        </label>

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

                            <option value="">

                                -- Select Class --

                            </option>

                            @foreach($classes as $class)

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

                                    {{ $class->class_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- SUBJECT --}}
                    <div class="col-lg-3 col-md-6 mb-3">

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

                            Subject

                        </label>

                        <select
                            name="subject_id"
                            id="subject_id"
                            class="form-select"
                            required>

                            <option value="">

                                Select Class First

                            </option>

                        </select>

                    </div>



                    {{-- TERM --}}
                    <div class="col-lg-3 col-md-6 mb-3">

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

                            Current Term

                        </label>

                        <input
                            type="text"
                            class="form-control bg-light"
                            name="term"
                            readonly
                            value="{{ $currentTerm->name }}">

                    </div>



                    {{-- SESSION --}}
                    <div class="col-lg-3 col-md-6 mb-3">

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

                            Academic Session

                        </label>

                        <input
                            type="text"
                            class="form-control bg-light"
                            name="session"
                            readonly
                            value="{{ $currentSession->name }}">

                    </div>

                </div>



                <div class="row mt-2">

                    <div class="col-md-12 text-end">

                        <button
                            type="submit"
                            class="btn btn-success px-5">

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

                            Load Students

                        </button>

                    </div>

                </div>

            </form>

        </div>

    </div>



    {{-- ===========================================
        RESULT TABLE
    ============================================ --}}
    <div
        id="resultTableContainer"
        class="mt-4">

    </div>

</div>



{{-- ===========================================
    PAGE CSS
=========================================== --}}
<style>

body{

    background:#f4f7fb;

}

.card{

    border-radius:15px;

}

.card-header{

    border-radius:15px 15px 0 0 !important;

}

.form-control{

    height:46px;

    border-radius:10px;

}

.form-select{

    height:46px;

    border-radius:10px;

}

.btn{

    border-radius:10px;

}

.shadow-lg{

    box-shadow:0 10px 30px rgba(0,0,0,.08)!important;

}

.shadow{

    box-shadow:0 5px 20px rgba(0,0,0,.08)!important;

}

</style>



{{-- ===========================================
    AJAX
=========================================== --}}
<script>

$(function(){

    /*
    |--------------------------------------------------------------------------
    | LOAD SUBJECTS
    |--------------------------------------------------------------------------
    */

    $('#class_id').change(function(){

        let classId = $(this).val();

        $('#subject_id').html('<option>Loading...</option>');

        $.get(

            "{{ url('/teacher/result/subjects') }}/"+classId,

            function(data){

                let option='<option value="">-- Select Subject --</option>';

                $.each(data,function(i,row){

                    option+='<option value="'+row.id+'">'+row.subject_name+'</option>';

                });

                $('#subject_id').html(option);

            }

        );

    });



    /*
    |--------------------------------------------------------------------------
    | LOAD RESULT TABLE
    |--------------------------------------------------------------------------
    */

    $('#resultFilterForm').submit(function(e){

        e.preventDefault();

        $.ajax({

            url:"{{ route('teacher.result.load') }}",

            method:"POST",

            data:$(this).serialize(),

            beforeSend:function(){

                $('#resultTableContainer').html(

                    '<div class="card shadow">'+
                    '<div class="card-body text-center py-5">'+
                    '<div class="spinner-border text-success"></div>'+
                    '<h5 class="mt-3">Loading Students...</h5>'+
                    '</div>'+
                    '</div>'

                );

            },

            success:function(response){

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

            },

            error:function(xhr){

                if(xhr.responseJSON){

                    Swal.fire(

                        'Error',

                        xhr.responseJSON.message,

                        'error'

                    );

                }

            }

        });

    });

});

</script>

@endsection