<link rel="stylesheet" href="<?php echo admin_css() ?>plugins/bs-stepper/css/bs-stepper.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<?php error_reporting(0);
?>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Edit Course</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="<?php echo admin_url() ?>admin">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Course</a></li>
                        <li class="breadcrumb-item active">Edit Course</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!--  EXAMPLE -->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Update Course </h3>
                    <div class="card-tools">
                        <a href="javascript:void(0)" onclick="showAjaxModal('<?php echo base_url('modal/popup/section_add/' . $course->course_id); ?>', '<?php echo get_phrase('add_new_section'); ?>')" class="btn btn-success btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Add Section</a>
                        <a href="javascript:void(0)" onclick="showAjaxModal('<?php echo base_url('modal/popup/lesson_types/' . $course->course_id); ?>', '<?php echo get_phrase('add_new_lesson'); ?>')" class="btn btn-warning btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> Add Lession</a>
                        <a href="javascript:void(0)" class="btn btn-outline-primary btn-rounded btn-sm ml-1" onclick="showAjaxModal('<?php echo site_url('modal/popup/quiz_add/' . $course->course_id); ?>', '<?php echo get_phrase('add_new_quiz'); ?>')"><i class="fa fa-plus"></i> <?php echo get_phrase('add_quiz'); ?></a>

                        <a href="<?php echo admin_url() ?>course/view_all_course"><button type="button" class="btn btn-success btn-sm">View All Course</button></a>

                    </div>
                </div>
                <div class="card-body">
                    <div class="card-body p-0">
                        <div class="bs-stepper linear">
                            <div class="" role="tablist">
                                <!-- your steps here -->
                                <div class="row">
                                    <div class="col-6 col-md-3">
                                        <div class="step active" data-target="#curriculum">
                                            <button type="button" class="step-trigger" role="tab" aria-controls="curriculum-part" id="curriculum-part-trigger" aria-selected="true">
                                                <span class="bs-stepper-circle">1</span>
                                                <span class="bs-stepper-label">Curriculum</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <div class="step " data-target="#basic-part">
                                            <button type="button" class="step-trigger" role="tab" aria-controls="basic-part" id="basic-part-trigger" aria-selected="true">
                                                <span class="bs-stepper-circle">2</span>
                                                <span class="bs-stepper-label">Basic</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-6 col-md-3">
                                        <div class="line"></div>
                                        <div class="step" data-target="#who-this-for-part">
                                            <button type="button" class="step-trigger" role="tab" id="who-this-for-part-trigger" aria-controls="title-part" aria-selected="false">
                                                <span class="bs-stepper-circle">3</span>
                                                <span class="bs-stepper-label">Outcome</span>
                                            </button>
                                        </div>
                                    </div>


                                    <div class="col-6 col-md-3">
                                        <div class="line"></div>
                                        <div class="step" data-target="#whats-new-part">
                                            <button type="button" class="step-trigger" role="tab" id="whats-new-part-trigger " aria-controls="faq-part" aria-selected="false">
                                                <span class="bs-stepper-circle">4</span>
                                                <span class="bs-stepper-label"> Requirements</span>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-6 col-md-3">
                                        <div class="line"></div>
                                        <div class="step" data-target="#pricing-part">
                                            <button type="button" class="step-trigger" role="tab" id="pricing-part-trigger" aria-controls="pricing-part" aria-selected="false">
                                                <span class="bs-stepper-circle">5</span>
                                                <span class="bs-stepper-label"> Pricing</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <?php echo form_open_multipart(base_url() . 'admin/course/update_course_theme_2/' . $course->course_id); ?>
                            <div class="bs-stepper-content">
                                <div id="curriculum" class="content active dstepper-block tab-pane" role="tabpanel" aria-labelledby="curriculum-part-trigger">
                                    <div class="row justify-content-center video_course">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Select Courses </label>
                                                <br>
                                                <select multiple style="width: 100%;" name="course_fbt[]" class="select2" placeholder="Enter Course Online Main Price">
                                                    <option value="">Select From List</option>
                                                    <?php
                                                    $selected_courses = json_decode($course->course_fbt ?? '[]');
                                                    foreach ($all_course as $key => $course_all):
                                                        $selected = in_array($course_all->course_id, $selected_courses) ? 'selected' : '';
                                                    ?>
                                                        <option value="<?php echo $course_all->course_id; ?>" <?php echo $selected; ?>>
                                                            <?php echo $course_all->course_heading; ?>
                                                        </option>
                                                    <?php endforeach; ?>
                                                </select>

                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-info" onclick="stepper.next()">Next</button>
                                </div>

                                <div id="basic-part" class="content tab-pane" role="tabpanel" aria-labelledby="basic-part-trigger">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label>Course Meta Title</label>
                                                <input type="text" name="course_meta_title" class="form-control" placeholder="Enter Course Meta Title" value="<?php echo $course->course_meta_title; ?>">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Admission Close</label>
                                                <input type="date" name="course_admission_date" class="form-control" placeholder="Enter Course Meta Title" value="<?php echo $course->course_admission_date; ?>">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Course Meta Keywords</label>
                                                <textarea type="text" name="course_keywords" class="form-control" placeholder="Enter Course Meta Keywords"><?php echo $course->course_keywords; ?></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Course Meta Description</label>
                                                <textarea type="text" name="course_meta_description" class="form-control" placeholder="Enter Course Meta Description"><?php echo $course->course_meta_description; ?></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Course Category <span class="text-danger">*</span></label>
                                                <select type="text" name="course_category" class="form-control" placeholder="Enter Course Meta Description" id="category" required>
                                                    <option value="">Select</option>
                                                    <?php foreach ($get_all_category_name as $key => $category): ?>
                                                        <option <?php if ($course->course_category == $category->id) {
                                                                    echo 'selected';
                                                                } ?> value="<?php echo $category->id; ?>"><?php echo $category->name; ?></option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Course Sub Category <span class="text-danger">*</span></label>
                                                <select type="text" name="course_sub_category" id="sub_category" class="form-control" placeholder="Enter Course Meta Description" required>
                                                    <option value="">Select</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label>Course Level <span class="text-danger">*</span></label>
                                                <select type="text" name="course_level" class="form-control" placeholder="Enter Course Meta Description" required>
                                                    <option value="">Select</option>


                                                    <option <?php if ($course->course_level == 'beginner') {
                                                                echo 'selected';
                                                            } ?> value="beginner"><?php echo get_phrase('beginner'); ?></option>

                                                    <option <?php if ($course->course_level == 'advanced') {
                                                                echo 'selected';
                                                            } ?> value="advanced"><?php echo get_phrase('advanced'); ?></option>

                                                    <option <?php if ($course->course_level == 'intermediate') {
                                                                echo 'selected';
                                                            } ?> value="intermediate"><?php echo get_phrase('intermediate'); ?></option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label>Course Theme <span class="text-danger">*</span></label>
                                                <select type="text" name="course_theme" class="form-control" placeholder="Enter Course Meta Description" required>
                                                    <option value="">Select</option>
                                                    <option <?php if ($course->course_theme == 'theme_1') {
                                                                echo 'selected';
                                                            } ?> value="theme_1">Theme 1</option>
                                                    <option <?php if ($course->course_theme == 'theme_2') {
                                                                echo 'selected';
                                                            } ?> value="theme_2">Theme 2</option>
                                                    <option <?php if ($course->course_theme == 'theme_3') {
                                                                echo 'selected';
                                                            } ?> value="theme_3">Theme 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group">
                                                <label>Sub Heading </label>
                                                <input type="text" name="course_sub_heading" class="form-control" placeholder="Enter Course Sub Heading" value="<?php echo $course->course_sub_heading; ?>" />
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label>Heading <span class="text-danger">*</span></label>
                                                <input type="text" name="course_heading" class="form-control" placeholder="Enter Course Heading" required value="<?php echo $course->course_heading; ?>" />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Drip Content </label>
                                                <select type="text" name="enable_drip_content" class="form-control" placeholder="Enter Course Sub Heading">
                                                    <option <?php if ($course->enable_drip_content == 1) {
                                                                echo 'selected';
                                                            } ?> value="1">Yes</option>
                                                    <option <?php if ($course->enable_drip_content == 0) {
                                                                echo 'selected';
                                                            } ?> value="0">No</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label>Short Description</label>
                                                <input type="text" name="course_sub_heading_2" class="form-control" placeholder="Enter Course Short Description" value="<?php echo $course->course_sub_heading_2; ?>" />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Description</label>
                                                <textarea type="text" name="course_theme_heading" class="form-control text-editor" placeholder="Enter Course Short Description"><?php echo $course->course_theme_heading; ?></textarea>
                                            </div>
                                        </div>


                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Image </label>
                                                <input type="file" name="course_image" class="form-control" placeholder="Enter Course Heading" />
                                            </div>
                                        </div>


                                        <div class="col-md-2">
                                            <img src="<?php echo base_url(); ?><?php echo $course->course_image; ?>" width="100">
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Small Image (250X250px)</label>
                                                <input type="file" name="course_small_image" class="form-control" placeholder="Enter Course Heading" />
                                            </div>
                                        </div>


                                        <div class="col-md-2">
                                            <img src="<?php echo base_url(); ?><?php echo $course->course_small_image; ?>" width="100">
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label>Course Validity <span>*</span> </label>
                                                <select name="course_validity" class="form-control" placeholder="Enter Course Heading" required>
                                                    <option value="">Select</option>
                                                    <option <?php if ($course->course_validity == 1) {
                                                                echo 'selected';
                                                            } ?> value="1">Lifitime</option>
                                                    <option <?php if ($course->course_validity == 2) {
                                                                echo 'selected';
                                                            } ?> value="2">1 Year</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label>Is Tranding</label>
                                                <select type="text" name="course_is_tranding" class="form-control" placeholder="Enter Course Sub Heading">
                                                    <option <?php if ($course->course_is_tranding == 1) {
                                                                echo 'selected';
                                                            } ?> value="1">Yes</option>
                                                    <option <?php if ($course->course_is_tranding == 0) {
                                                                echo 'selected';
                                                            } ?> value="0">No</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                                            <button type="button" class="btn btn-info" onclick="stepper.next()">Next</button>
                                            <button type="submit" class="btn btn-success pull-right">Save</button>
                                        </div>
                                    </div>
                                </div>


                                <div id="who-this-for-part" class="content tab-pane" role="tabpanel" aria-labelledby="who-this-for-part-trigger">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <table id="dynamic-table-for-who-this-for" class="dynamic_tab">
                                                <thead>
                                                    <tr>
                                                        <th width="85%">Content Title</th>
                                                        <th><button type="button" class="btn btn-warning" onclick="addRowForWhoThisFor()">Add Row</button></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php
                                                    $who_this_for_data = json_decode($course->course_who_this_for, true);
                                                    foreach ($who_this_for_data as $who_this_for) : ?>
                                                        <tr>
                                                            <td>
                                                                <input required type="text" placeholder="Enter Title" class="form-control" name="who_this_title[]" value="<?php echo $who_this_for; ?>">
                                                            </td>
                                                            <td><button type="button" class="btn btn-danger" onclick="deleteRowForWhoThisFor(this)">Delete</button></td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                                            <button type="button" class="btn btn-info" onclick="stepper.next()">Next</button>
                                            <button type="submit" class="btn btn-success pull-right">Save</button>
                                        </div>
                                    </div>
                                </div>

                                <div id="whats-new-part" class="content tab-pane" role="tabpanel" aria-labelledby="whats-new-part-trigger">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <table id="dynamic-table-for-whats-new" class="dynamic_tab">
                                                <thead>
                                                    <tr>
                                                        <th width="85%">Content</th>
                                                        <th><button type="button" class="btn btn-warning" onclick="addRowForWhatsNew()">Add Row</button></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php
                                                    $all_whats_new = json_decode($course->course_whats_new, true);
                                                    foreach ($all_whats_new as $whats_new) : ?>
                                                        <tr>
                                                            <td>
                                                                <input required type="text" placeholder="Enter Content" class="form-control" name="course_whats_new[]" value="<?php echo $whats_new; ?>">
                                                            </td>
                                                            <td><button type="button" class="btn btn-danger" onclick="deleteRowForWhatsNew(this)">Delete</button></td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                                            <button type="button" class="btn btn-info" onclick="stepper.next()">Next</button>
                                            <button type="submit" class="btn btn-success pull-right">Save</button>
                                        </div>
                                    </div>
                                </div>


                                <div id="pricing-part" class="content tab-pane" role="tabpanel" aria-labelledby="pricing-part-trigger">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h4>Pricing</h4>
                                            <hr />
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <input type="checkbox" id="free_course_checkbox" name="course_is_free" placeholder="Enter Course Online Main Price" value="1" <?php if ($course->course_is_free == 1) {
                                                                                                                                                                                    echo 'checked';
                                                                                                                                                                                } ?>>
                                                <label>is This Free Course? </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Main Price </label>
                                                <input type="number" name="course_online_main_price" class="form-control" placeholder="Enter Course Online Main Price" value="<?php echo $course->course_online_main_price; ?>">
                                            </div>
                                        </div>
                                        <div class="col-md-6 price-filed">
                                            <div class="form-group">
                                                <label>Disocunt Price </label>
                                                <input type="number" name="course_onine_dicount_price" class="form-control" placeholder="Enter Course Online Disocunt Price" value="<?php echo $course->course_onine_dicount_price; ?>">
                                            </div>
                                        </div>
                                        <div class="col-md-4 d-none">
                                            <div class="form-group">
                                                <label>FBT Price </label>
                                                <input type="number" name="course_fbt_price" class="form-control" placeholder="Enter Frequently Bought Together Price" value="<?php echo $course->course_fbt_price; ?>">
                                            </div>
                                        </div>



                                        <div class="col-md-12 mt-3">
                                            <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                                            <!-- <button type="button" class="btn btn-info" onclick="stepper.next()">Next</button> -->
                                            <button type="submit" class="btn btn-success pull-right">Save</button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <?php echo
                            form_close();
                            ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<style>
    .category-block {
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .faq-table {
        width: 100%;
        margin-bottom: 10px;
    }

    .faq-table td {
        padding: 5px;
    }

    .category-input {
        margin-bottom: 10px;
        font-weight: bold;
    }
</style>
<script>
    $(document).ready(function() {
        function togglePriceFields() {
            if ($('#free_course_checkbox').is(':checked')) {
                $('.price-filed').hide();
            } else {
                $('.price-filed').show();
            }
        }

        // Run on page load
        togglePriceFields();

        // Run when checkbox is clicked
        $('#free_course_checkbox').on('change', function() {
            togglePriceFields();
        });
    });
</script>


<?php $this->load->view('admin/course/components/course_modal'); ?>
<?php $this->load->view('admin/course/components/ajax_function'); ?>
<?php $this->load->view('admin/modal'); ?>
<script src="<?php echo admin_css() ?>plugins/bs-stepper/js/bs-stepper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        function formatOption(option) {
            if (!option.id) {
                return option.text;
            }
            var img = $(option.element).data('image');
            var $option = $(
                '<span><img src="' + img + '" class="img-flag" style="width: 20px; height: 20px; margin-right: 10px;" /> ' + option.text + '</span>'
            );
            return $option;
        }

        $('.select2').select2({
            placeholder: "Enter Course Sub Heading",
            templateResult: formatOption,
            templateSelection: formatOption,
            allowClear: true,
            escapeMarkup: function(markup) {
                return markup;
            } // Allows HTML markup to be returned
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        var stepper = new Stepper(document.querySelector('.bs-stepper'));

        document.querySelectorAll('.step-trigger').forEach(button => {
            button.addEventListener('click', function() {
                var target = this.parentElement.getAttribute('data-target');

                // Hide all tab panes
                document.querySelectorAll('.tab-pane').forEach(tabPane => {
                    tabPane.classList.remove('show', 'active');
                });

                // Show the corresponding tab pane
                document.querySelector(target).classList.add('show', 'active');

                // Remove 'active' class from all steps
                document.querySelectorAll('.step').forEach(step => {
                    step.classList.remove('active');
                });

                // Add 'active' class to the current step
                this.parentElement.classList.add('active');

                // Update the stepper
                stepper.to(parseInt(this.querySelector('.bs-stepper-circle').textContent));
            });
        });
    });
    $(document).ready(function() {
        $('#category').change(function() {
            var category_id = $('#category').val();
            if (category_id != '') {
                $.ajax({
                    url: "<?php echo base_url(); ?>admin/category/fetch_all_sub_category",
                    method: "POST",
                    data: {
                        category_id: category_id
                    },
                    success: function(data) {
                        $('#sub_category').html(data);
                    }
                });
            } else {
                $('#sub_category').html('<option value="">Select</option>');
                $('#child_sub_category').html('<option value="">Select Child Sub Category</option>');
            }
        });
        get_sub_category(<?php echo $course->course_category; ?>, <?php echo $course->course_sub_category; ?>)
    });

    function get_sub_category(category_id, selected_value) {
        console.log(category_id);
        if (category_id != '') {
            $.ajax({
                url: "<?php echo base_url(); ?>admin/category/fetch_all_sub_category",
                method: "POST",
                data: {
                    category_id: category_id
                },
                success: function(data) {
                    $('#sub_category').html(data);

                    // Check if a selected_value is provided and set it as selected
                    if (selected_value !== '') {
                        $('#sub_category').val(selected_value);
                    }
                }
            });
        } else {
            $('#sub_category').html('<option value="">Select</option>');
            $('#child_sub_category').html('<option value="">Select Child Sub Category</option>');
        }
    }
</script>

<style>
    .tab-pane {
        display: none !important;
    }

    .tab-pane.active {
        display: block !important;
    }

    .dynamic_tab {
        width: 100%;
        border-collapse: collapse;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .dynamic_tab th {
        background-color: #4CAF50;
        color: white;
    }

    .dynamic_tab th,
    .dynamic_tab td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        color: #000;
    }

    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 7px;
    }
</style>