@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Add Study Material</title>

@section('main-content')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
    .input {
        color: #697a8d;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color:#697a8d !important;
    }
    .form-group {
        margin-bottom: 20px;
    }

    .question {
        border: 1px solid #ccc;
        padding: 20px;
        margin-top: 20px;
    }

    .icon-btn {
        margin-right: 5px;
    }

    #loader {
        text-align: center;
        /* Align the loader to the center */
        margin-left: 15px;
        /* Adjust this value to manage space between loader and button */
        width: auto;
        display: inline-block;
    }

    #loader img {
        width: 30px;
    }
</style>


<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New Study Material</h4>
        <!-- Basic Layout -->
        <div class="row">
            <div class="col-xl">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Study material Details</h5>
                        <!-- <small class="text-muted float-end">Merged input group</small> -->
                    </div>
                    <div class="card-body">
                        <form id="assignmentForm" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">Class</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-classname" class="input-group-text"><i class="bx bxs-star-half"></i></span>
                                    <select name="class_id" id="classSelect" class="form-control input form-control-line" {{count($class_names)>0?"":"disabled"}}>
                                        <option value="">Select Class</option>
                                        @foreach($class_names as $classId => $className)
                                            <option value="{{ $classId }}">{{ $className }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3" id="subjectDropdown" style="display: none;">
                                <label class="form-label" for="basic-icon-default-teacher">Subject Name</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-book-open"></i></span>
                                    <select name="subject_id" id="subjectSelect" class="form-select input form-control-line">
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3" id="batchDropdown" style="display: none;">
                                <label class="form-label" for="basic-icon-default-teacher">Batch Name</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class="bx  bx-group"></i></span>
                                    <select name="batch_id" id="batchSelect" class="form-select input form-control-line">
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="questionTitle">Studymaterial Heading</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-paste"></i></span>
                                    <input type="text" id="studymaterial_heading" name="studymaterial_heading" class="form-control" placeholder="Enter studymaterial heading" maxlength="50" autocomplete="off">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="questionTitle">Upload File</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bxs-file-pdf' ></i></span>
                                    <input type="file" id="studymaterial_file" name="studymaterial_file" class="form-control">
                                </div>
                            </div>



                        </form>

                        <div class="form-group loaderbtn_div">
                            <button id="save-studymaterial" class="btn btn-success" onclick="getsubject()">Save</button>
                            <div class="loaderDiv" id="loader" style="display: none;">
                                <!-- Your loader HTML or spinner goes here -->
                                <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->
    <div class="content-backdrop fade"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#classSelect').change(function() {
            var classId = $(this).val();

            // AJAX request to fetch class and subject data based on the selected batch
            $.ajax({
                url: '/fetch-subject',
                type: 'GET',
                data: {
                    class_id: classId
                },
                success: function(response) {
                    console.log(response); // Check the fetched subject data in the console

                    // Update subject dropdown with fetched subject data
                    $('#subjectSelect').empty(); // Clear previous options
                    $.each(response.data, function(key, value) {
                        $('#subjectSelect').append('<option value="' + value.subject_id + '">' + value.subject_name + '</option>');
                        var subjectId = value.subject_id
                        // Trigger change event on page load if class is pre-selected
                        if (subjectId !== '') {
                            $('#subjectSelect').trigger('change');
                        }
                    });
                    if(response.data.length==0){
                        $('#subjectSelect').append(`<option disabled hidden>No subject available currently</option>`);
                    }

                    // Show the subject dropdown once the data is available
                    $('#subjectDropdown').show();
                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any AJAX errors to the console
                }
            });
        });

        $('#subjectSelect').change(function() {
            var subjectId = $(this).val();

            // AJAX request to fetch class and subject data based on the selected batch
            $.ajax({
                url: '/fetch-batch',
                type: 'GET',
                data: {
                    subject_id: subjectId
                },
                success: function(response) {
                    // Update batch dropdown with fetched batch data
                    $('#batchSelect').empty(); // Clear previous options
                    $.each(response.data, function(key, value) {
                        $('#batchSelect').append('<option value="' + value.batch_id + '">' + value.batchname + '</option>');
                    });
                    if(response.data.length==0){
                        $('#batchSelect').append(`<option disabled hidden>No batch available currently</option>`);
                    }
                    // Show the batch dropdown once the data is available
                    $('#batchDropdown').show();

                },
                error: function(xhr, status, error) {
                    console.error(error); // Log any AJAX errors to the console
                }
            });
        });
    });
</script>

<script>
    function getsubject() {
        $('.text-danger').remove();
        $('#loader').show();
        var formData = new FormData();

        formData.append('classSelect', $.trim($('#classSelect').val()));
        formData.append('subjectSelect', $.trim($('#subjectSelect').val()));
        formData.append('batchSelect', $.trim($('#batchSelect').val()));
        formData.append('studymaterial_heading', $.trim($('#studymaterial_heading').val()));
        var studymaterial_file = $('#studymaterial_file').prop('files')[0];
        if (studymaterial_file) {
            formData.append('studymaterial_file', studymaterial_file);
        }

        $.ajax({
            type: "post",
            url: "{{ route('studymaterial.store') }}",
            contentType: 'multipart/form-data',
            cache: false,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            success: function(data) {
                // Hide the loader after response is received
                $('#loader').hide();
                const status=data["status"];
                if(status==200){
                    const msg=data["message"];
                    if(msg==="Already exists"){
                        $('.loaderbtn_div').after(`<div class='text-danger'>Study material already exist for selected class, batch & subject.</div><div class='text-danger'>Go back & search <strong>"${data["heading"]}"</strong></div>`);
                        return;
                    }
                }
                if ($.isEmptyObject(data.error)) {
                    window.location.href = data.success;
                } else {
                    // printErrorMsg(data.error);
                    $.each(data.error, function(field_name, error) {
                        // Check if the error message for the field already exists
                        if (!$('#' + field_name + '').closest('div').next().hasClass('text-danger')) {
                            $('#' + field_name + '').closest('div').after('<span class="text-strong text-danger">' + error + '</span>');
                        }
                    });
                }
            },
            error: function() {
                // Hide loader in case of an error
                $('#loader').hide();
                // Handle error
            },
            complete: function() {
                // Hide loader when the request is completed (success, error, or failure)
                $('#loader').hide();
            }
        });
    }
</script>
@endsection