@extends('backend.teacher_backend.teacher_dashboard')

@section('teacher')

<div class="container-fluid">

<div class="card shadow">

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

<h4>

<i class="fas fa-file-excel"></i>

Upload Results From Excel

</h4>

</div>

<div class="card-body">

<form
    id="resultExcelForm"
    method="POST"
    enctype="multipart/form-data"
    action="{{ route('teacher.result.preview.csv') }}">

    @csrf

<div class="row">

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

<label>

Class

</label>

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

<option value="">

Select Class

</option>

@foreach($classes as $class)

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

{{ $class->class_name }}

</option>

@endforeach

</select>

</div>

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

<label>

Subject

</label>

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

<option>

Select Class First

</option>

</select>

</div>

</div>

<div class="row">

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

<label>

Term

</label>

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

<option value="">

Select Term

</option>

@foreach($terms as $term)

<option>

{{ $term->name }}

</option>

@endforeach

</select>

</div>

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

<label>

Session

</label>

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

<option value="">

Select Session

</option>

@foreach($sessions as $session)

<option>

{{ $session->name }}

</option>

@endforeach

</select>

</div>

</div>

<hr>

<div id="excelUploadArea" style="display:none;">

<label>

Choose Excel File

</label>

<input
type="file"
name="csv_file"
class="form-control"
accept=".csv"
required>

<small class="text-muted">

Supported: .csv

</small>

<br>

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

    <a
        href="#"
        id="downloadTemplate"
        class="btn btn-primary">

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

        Export Template

    </a>

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

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

Preview Upload

</button>

</div>

</div>

</form>

</div>

</div>

</div>




<script>
$(document).ready(function(){

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

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

        if(classId == ''){

            $('#subject_id').html(
                '<option>Select Class First</option>'
            );

            checkForm();

            return;

        }

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

        $.ajax({

            url: "{{ route('teacher.result.subjects', ':id') }}"
                    .replace(':id', classId),

            type:"GET",

            success:function(data){

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

                $.each(data,function(index,item){

                    html += `
                        <option value="${item.id}">
                            ${item.subject_name}
                        </option>
                    `;

                });

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

                checkForm();

            },

            error:function(){

                 $('#subject_id').empty();

                 $('#subject_id').append(
                    '<option>Unable to load subjects</option>'
                 );

            }

        });

    });


    function checkForm(){

        if(
            $('#class_id').val() &&
            $('#subject_id').val() &&
            $('[name=term]').val() &&
            $('[name=session]').val()
        ){

            $('#excelUploadArea').slideDown();

        }else{

            $('#excelUploadArea').slideUp();

        }

        updateTemplateLink();
    }


    $('#class_id,#subject_id,[name=term],[name=session]')
        .on('change', checkForm);


    function updateTemplateLink(){

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

        let subject  = $('#subject_id').val();

        let term     = $('[name=term]').val();

        let session  = $('[name=session]').val();

        if(
            classId &&
            subject &&
            term &&
            session
        ){

            let url =
            "{{ route('teacher.result.export.template') }}"
            + "?class_id=" + encodeURIComponent(classId)
            + "&subject_id=" + encodeURIComponent(subject)
            + "&term=" + encodeURIComponent(term)
            + "&session=" + encodeURIComponent(session);

            $('#downloadTemplate').attr('href',url);

        }

    }

});
</script>

@endsection