@extends('admin/course-management/course-details/index')

@section('main-content-tab')
<table class="table table-bordered table-row-dashed data-table">
    <h1 class="fw-bolder text-dark" style="float:left;">Course Content List</h1>
    <a href="{{route('course-content.create', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug])}}" class="btn btn-primary" style="float:right;margin-bottom:5px;">
        <i class="fa fa-plus"></i> Add Course Content
    </a>
    <div style="clear:both;"></div>
    @include('admin.course-management.course-details.course-content.sectionDescription')
    <div style="clear:both;"></div>
    <thead>
        <tr>
            <th class="text-center">SL.</th>
            <th class="text-center">Title</th>
            <th class="text-center">Status</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody class="text-gray-600 fw-bold">

    </tbody>
</table>

<div class="modal fade" id="sectionModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="max-width: 900px;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Section Description</h5>
        <button type="button" onclick="return editSectionFunction();" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="sectionForm" method="POST" action="javascript:void(0)">
            @csrf
            <div class="alert alert-danger print-error-msg" style="display:none">
                <ul></ul>
            </div>
            <input type="hidden" name="institute_slug" value="{{$institute_slug}}">
            <input type="hidden" name="course_slug" value="{{$course_slug}}">
            <div class="form-group row mb-4" style="text-align:right;">
                <label for="inputEmail3" class="col-sm-3 col-form-label">Section Description (EN)</label>
                <div class="col-sm-9">
                    <textarea name="description" id="editSectionDescription" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" autocomplete="off">{{$course_content_description ? $course_content_description->description : ''}}</textarea>
                </div>
            </div>
            <div class="form-group row mb-4" style="text-align:right;">
                <label for="inputEmail3" class="col-sm-3 col-form-label">Section Description (BN)</label>
                <div class="col-sm-9">
                  <textarea name="description_bn" id="editSectionDescriptionBn" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" autocomplete="off">{{$course_content_description ? $course_content_description->description_bn : ''}}</textarea>
                </div>
            </div>
            <div class="mb-3" style="text-align:right;">
                <button onclick="return editSectionFunction();" data-bs-dismiss="modal" aria-label="Close" style="margin-right:5px;" class="btn btn-secondary" type="button" class="btn-close">Close</button>
                <button class="btn btn-success btn-submit-edit">Update</button>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

@section('extra-extra-css')
    <link href="{{ asset('css/buttons.dataTables.min.css') }}" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="{{ asset('summernote/summernote.css') }}">
    <style>
        a.badge.text-capitalize:hover{
            color: #fff;
        }
        .note-editor.note-frame .note-editing-area{
          text-align: left;
        }
    </style>
@endsection


@section('extra-extra-script')
    @section('extra-sub-script')
        @show
    <script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('js/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('js/jszip.min.js')}}"></script>
    <script src="{{asset('js/pdfmake.min.js')}}"></script>
    <script src="{{asset('js/vfs_fonts.js')}}"></script>
    <script src="{{ asset('summernote/summernote.min.js') }}"></script>
    <script src="{{asset('js/buttons.html5.min.js')}}"></script>
    <script type="text/javascript">
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            aaSorting:[],
            lengthMenu: [ [ 10, 25, 50, 100], [ 10, 25, 50, 100] ],
            ajax: "{{ route('course-content.index', ['institute_slug' => $institute_slug, 'course_slug' => $course_slug]) }}?type=table",
            dom: 'Blfrtip',
            buttons: [
                {
                    extend: 'pdf',
                    exportOptions: {
                        columns: [0,1,2] // Column index which needs to export
                    }
                },
                {
                    extend: 'csv',
                    exportOptions: {
                        columns: [0,1,2] // Column index which needs to export
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0,1,2] // Column index which needs to export
                    }
                }
            ],
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'title', name: 'title'},
                { data: 'status', name: 'status'},
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
        });

    });
    </script>

    <script>
        function editSectionFunction(){
            $(".print-error-msg").css('display','none');
            document.getElementById("sectionForm").reset();
            return true;
        }
        function setData(course_content_description)
        {
            $(".print-error-msg").css('display','none');
            document.getElementById("sectionForm").reset();

            var item = course_content_description;

            $('#editSectionDescription').val(item ? (item.description ? item.description : '') : '');
            $('#editSectionDescriptionBn').val(item ? (item.description_bn ? item.description_bn : '') : '');
        }
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
          $('.summernote').summernote({
            height: 200,
            popover: {
                image: [],
                link: [],
                air: []
            }
          });
        });
    </script>
@endsection