@extends('super-admin.layouts.main')
@section('content')
<main>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
   <!-- Content Wrapper. Contains page content -->
   <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Add Course Topic</h1>
            <a class="btn btn-outline-info" href="javascript:history.back()">Back</a>
          </div><!-- /.col -->
         
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
   <!-- Main content -->
   <div class="content">
      <div class="container-fluid">
        <div class="card">
          <div class="row">
            <div class="col-lg-12">
              <div class="card-body">
            <form action="{{ route('eventTopic.store',$eventId) }}"  method="POST" enctype="multipart/form-data" id="addEventTopic">
            @if (Session::has('message'))
                        <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
                    @endif
                    @if (Session::has('error'))
                        <p class="alert {{ Session::get('alert-class', 'alert-danger') }}" id="errormsg">{{ Session::get('error') }}</p>
                    @endif
             @csrf

             <div id="dynamicTableTopic">
                    <div class="row main">
                        <div class="col-12">
                              <label for="">Title</label><span class="text-danger">*</span>
                              <input type="text" class="form-control" name="topic[0][title]">

                              <label>Description</label><span class="text-danger">*</span>
                              <textarea id="mytextarea" class="editor summernote" name="topic[0][description]"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-6 mt-1">                 
                  <button style="margin-left: -7px;" type="button" name="add" id="addItinerary" class="btn btn-success">Add More</button>
                </div>
          
               <button class="btn btn-info mt-4" type="submit">Submit</button>
            </form>
  

              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>

  <script>
$(document).ready(function () {
    var i = 0;

    $("#addItinerary").click(function () {
        ++i;

        var newRowHtml = '<div class="row main"><div class="col-12">' +

            '<label for="">Title</label>' +
            '<input type="text" class="form-control" name="topic[' + i + '][title]">' +

            '<label>Description</label><span class="text-danger">*</span>' +
            '<textarea class="editor summernote" name="topic[' + i + '][description]"></textarea>' +
            
            '<div class="col-1">' +
              '<button type="button" class="btn btn-danger removeTopic tr-' + i + ' mt-2">Remove</button>' +
            '</div></div>';

        $("#dynamicTableTopic").append(newRowHtml);

        $('.summernote').summernote({
    height: 100
  });
    });
});

    $(document).on('click', '.removeTopic', function(){
    $(this).parents('div.row.main').remove();
});

    </script>
  <!-- /.content-wrapper -->
</main>
@section('script')
  $('.summernote').summernote({
    height: 100,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['para', ['ul', 'ol']],
    ],
    disableDragAndDrop: true,
  });
  setTimeout(function() {
    $('#errormsg').fadeOut('fast');
}, 1000);
@endsection
@endsection