<link rel="stylesheet" href="<?php echo admin_css() ?>plugins/bs-stepper/css/bs-stepper.min.css">
<?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 Bundle 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 Bundle 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 Bundle</h3>
          <div class="card-tools">
            <a href="<?php echo admin_url() ?>course/view_all_course"><button type="button" class="btn btn-success btn-sm">View All Bundle</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="#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">1</span>
                        <span class="bs-stepper-label">Basic</span>
                      </button>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="step " data-target="#course-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="course-part" id="course-part-trigger" aria-selected="true">
                        <span class="bs-stepper-circle">2</span>
                        <span class="bs-stepper-label">Course / Price</span>
                      </button>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="line"></div>
                    <div class="step" data-target="#title-part">
                      <button type="button" class="step-trigger" role="tab" id="title-part-trigger" aria-controls="title-part" aria-selected="false">
                        <span class="bs-stepper-circle">3</span>
                        <span class="bs-stepper-label">Title</span>
                      </button>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="line"></div>
                    <div class="step" data-target="#why-you-get-part">
                      <button type="button" class="step-trigger" role="tab" id="why-you-get-part-trigger" aria-controls="why-you-get-part" aria-selected="false">
                        <span class="bs-stepper-circle">4</span>
                        <span class="bs-stepper-label">Bundle Benifit</span>
                      </button>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="line"></div>
                    <div class="step" data-target="#what-you-getting-part">
                      <button type="button" class="step-trigger" role="tab" id="what-you-getting-part-trigger" aria-controls="what-you-getting-part" aria-selected="false">
                        <span class="bs-stepper-circle">5</span>
                        <span class="bs-stepper-label"> What You Getting</span>
                      </button>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="line"></div>
                    <div class="step" data-target="#blueprint-part">
                      <button type="button" class="step-trigger" role="tab" id="blueprint-part-trigger" aria-controls="blueprint-part" aria-selected="false">
                        <span class="bs-stepper-circle">6</span>
                        <span class="bs-stepper-label"> Blueprint</span>
                      </button>
                    </div>
                  </div>
                  <div class="col-6 col-md-3">
                    <div class="line"></div>
                    <div class="step" data-target="#faq-part">
                      <button type="button" class="step-trigger" role="tab" id="faq-part-trigger" aria-controls="faq-part" aria-selected="false">
                        <span class="bs-stepper-circle">7</span>
                        <span class="bs-stepper-label"> FAQ</span>
                      </button>
                    </div>
                  </div>

                </div>
              </div>
              <?php echo form_open_multipart(base_url() . 'admin/course/update_bundle/' . $data->bundile_id); ?>
              <div class="bs-stepper-content">

                <div id="basic-part" class="content tab-pane active" role="tabpanel" aria-labelledby="basic-part-trigger">
                  <div class="row">
                    <?php include 'bundle_components/basic_partial_view.php' ?>
                    <div class="col-md-12 mt-3">
                      <!-- <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="course-part" class="content tab-pane" role="tabpanel" aria-labelledby="course-part-trigger">
                  <div class="row">
                    <?php include 'bundle_components/course_partial_view.php' ?>
                    <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="title-part" class="content tab-pane" role="tabpanel" aria-labelledby="title-part-trigger">
                  <div class="row">

                    <?php
                    $headingData = json_decode($data->bundile_page_heading, true);

                    foreach ($headingData as $key => $heading) {
                      // Convert key to a more readable format for label
                      $formattedKey = ucwords(str_replace('_', ' ', $key));

                      // Generate HTML for each title and subtitle
                      foreach ($heading as $subKey => $subValue) {
                        if ($subKey != 'paragraph') {
                          $name = $key . '_' . $subKey;
                          $label = $formattedKey . ' ' . ucwords(str_replace('_', ' ', $subKey));
                          echo '<div class="col-md-12">';
                          echo '<div class="form-group">';
                          echo '<label>' . $label . '</label>';
                          echo '<input type="text" name="' . $name . '" class="form-control" placeholder="Enter ' . $label . '" value="' . $subValue . '">';
                          echo '</div>';
                          echo '</div>';
                        } else {
                          // Generate HTML for paragraph as textarea
                          $name = $key . '_' . $subKey;
                          $label = $formattedKey . ' ' . ucwords(str_replace('_', ' ', $subKey));
                          echo '<div class="col-md-12">';
                          echo '<div class="form-group">';
                          echo '<label>' . $label . '</label>';
                          echo '<textarea name="' . $name . '" class="form-control" placeholder="Enter ' . $label . '">' . $subValue . '</textarea>';
                          echo '</div>';
                          echo '</div>';
                        }
                      }
                      echo '<div class="col-md-12">';
                      echo '<hr/>';
                      echo '</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="why-you-get-part" class="content tab-pane" role="tabpanel" aria-labelledby="why-you-get-part-trigger">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Benifit Image</label>
                        <input type="file" name="bundile_benifit_image" class="form-control" placeholder="Enter Bundle Price">
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <img src="<?php echo base_url(); ?><?php echo $data->bundile_benifit_image; ?>" width="70px">
                      </div>
                    </div>
                    <div class="col-md-12">
                      <table id="dynamic-table-for-why-you-get" class="dynamic_tab">
                        <thead>
                          <tr>
                            <th width="40%">Qns</th>
                            <th width="45%">Ans.</th>
                            <th><button type="button" class="btn btn-warning" onclick="addRowForWhyYouGet()">Add Row</button></th>
                          </tr>
                        </thead>
                        <tbody>
                          <?php
                          $all_bundile_benifit_content = json_decode($data->bundile_benifit_content, true);
                          foreach ($all_bundile_benifit_content as $benifit) : ?>
                            <tr>
                              <td>
                                <input required type="text" placeholder="Enter Qns" class="form-control" name="benifit_qns[]" value="<?php echo $benifit['benifit_qns']; ?>">
                              </td>
                              <td>
                                <input required type="text" placeholder="Enter Ans" class="form-control" name="benifit_ans[]" value="<?php echo $benifit['benifit_ans']; ?>">
                              </td>
                              <td><button type="button" class="btn btn-danger" onclick="deleteRowForWhyYouGet(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="what-you-getting-part" class="content tab-pane" role="tabpanel" aria-labelledby="what-you-getting-part-trigger">
                  <div class="row">
                    <div class="col-md-12">
                      <table id="dynamic-table-for-what-you-getting" class="dynamic_tab">
                        <thead>
                          <tr>
                            <th width="85%">Content</th>
                            <th><button type="button" class="btn btn-warning" onclick="addRowForWhatYouGet()">Add Row</button></th>
                          </tr>
                        </thead>
                        <tbody>
                          <?php
                          // $all_what_you_get = json_decode($data->bundile_what_you_get, true);
                          foreach (json_decode($data->bundile_what_you_get) as $what_you_get) : ?>
                            <tr>
                              <td>
                                <input required type="text" placeholder="Enter Content" class="form-control" name="what_you_get[]" value="<?php echo $what_you_get; ?>">
                              </td>
                              <td><button type="button" class="btn btn-danger" onclick="deleteRowForWhatYouGet(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="blueprint-part" class="content tab-pane" role="tabpanel" aria-labelledby="blueprint-part-trigger">
                  <div class="row">
                    <div class="col-md-12" id="bundle_certified_from">
                      <?php include 'bundle_components/blueprint_partial_view.php'; ?>
                    </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="faq-part" class="content tab-pane" role="tabpanel" aria-labelledby="faq-part-trigger">
                  <div class="row">
                    <div class="col-md-12">
                      <table id="dynamic-table-for-faq" class="dynamic_tab">
                        <thead>
                          <tr>
                            <th width="40%">Qns</th>
                            <th width="45%">Ans.</th>
                            <th><button type="button" class="btn btn-warning" onclick="addRowForFaq()">Add Row</button></th>
                          </tr>
                        </thead>
                        <tbody>
                          <?php
                          $all_course_faq = json_decode($data->bundile_faq_content, true);
                          foreach ($all_course_faq as $faq) : ?>
                            <tr>
                              <td>
                                <input required type="text" placeholder="Enter Qns" class="form-control" name="faq_qns[]" value="<?php echo $faq['faq_qns']; ?>">
                              </td>
                              <td>
                                <input required type="text" placeholder="Enter Ans" class="form-control" name="faq_ans[]" value="<?php echo $faq['faq_ans']; ?>">
                              </td>
                              <td><button type="button" class="btn btn-danger" onclick="deleteRowForFaq(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>
              <?php echo
              form_close();
              ?>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<?php $this->load->view('admin/course/bundle_components/modal'); ?>
<?php $this->load->view('admin/course/bundle_components/script_function'); ?>

<script src="<?php echo admin_css() ?>plugins/bs-stepper/js/bs-stepper.min.js"></script>
<script type="text/javascript">
  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));
      });
    });
  });
</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;
  }
</style>