@extends('layouts.admin')

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

@section('main-content')

<style>
    #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;
    }
    .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="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 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">
                        <form method="POST" action="{{ url('add-new-course') }}" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">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" placeholder="Course 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="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="classname" id="classname" class="form-control input form-control-line">
                                        <option value="" hidden disabled selected>Choose class</option>
                                        @foreach($classNames as $value => $displayName)
                                            <option value="{{ $value }}">{{ $displayName }}</option>
                                        @endforeach
                                    </select>
                                </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>
                                    <select id="courseduration" name="courseduration" class="form-control input form-control-line" onchange="updateDates()">
                                        <option value="" hidden disabled selected>Choose course duration</option>
                                        <option value="3 months">3 months</option>
                                        <option value="6 months">6 months</option>
                                        <option value="1 year">1 year</option>
                                        <option value="2 years">2 years</option>
                                        <!-- Add more options as needed -->
                                    </select>
                                </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="date" id="start_date" name="start_date" class="form-control input form-control-line" min="2024-02-19" onchange="updateDates()"> --}}
                                    <input type="text" id="start_date" name="start_date" class="form-control input form-control-line bg-white" placeholder="Select start date" readonly 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" disabled autocomplete="off">
                                </div>
                            </div>

                            <div class="form-group loaderbtn_div">
                                <button type="button" onclick="getcourse()" class="btn btn-success text-white" id="save_btn">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>    
                        </form>
                    </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", 
            defaultDate: mini, 
            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();
            } 
        });
        $("#start_date").datepicker("setDate", new Date());
        let dateText=$("#start_date").val();
        getCurrentYr = dateText.substring(6);
        getCurrentMnt = dateText.substring(3,5);
        getCurrentDt = dateText.substring(0,2);
    });
    $(document).ready(function() {
        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;
        }

        $('#classname').change(function() {
            var classId = $(this).val();
            var batchDropdown = $('#batchDropdown');

            if (classId !== '') {
                $.ajax({
                    url: '/get-batches/' + classId,
                    type: 'GET',
                    success: function(response) {
                        if (response.batches.length > 0) {
                            var batches = '<label class="form-label">Select Batches</label>';
                            batches += '<div>';
                            $.each(response.batches, function(index, batch) {
                                if (batch.id) {
                                    batches += '<div class="form-check">'; 
                                    batches += '<input class="form-check-input" type="checkbox" name="selected_batches[]" id="batch_' + batch.id + '" value="' + batch.id + '">';
                                    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
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            } else {
                batchDropdown.html('');
                batchDropdown.hide(); // Hide the batch container
            }
        });
    });
</script>

<script>
    // $( document ).ready(function() {
    function getcourse() {
        $('#save_btn').prop('disabled',true);
        $('.text-danger').hide();
        $('#loader').show();
        $("#batch_error").addClass("d-none");
        $("#batch_error").html('');


        var formData = new FormData();
        const coursename = ($('#coursename').val()).trim();
        const classname = $('#classname').val();
        const courseduration = $('#courseduration').val();
        const start_date = ($('#start_date').val()).trim();
        const 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]);
        }
        $.ajax({
            type: "post",
            url: "{{ route('courses.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) {
                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>');
                        }
                    });
                }
                $('#save_btn').prop('disabled',false);
            },
            error: function() {
                // Hide loader in case of an error
                $('#loader').hide();
                $('#save_btn').prop('disabled',false);
                // Handle error
            },
            complete: function() {
                // Hide loader when the request is completed (success, error, or failure)
                $('#loader').hide();
                $('#save_btn').prop('disabled',false);
            }
        });
    }
    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>
@endsection