@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Edit Batch</title>

@section('main-content')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- froala editor -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_editor.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/froala_style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins.pkgd.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins/files_manager.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins/file.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/css/plugins/code_view.min.css">
<style>
    .input {
        color: #697a8d;
    }

    #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;
    }
    #topicField .fr-box, .fr-toolbar.fr-desktop {
        width: 100% !important;
    }
    #topicField .fr-sticky-on {
        position: absolute;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color:#697a8d !important;
    }
    .fr-wrapper>div:first-child {
        display: none;
    }
</style>

<div id="alert" class="col-md-6">
    @if(Session::has('success'))
    <div class="alert alert-primary" role="alert">
        {{Session::get('success')}}
    </div>
    @endif
</div>

<div class="col-md-6 alert alert-danger print-error-msg" style="display:none">
    <ul></ul>
</div>

<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> Edit Batch</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">Batch Details</h5>
                        <!-- <small class="text-muted float-end">Merged input group</small> -->
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="batch_id" id="batch_id" value="{{$batch[0]['id']}}">
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-fullname">Name</label>
                            <div class="input-group">
                                <span id="basic-icon-default-batchname" class="input-group-text"><i class='bx bx-group'></i></span>
                                <input type="text" name="batchname" id="batchname" value="{{$batch[0]['name']}}" class="form-control input form-control-line" minlength="3" maxlength="30" onkeydown="return /[a-zA-Z\s]/i.test(event.key)" autocomplete="off">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="classname">Class</label>
                            <div class="input-group">
                                <span id="basic-icon-default-fullname2" class="input-group-text"><i class='bx bxs-star-half'></i></span>
                                <select name="classname" id="classname" class="form-select" {{$check_course_attach_with_batch?"disabled":""}}>
                                    @foreach($classNames as $value => $displayName)
                                        <option value="{{ $value }}" {{ $batch[0]['class_name'] == $value ? 'selected' : '' }}>
                                            {{ $displayName }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>    
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="subjectid">Subject</label>
                            <div class="input-group">
                                <span id="basic-icon-default-gender" class="input-group-text"><i class='bx bx-book-reader'></i></span>
                                <select name="subjectid" id="subjectid" class="form-select" {{$check_enrollments_exists?"disabled":""}}>
                                    @if (count($subjects)>0)
                                        @foreach($subjects as $subject)
                                            <option value="{{$subject->id}}" {{ $batch[0]['subject_id'] == $subject->id ? 'selected' : '' }}>{{$subject->name}}</option>
                                        @endforeach
                                    @else
                                       <option value="" disabled selected hidden>No Subject Available</option>
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="mb-3" id="topicField" style="display: none;">
                            <label class="form-label" for="topic">Topic</label>
                            <div class="input-group">
                                <!-- Input field for topic -->
                                <textarea name="topic" id="topic" class="form-control content" placeholder="Enter topic">{{$batch[0]['topics']}}</textarea>
                 
                            </div>
                        </div>
                        <div class="mb-3" id="teachersDropdown" style="display: none;">
                            <label class="form-label" for="basic-icon-default-teacher">Teacher</label>
                            <div class="input-group">
                                <span id="basic-icon-default-gender" class="input-group-text"><i class="bx bx-user"></i></span>
                                <select name="teacherid" id="teacherid" class="form-select input form-control-line">
                                    Options for teachers will be populated dynamically based on selected subject 
                                </select>
                            </div>
                        </div> 
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-fullname">Start Time</label>
                            <div class="input-group">
                                <span id="basic-icon-default-batchtimmings" class="input-group-text"><i class='bx bx-time' ></i></span>
                                <input type="time" name="startbatchtime" id="startbatchtime" value="{{$batch[0]['start_time']}}" class="form-control input form-control-line" autocomplete="off">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-fullname">End Time</label>
                            <div class="input-group">
                                <span id="basic-icon-default-batchtimmings" class="input-group-text"><i class='bx bx-time' ></i></span>
                                <input type="time" name="endbatchtime" id="endbatchtime" value="{{$batch[0]['end_time']}}" class="form-control input form-control-line" autocomplete="off">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-fullname">Fee</label>
                            <div class="input-group">
                                <span id="basic-icon-default-batchfee" class="input-group-text">₹</span>
                                <input type="text" name="batchfee" id="batchfee" value="{{$batch[0]['fee']}}" class="form-control input form-control-line" maxlength="6" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" {{$check_enrollments_exists?"readonly":""}} autocomplete="off">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-fullname">Mode</label>
                            <div class="input-group">
                                <span id="basic-icon-default-batchmode" class="input-group-text"><i class='bx bx-disc' ></i></span>
                                <select name="mode" id="mode" class="form-control input form-control-line">
                                    <option value="offline" {{ $batch[0]['mode'] === 'offline' ? 'selected' : '' }}>Offline</option>
                                    <option value="online" {{ $batch[0]['mode'] === 'online' ? 'selected' : '' }}>Online</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3" id="zoomLinkField" style="{{ $batch[0]['mode'] === 'online' ? '' : 'display:none;' }}">
                            <label class="form-label" for="basic-icon-default-batchlink">Batch Live Link</label>
                            <div class="input-group">
                                <span id="basic-icon-default-batchlink" class="input-group-text"><i class="bx bx-link"></i></span>
                                <input type="text" id="livelink" name="livelink" value="{{ $batch[0]['liveclass'] }}" class="form-control input form-control-line" placeholder="Enter Zoom Link">
                            </div>
                        </div>
                        <div class="form-group loaderbtn_div">
                            <button type="button" class="btn btn-success text-white" onclick="getbatch()" id="update_btn">Update</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 src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/froala_editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.0.13/js/plugins.pkgd.min.js"></script>
<script>
    $(document).ready(function() {
        new FroalaEditor('.content', {
            pastePlain: 'true',
            imageUploadURL: '/UploadFiles',
            imageUploadMethod: 'POST',
            imageUploadParam: 'up_image',
            imageUploadParams: {
                _token: "{{csrf_token()}}",
                froala: 'true',
            }
        });
    });
</script>
<script>
    // Now use jQuery instead of $ to avoid conflicts
    $(document).ready(function($) {
        $('#batchdate').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: 'c-120:c', // This will allow selection of years starting 120 years ago up to the current year
            minDate: 0 // Restrict selection to past dates
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#mode').change(function() {
            var selectedMode = $(this).val();

            // Show the Zoom link field if 'Online' mode is selected
            if (selectedMode === 'online') {
                $('#zoomLinkField').show();
            } else {
                $('#zoomLinkField').hide();
            }
        });
        // Get the pre-selected subject ID
        var preSelectedSubjectId = "{{ $batch[0]['subject_id'] }}"; // Replace with the actual variable holding subject ID

        // Set the pre-selected subject ID in the dropdown
        $('#subjectid').val(preSelectedSubjectId);

        // Rest of your existing code for handling change event on subjectid
        $('#subjectid').change(function() {
            var subjectId = $(this).val();

            // Show the topic input field if a subject is selected
            if (subjectId !== '') {
                $('#topicField').show();
            } else {
                $('#topicField').hide();
            }
            $.ajax({
                type: 'GET',
                url: '/get-teachers/' + subjectId,
                success: function(response) {
                    $('#teachersDropdown').show();
                    $('#teacherid').empty();
                    $.each(response.teachers, function(key, value) {
                        $('#teacherid').append('<option value="' + value.id + '">' + value.first_name + ' ' + value.last_name +'</option>');
                    });
                    if(response.teachers.length==0){
                        $('#teacherid').append(`<option selected disabled hidden>No Teacher Found</option>`);
                        $('#teacherid').prop("disabled",true);
                    } else{
                        $('#teacherid').prop("disabled",false);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching teachers:', error);
                }
            });
        });

        // Trigger the change event manually after setting the pre-selected subject ID
        $('#subjectid').change();
    });

    // $( document ).ready(function() {
    function getbatch() {
        $('#update_btn').prop('disabled',true);
        $('.text-danger').remove();
        $('#loader').show();
        var formData = new FormData();
        var batch_id = ($('#batch_id').val()).trim();
        var batchname = ($('#batchname').val()).trim();
        var classname = $('#classname').val();
        var subjectid = $('#subjectid').val();
        var topic = $('#topic').val();
        // var teacherid = $('#teacherid').val();
        // var batchdate = $('#batchdate').val();
        var startbatchtime = $('#startbatchtime').val();
        var endbatchtime = $('#endbatchtime').val();
        var batchfee = ($('#batchfee').val()).trim();
        var mode = $('#mode').val();
        var livelink = ($('#livelink').val()).trim();

        formData.append('teacherid', $("#teacherid").val());
        formData.append('batch_id', batch_id);
        formData.append('batchname', batchname);
        formData.append('classname', classname);
        formData.append('subjectid', subjectid);
        formData.append('topic', topic);
        //  formData.append('teacherid', teacherid);
        // formData.append('batchdate', batchdate);
        formData.append('startbatchtime', startbatchtime);
        formData.append('endbatchtime', endbatchtime);
        formData.append('batchfee', batchfee);
        formData.append('mode', mode);
        formData.append('livelink', livelink);
        formData.append('_method', 'PUT');
        var updateUrl = "{{ route('batches.update', ':userId') }}".replace(':userId', batch_id);
        $url = {}
        $.ajax({
            type: "post",
            url: updateUrl,
            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) {
                if(data.hasOwnProperty('errorMsg')){
                    alert(data['errorMsg']);
                } else 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>');
                        }
                    });
                }
                $('#update_btn').prop('disabled',false);
            },
            error: function() {
                // Hide loader in case of an error
                $('#loader').hide();
                $('#update_btn').prop('disabled',false);
                // Handle error
            },
            complete: function() {
                // Hide loader when the request is completed (success, error, or failure)
                $('#loader').hide();
                $('#update_btn').prop('disabled',false);
            }

        })
    }

    // function printErrorMsg (msg) {
    //     $(".print-error-msg").find("ul").html('');
    //     $(".print-error-msg").css('display','block');
    //     $.each( msg, function( key, value ) {
    //         $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
    //     });
    // }        
    // });
</script>
@endsection