@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Edit Course</title>
@include('datepicker')

@section('main-content')

<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;
    }
</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 Course</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">Course Details</h5>
                        <!-- <small class="text-muted float-end">Merged input group</small> -->
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="course_id" id="course_id" value="{{$course[0]['id']}}">
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-name">Name</label>
                            <div class="input-group">
                                <span id="basic-icon-default-coursename" class="input-group-text"><i class='bx bx-bookmarks' ></i></span>
                                <input type="text" name="coursename" id="coursename" value="{{$course[0]['coursename']}}" 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-classname" class="input-group-text"><i class='bx bxs-star-half'></i></span>
                                @if (isset($check_enrollments) && $check_enrollments==true)
                                    <select name="classname" id="classname" class="form-select" disabled>
                                        @foreach($classNames as $value => $displayName)
                                            <option value="{{ $value }}" {{ $course[0]['class_name'] == $value ? 'selected' : '' }}>
                                                {{ $displayName }}
                                            </option>
                                        @endforeach
                                    </select>
                                @else 
                                    <select name="classname" id="classname" class="form-select" >
                                        @foreach($classNames as $value => $displayName)
                                            <option value="{{ $value }}" {{ $course[0]['class_name'] == $value ? 'selected' : '' }}>
                                                {{ $displayName }}
                                            </option>
                                        @endforeach
                                    </select>   
                                @endif
                            </div>
                        </div>
                        <div class="mb-3" id="batchDropdown">
                            <!-- Dynamic batch options will be inserted here -->
                        </div>
                        <div class="mb-3 d-none" id="batch_error">

                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="basic-icon-default-fullname">Duration</label>
                            <div class="input-group">
                                <span id="basic-icon-default-courseduration" class="input-group-text"><i class='bx bx-time'></i></span>
                                @if (isset($check_enrollments) && $check_enrollments==true)
                                    <select id="courseduration" name="courseduration" class="form-control input form-control-line" disabled>
                                        <option value="3 months" {{ $course[0]->courseduration == '3 months' ? 'selected' : '' }}>3 months</option>
                                        <option value="6 months" {{ $course[0]->courseduration == '6 months' ? 'selected' : '' }}>6 months</option>
                                        <option value="1 year" {{ $course[0]->courseduration == '1 year' ? 'selected' : '' }}>1 year</option>
                                        <option value="2 years" {{ $course[0]->courseduration == '2 years' ? 'selected' : '' }}>2 years</option>
                                        <!-- Add more options as needed -->
                                    </select>
                                @else
                                    <select id="courseduration" name="courseduration" class="form-control input form-control-line" onchange="updateDates()">
                                        <option value="3 months" {{ $course[0]->courseduration == '3 months' ? 'selected' : '' }}>3 months</option>
                                        <option value="6 months" {{ $course[0]->courseduration == '6 months' ? 'selected' : '' }}>6 months</option>
                                        <option value="1 year" {{ $course[0]->courseduration == '1 year' ? 'selected' : '' }}>1 year</option>
                                        <option value="2 years" {{ $course[0]->courseduration == '2 years' ? 'selected' : '' }}>2 years</option>
                                        <!-- Add more options as needed -->
                                    </select>
                                @endif
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="start_date">Start Date</label>
                            <div class="input-group">
                                <span id="start_date_icon" class="input-group-text"><i class="bx bx-calendar"></i></span>
                                <input type="text" id="start_date" name="start_date" class="form-control input form-control-line bg-white" value=-- readonly {{$check_enrollments==true?"disabled":""}} autocomplete="off">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="end_date">End Date</label>
                            <div class="input-group">
                                <span id="end_date_icon" class="input-group-text"><i class="bx bx-calendar"></i></span>
                                <input type="text" id="end_date" name="end_date" class="form-control input form-control-line" value=-- disabled autocomplete="off">
                            </div>
                        </div>
                        <button type="button" onclick="getcourse()" class="btn btn-success text-white">Update</button>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->
    <div class="content-backdrop fade"></div>
</div>

<script>

    jQuery(function($) {
        let maxi = new Date(),mini=new Date();
        maxi.setFullYear(maxi.getFullYear() + 1);
        $("#start_date").datepicker({
            dateFormat: "dd-mm-yy", 
            minDate:mini, 
            maxDate: maxi,
            changeMonth: true, changeYear: true,
            onSelect: function(dateText, inst) {
                // Extract the year from the selected date
                getCurrentYr = dateText.substring(6);
                getCurrentMnt =dateText.substring(3,5);
                getCurrentDt = dateText.substring(0,2);
                updateDates();
            } 
        });
 
        let dateText="{{dateformatter($course[0]->start_date)}}";
        getCurrentYr = dateText.substring(6);
        getCurrentMnt = dateText.substring(3,5);
        getCurrentDt = dateText.substring(0,2);
    });
   $(document).ready(function() {
    // $('#classname').prop('disabled', true);
    // Function to display available batches in UI
    function convertTo12HourFormat(time) {
        let hour = parseInt(time.substring(0, 2));
        let minute = time.substring(3);
        let period = "AM";

        if (hour >= 12) {
            period = "PM";
            if (hour > 12) {
                hour -= 12;
            }
        }

        if (hour === 0) {
            hour = 12;
        }

        return hour + ":" + minute + " " + period;
    }

    function displayAvailableBatches(response) {
        var batchDropdown = $('#batchDropdown');

        if (response.batches.length > 0) {
            $disable=false;
            if("{{isset($check_enrollments) && $check_enrollments==true}}") $disable=true;
            var batches = '<label class="form-label">Select Batches</label>';
            batches += '<div>';
            $.each(response.batches, function(index, batch) {
                if (batch.id) {
                    var isChecked = batch.selected ? 'checked' : '';
                    batches += '<div class="form-check">';
                        if($disable==true){
                            batches += '<input class="form-check-input" type="checkbox" name="selected_batches[]" id="batch_' + batch.id + '" value="' + batch.id + '" ' + isChecked + ' disabled>';
                            batches += '<label class="form-check-label" for="batch_' + batch.id + '">' + batch.name +' ( '+convertTo12HourFormat(batch.start_time)+' to '+convertTo12HourFormat(batch.end_time)+ ' )</label>';
                            batches += `<a href="/batch-details/${batch["id"]}" class="text-primary" style="cursor:pointer;"> Here</a>`;
                        }else{
                            batches += '<input class="form-check-input" type="checkbox" name="selected_batches[]" id="batch_' + batch.id + '" value="' + batch.id + '" ' + isChecked + '>';
                            batches += '<label class="form-check-label" for="batch_' + batch.id + '">' + batch.name +' ( '+convertTo12HourFormat(batch.start_time)+' to '+convertTo12HourFormat(batch.end_time)+ ' )</label>';
                            batches += `<a href="/batch-details/${batch["id"]}" class="text-primary" style="cursor:pointer;"> Here</a>`;
                        }
                    batches += '</div>';
                }
            });
            batches += '</div>';

            batchDropdown.html(batches);
            batchDropdown.show(); // Show the batch container
        } else {
            batchDropdown.html('<p>No batches available for this class.</p>');
            batchDropdown.show(); // Show the empty message
        }
    }

    // Function to get selected batches for the course and mark them as checked
    function getSelectedBatchesForCourse(courseId) {
        $.ajax({
            url: '/get-selected-batches/' + courseId, // Endpoint to get selected batches for the course
            type: 'GET',
            success: function(selectedBatchesResponse) {
                if (selectedBatchesResponse.batches && selectedBatchesResponse.batches.length > 0) {
                    selectedBatchesResponse.batches.forEach(function(selectedBatch) {
                        var checkbox = $('#batch_' + selectedBatch.batch_id); // Update to your actual response key for batch ID
                        console.log(checkbox);
                        if (checkbox.length) {
                            checkbox.prop('checked', true);
                        }
                    });
                } else {
                    // Handle case where no batches are selected for this course
                }
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    }

    // Handle change event of class selection
    $('#classname').change(function() {
        var classId = $(this).val();
        var courseId = $("#course_id").val(); // Replace with the course ID as needed

        if (classId !== '') {
            $.ajax({
                url: '/get-batches/' + classId,
                type: 'GET',
                success: function(response) {
                    displayAvailableBatches(response);
                    getSelectedBatchesForCourse(courseId);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        } else {
            // Handle case where no class is selected
        }
    });

    // Trigger change event on page load if class is pre-selected
    var classId = $('#classname').val();
        if (classId !== '') {
            $('#classname').trigger('change');
        }
    });

    function formatDate(date) {
        var dd = String(date.getDate()).padStart(2, '0');
        var mm = String(date.getMonth() + 1).padStart(2, '0');
        var yyyy = date.getFullYear();
        return dd + '-'+ mm + '-' + yyyy;
    }

    function updateDates() {
        var courseDuration = document.getElementById('courseduration').value;
        var startDate = new Date(getCurrentYr+"-"+getCurrentMnt+"-"+getCurrentDt);

        if (!isNaN(startDate.getTime()) && courseDuration) {
            var endDate = new Date(startDate);
            switch (courseDuration) {
                case '3 months':
                    endDate.setMonth(endDate.getMonth() + 3);
                    break;
                case '6 months':
                    endDate.setMonth(endDate.getMonth() + 6);
                    break;
                case '1 year':
                    endDate.setFullYear(endDate.getFullYear() + 1);
                    break;
                case '2 years':
                    endDate.setFullYear(endDate.getFullYear() + 2);
                    break;
                default:
                    break;
            }

            // Format the end date and start date
            var formattedEndDate = formatDate(endDate);
            document.getElementById('end_date').value = formattedEndDate;

            var formattedStartDate = formatDate(startDate);
            document.getElementById('start_date').value = formattedStartDate;
        }
    }

</script>
<script>
    // $( document ).ready(function() {
    function getcourse() {
        $("#batch_error").addClass("d-none");
        $("#batch_error").html('');
        $('.text-danger').hide();
        var formData = new FormData();
        var courseId = ($("#course_id").val()).trim(); 
        var coursename = ($('#coursename').val()).trim();
        var classname = $('#classname').val();
        var courseduration = $('#courseduration').val();
        var start_date = ($('#start_date').val()).trim();
        var end_date = ($('#end_date').val()).trim();

        // Get selected batch IDs
        var selectedBatchIds = [];
        $('input[name="selected_batches[]"]:checked').each(function() {
            selectedBatchIds.push($(this).val());
        });

        // Append selected batch IDs to formData
        formData.append('coursename', coursename);
        formData.append('classname', classname);
        formData.append('courseduration', courseduration);
        formData.append('start_date', start_date);
        formData.append('end_date', end_date);

        for (var i = 0; i < selectedBatchIds.length; i++) {
            formData.append('selected_batch_ids[]', selectedBatchIds[i]);
        }
        formData.append('_method', 'PUT');
        var updateUrl = "{{ route('courses.update', ':courseId') }}".replace(':courseId', courseId);
        $.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["already_assigned_error"]){
                    let make_html="";
                    let inc=1;
                    $.each(data["already_assigned_error"],function(key,val){
                        make_html+=`<span class="text-strong text-danger">${inc++} ${key} already contains ${val}</span><br class="text-danger"/>`;
                    });
                    make_html+=`<span class="text-strong text-danger">Either unselect your Batches or change your dates</span>`;
                    $('#batchDropdown').after(make_html);
                }
                else if(data["same_time_conflict"]){
                    $.each(data["same_time_conflict"],function(key,val){
                        $("#batch_error").append(`<div class='text-danger'>${val}</div>`);
                    });
                    $("#batch_error").removeClass("d-none");
                }
                else if ($.isEmptyObject(data.error)) {
                    window.location.href = data.success;
                } else {
                    $.each(data.error, function(field_name, error) {
                        if (field_name === 'selected_batch_ids') {
                            // Display errors for selected_batch_ids as an array
                            error.forEach(function(batchError) {
                                $('#batchDropdown').after('<span class="text-strong text-danger">' + batchError + '</span>');
                            });
                        } else {
                            $(document).find('#' + field_name + '').closest('div').after('<span class="text-strong text-danger">' + error + '</span>');
                        }
                    });
                }
            }

        })
    }
</script>
@endsection