@extends('panel.layouts.master')
@section('title','ویرایش دوره ')

@section('content')
    <!-- begin::page loader-->
    @include('panel.layouts.sidebar')
    @include('panel.layouts.header')
    <style>
        .btn{
            border-radius: 0;
            width: 5rem;
            height: 2.5rem;
            justify-content: center;
        }
    </style>
    <main class="main-content">
        <div class="card">
            <div class="card-body">
                <div class="card-title d-flex justify-content-between align-items-center">
                    <h6>ویرایش دوره </h6>
                </div>
                <form action="{{ route('courses.update', $course->id) }}" method="post" class="needs-validation" novalidate enctype="multipart/form-data">
                    @csrf
                    @method('put')
                    <div class="row">
                        <div class="col-12 col-md-4 col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="name">نام دوره</label><span class="required">*</span>
                                <input type="text" name="name" id="name" class="form-control mt-2 @error('name') is-invalid @enderror" value="{{ old('name', $course->name) }}" required>
                                @error('courses_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="slug">اسلاگ</label><span class="required">*</span>
                                <input type="text" name="slug" id="slug" class="form-control mt-2 @error('slug') is-invalid @enderror" value="{{ old('slug', $course->slug) }}" required>
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="cover">کاور</label>
                                <input type="file" name="cover" id="cover" class="form-control mt-2 @error('cover') is-invalid @enderror">
                                <span>{{ $course->cover }}</span>
                                @error('cover')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="category_id">دسته بندی</label><span class="required">*</span>
                                <select name="category_id" id="category_id" class="form-control mt-2 @error('category_id') is-invalid @enderror" required>
                                    <option value="">انتخاب کنید</option>
                                    @foreach ($categories as $item)
                                        <option value="{{ $item->id }}" {{ old('category_id', $course->category_id) == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="related_id">پکیج مرتبط</label>
                                <select name="related_id" id="related_id" class="form-control mt-2 @error('related_id') is-invalid @enderror">
                                    <option value="">انتخاب کنید</option>
                                    @foreach ($packages as $item)
                                        <option value="{{ $item->id }}" {{ old('related_id', $course->related_id) == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                @error('related_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="teacher_id">مدرس</label>
                                <select name="teacher_id" id="teacher_id" class="form-control mt-2 @error('teacher_id') is_invalid @enderror">
                                    <option value="">انتخاب کنید</option>
                                    @foreach ($teachers as $item)
                                        <option value="{{ $item->id }}" {{ old('teacher_id', $course->teacher_id) == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                @error('teacher_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="items">زیر دوره ها</label>
                                <select name="items[]" multiple id="items" class="form-control js-example-basic-single mt-2 @error('items') is_invalid @enderror">
                                    <option value="">انتخاب کنید</option>
                                    @foreach ($courses as $item)
                                        <option value="{{ $item->id }}" {{ in_array($item->id, $course->items()->pluck('item_id')->toArray()) ? 'selected' : '' }}>{{ $item->name }}</option>
                                    @endforeach
                                </select>
                                @error('items')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="price">قیمت</label><span class="required">*</span>
                                <input type="number" name="price" id="price" class="form-control mt-2 @error('price') is-invalid @enderror" value="{{ old('price', $course->price) }}" required>
                                @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="discount">تخفیف</label>
                                <input type="number" name="discount" id="discount" class="form-control mt-2 @error('discount') is-invalid @enderror" value="{{ old('discount', $course->discount) }}">
                                @error('discount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="teaser">تیزر</label>
                                <textarea type="file" name="teaser" id="teaser" class="form-control mt-2 @error('teaser') is-invalid @enderror">{{ $course->teaser }}</textarea>
                                @error('teaser')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="intro">ویدیو معرفی استاد</label>
                                <textarea type="file" name="intro" id="intro" class="form-control mt-2 @error('intro') is-invalid @enderror"></textarea>
                                @error('intro')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-4 mt-3">
                            <div class="form-group">
                                <label for="url">مسیر دوره</label>
                                <input type="text" name="url" id="url" class="form-control mt-2 @error('url') is-invalid @enderror" value="{{ old('url', $course->url) }}">
                                @error('courses_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 col-md-4 col-lg-3 mt-3">
                            <div class="form-group">
                                <label for="plan_file">فایل برنامه</label>
                                <input type="file" name="plan_file" id="plan_file" class="form-control mt-2 @error('plan_file') is-invalid @enderror">
                                <span>{{ $course->plan_file }}</span>
                                @error('plan_file')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="form-group">
                                <label for="buy_desc">توضیحات خرید</label>
                                <textarea name="buy_desc" id="buy_desc" class="editor @error('buy_desc') is-invalid @enderror">{{ old('buy_desc', $course->buy_desc) }}</textarea>
                                @error('buy_desc')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="form-group">
                                <label for="short_desc">خلاصه دوره</label>
                                <textarea name="short_desc" id="short_desc" class="editor @error('short_desc') is-invalid @enderror">{{ old('short_desc', $course->short_desc) }}</textarea>
                                @error('short_desc')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="form-group">
                                <label for="long_desc">توضیحات دوره</label>
                                <textarea name="long_desc" id="long_desc" class="editor @error('long_desc') is-invalid @enderror">{{ old('long_desc', $course->long_desc) }}</textarea>
                                @error('long_desc')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        @if($course->is_special == true)
                        <div class="col-3 mt-3">
                            <div class="form-group">
                                <label for="book_1">جلد اول </label>
                                <textarea name="book_1" id="book_1" class=" @error('book_1') is-invalid @enderror">{{ old('book_1', $course->book_1) }}</textarea>
                                @error('book_1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3 mt-3">
                            <div class="form-group">
                                <label for="book_2"> جلد دوم</label>
                                <textarea name="book_2" id="book_2" class=" @error('book_2') is-invalid @enderror">{{ old('book_2', $course->book_2) }}</textarea>
                                @error('book_2')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3 mt-3">
                            <div class="form-group">
                                <label for="book_3"> جلد سوم </label>
                                <textarea name="book_3" id="book_3" class=" @error('book_3') is-invalid @enderror">{{ old('book_3', $course->book_3) }}</textarea>
                                @error('book_3')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-3 mt-3">
                            <div class="form-group">
                                <label for="book_4"> جلد چهارم </label>
                                <textarea name="book_4" id="book_4" class=" @error('book_4') is-invalid @enderror">{{ old('book_4', $course->book_4) }}</textarea>
                                @error('book_4')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        @endif
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                            <div class="form-group">
                                <div class="custom-control custom-switch mt-5">
                                    <input type="checkbox" class="custom-control-input" id="is_special" name="is_special" {{ $course->is_special == 1 ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_special">ویژه</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                            <div class="form-group">
                                <div class="custom-control custom-switch mt-5">
                                    <input type="checkbox" class="custom-control-input" id="is_special_plan" name="is_special_plan" {{ $course->is_special_plan == 1 ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_special_plan">طرح ویژه</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                            <div class="form-group">
                                <div class="custom-control custom-switch mt-5">
                                    <input type="checkbox" class="custom-control-input" id="is_sell" name="is_sell" {{ $course->is_sell == 1 ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_sell">قابل خرید</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                            <div class="form-group">
                                <div class="custom-control custom-switch mt-5">
                                    <input type="checkbox" class="custom-control-input" id="show_all" name="show_all" {{ $course->show_all == 1 ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="show_all">نمایش در همه محصولات</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                            <div class="form-group">
                                <div class="custom-control custom-switch mt-5">
                                    <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" {{ $course->is_active == 1 ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">فعال</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <h6>اقساط</h6>
                        <div class="col-lg-12">
                            <a href="{{ route('installments.create', $course) }}" class="btn btn-outline-secondary w-25 btn-uppercase card-title mb-4">
                                <i class="fas fa-plus m-r-5"></i> ایجاد قسط
                            </a>
                            <div class="card">
                                <div class="card-body">
                                    {{-- <div class="table-responsive"> --}}
                                        <table class="table table-bordered shadow">
                                            <thead>
                                                <tr>
                                                    <th>عنوان</th>
                                                    <th>جلسات</th>
                                                    <th>ویرایش</th>
                                                    <th>حذف</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($installments as $key => $item)
                                                    <tr>
                                                        <td>{{ $item->title }}</td>
                                                        <td>از جلسه {{ $item->from }} تا {{ $item->to }}</td>
                                                        <td>
                                                            <a href="{{ route('installments.edit', ['course' => $course, 'installment' => $item]) }}" class="btn btn-warning btn-floating">
                                                                <i class="fas fa-pen-square text-white"></i>
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger btn-floating trashRow" data-url="{{ route('installments.destroy', ['course' => $course, 'installment' => $item]) }}" data-id="{{ $item->id }}" >
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    {{-- </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <h6>سرفصل ها</h6>
                        <div class="col-lg-12">
                            <a href="{{ route('seasons.create', $course) }}" class="btn btn-outline-secondary w-25 btn-uppercase card-title mb-4">
                                <i class="fas fa-plus m-r-5"></i> ایجاد فصل
                            </a>
                            <div class="card">
                                <div class="card-body">
                                    {{-- <div class="table-responsive"> --}}
                                        <table class="table table-bordered shadow data-table" data-searching="false" data-paging="false" data-sorting="false" id="seasons-table">
                                            <thead>
                                                <tr>
                                                    <th>عنوان سرفصل</th>
                                                    <th>تعداد جلسات</th>
                                                    <th>وضعیت</th>
                                                    <th>ویرایش</th>
                                                    <th>حذف</th>
                                                    <th>ایجاد درس</th>
                                                    <th>مرتب سازی</th>
                                                    <th style="display: none">دیتا</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($seasons as $key => $item)
                                                @php
                                                    $status = $item->is_active;
                                                    $statusColor = 'success';
                                                    if($status == 1){
                                                        $status = 'منتشر شده';
                                                    }else{
                                                        $status = 'مخفی';
                                                        $statusColor = 'danger';
                                                    }
                                                @endphp
                                                    <tr>
                                                        <input type="hidden" name="positions[]" value="{{ $item->id }}">
                                                        <td>{{ $item->title }}</td>
                                                        <td>{{ $item->lessons_count }}</td>
                                                        <td><span class="badge badge-{{ $statusColor }}">{{ $status }}</span></td>
                                                        <td>
                                                            <a href="{{ route('seasons.edit', ['course' => $course, 'season' => $item]) }}" class="btn btn-warning btn-floating">
                                                                <i class="fas fa-pen-square text-white"></i>
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger btn-floating trashRow" data-url="{{ route('seasons.destroy', ['course' => $course, 'season' => $item]) }}" data-id="{{ $item->id }}" >
                                                                <i class="fas fa-trash-alt"></i>
                                                            </button>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('lessons.create', ['season' => $item]) }}" class="btn btn-primary btn-floating">
                                                                <i class="fas fa-plus text-white"></i>
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('lessons.sortable', ['course' => $course, 'season' => $item]) }}" class="btn btn-dark btn-floating">
                                                                <i class="fas fa-arrows-alt text-white"></i>
                                                            </a>
                                                        </td>
                                                        <td style="display: none;">{{ json_encode($item->lessons()->orderBy('position')->get()) }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    {{-- </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 mt-3">
                            <div class="form-group">
                                <button class="btn btn-success">ثبت</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection
@section('script')
<script src="https://cdn.tiny.cloud/1/k7g8ih1ef08u3ie3xyjuvasd1r97g8sl54tm78c0r62pqjmy/tinymce/6/tinymce.min.js"
        referrerpolicy="origin"></script>
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script>
        {{-- tinymce --}}
        var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

        tinymce.init({
            selector: '.editor',
            plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
            imagetools_cors_hosts: ['picsum.photos'],
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            image_advtab: true,
            link_list: [{
                    title: 'My page 1',
                    value: 'https://www.tiny.cloud'
                },
                {
                    title: 'My page 2',
                    value: 'http://www.moxiecode.com'
                }
            ],
            image_list: [{
                    title: 'My page 1',
                    value: 'https://www.tiny.cloud'
                },
                {
                    title: 'My page 2',
                    value: 'http://www.moxiecode.com'
                }
            ],
            image_class_list: [{
                    title: 'None',
                    value: ''
                },
                {
                    title: 'Some class',
                    value: 'class-name'
                }
            ],
            importcss_append: true,
            file_picker_callback: function(callback, value, meta) {
                /* Provide file and text for the link dialog */
                if (meta.filetype === 'file') {
                    callback('https://www.google.com/logos/google.jpg', {
                        text: 'My text'
                    });
                }

                /* Provide image and alt text for the image dialog */
                if (meta.filetype === 'image') {
                    callback('https://www.google.com/logos/google.jpg', {
                        alt: 'My alt text'
                    });
                }

                /* Provide alternative source and posted for the media dialog */
                if (meta.filetype === 'media') {
                    callback('movie.mp4', {
                        source2: 'alt.ogg',
                        poster: 'https://www.google.com/logos/google.jpg'
                    });
                }
            },
            templates: [{
                    title: 'New Table',
                    description: 'creates a new table',
                    content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
                },
                {
                    title: 'Starting my story',
                    description: 'A cure for writers block',
                    content: 'Once upon a time...'
                },
                {
                    title: 'New list with dates',
                    description: 'New List with dates',
                    content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
                }
            ],
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 600,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            noneditable_noneditable_class: 'mceNonEditable',
            toolbar_mode: 'sliding',
            contextmenu: 'link image imagetools table',
            skin: useDarkMode ? 'oxide-dark' : 'oxide',
            content_css: useDarkMode ? 'dark' : 'default',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });
        {{-- end tinymce --}}

        // $(function () {
            // 'use strict';
            var table = $('.data-table').DataTable();

            $(".sortable tbody").sortable({
                cursor: "move",
                responsive: true,
                placeholder: "sortable-placeholder",
                helper: function (e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function (index) {
                        // Set helper cell sizes to match the original sizes
                        $(this).width($originals.eq(index).width());
                    });
                    return $helper;
                }
            }).disableSelection();

            // Add event listener for opening and closing child rows
            // Add event listener for opening and closing child rows
            $('#seasons-table tbody').on('click', 'td', function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    var rowData = row.data();
                    if(rowData){
                        if (typeof rowData[7] !== 'undefined') {
                            row.child(formatChildTable(JSON.parse(rowData[7]))).show();
                            tr.addClass('shown');
                        }
                    }
                }
            });

            // Function to format the child table content
            function formatChildTable(data) {
                var childTableContent = '<table class="child-table table table-striped table-bordered" id="lessons-table">' +
                    '<thead>' +
                    '<tr>' +
                    '<th>ردیف</th>' +
                    '<th>عنوان درس</th>' +
                    '<th>مدت زمان</th>' +
                    '<th>جزوه</th>' +
                    '<th>ویدیو</th>' +
                    '<th>ویرایش</th>' +
                    '<th>حذف</th>' +
                    '</tr>' +
                    '</thead>' +
                    '<tbody>';

                // Loop through the child data and generate rows
                for (var i = 0; i < data.length; i++) {

                    let video = data[i].video;
                    if(video == null){
                        video = 'آپلود نشده';
                    }else{
                        video = 'آپلود شده';
                    }
                    video = '<span>' + video + '</span>';

                    let booklet = data[i].booklet;
                    if(booklet == null){
                        booklet = 'آپلود نشده';
                    }else{
                        booklet = 'آپلود شده';
                    }
                    booklet = '<span>' + booklet + '</span>';


                    let item = data[i];
                    let id = item.id;
                    let counter = i+1;
                    let url = `{{ env('APP_URL') }}/panel/season-lessons/${item.season_id}/lessons/${id}`;

                    childTableContent += '<tr>' +
                        '<td>' + counter + '</td>' +
                        '<td>' + data[i].title + '</td>' +
                        '<td>' + data[i].duration + '</td>' +
                        '<td>' + booklet + '</td>' +
                        '<td>' + video + '</td>' +
                        `<td>
                            <a href="${url}/edit" class="btn btn-warning btn-floating">
                                <i class="fas fa-pen-square text-white"></i>
                            </a>
                        </td>` +
                        `<td>
                            <button type="button" class="btn btn-danger btn-floating trashRow" data-url="${url}" data-id="${id}" >
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </td>`
                        '</tr>';
                }

                childTableContent += '</tbody>' +
                    '</table>';

                return childTableContent;
            }
        // });
    </script>
@endsection