@extends('layouts.app')

@section('content')

<h2>Edit Module ({{ $module->name }})</h2>
<div class="files-wrapper py-4">
    <form method="POST" id="publish-form" action="{{ route('module_update', $module->id) }}" enctype="multipart/form-data" novalidate="novalidate">
        @csrf

        <div class="row">
            <div class="col-md-9">
                <div class="row">
                    <div class="col">
                        @include('commons/input', [ 'title' => 'Name', 'type' => 'text', 'name' => 'name', 'value' => $module->name, 'required' => true, 'errors' => $errors, 'maxlength' => 32 ])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include('commons/textarea', [ 'title' => 'Description', 'name' => 'desc', 'value' => $module->description, 'required' => false, 'errors' => $errors ])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include('commons/textarea', [ 'title' => 'Georgia Standards of Excellence', 'name' => 'short', 'value' => $module->short, 'required' => false, 'errors' => $errors ])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include('commons/input', [ 'title' => 'Funding Partner', 'type' => 'text', 'name' => 'partner', 'value' => $module->partner, 'required' => false, 'errors' => $errors ])
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col">
                        @include('modules/subtopics')
                    </div>
                </div>
                {{--
                <div class="row mb-3">
                    <div class="col">
                        @include('modules/grades')
                    </div>
                </div>
                --}}
                {{--
                <div class="row mb-3">
                    <div class="col">
                        @include('modules/themes')
                    </div>
                </div>
                --}}
                <div class="row mb-3">
                    <div class="col">
                        @if (AuthHelper::is_admin())
                        @include('modules/formats')
                        @else
                        <fieldset>
                            <legend>{{ __('Formats') }}*</legend>
                            <div id="formats-items">
                                @foreach ($module->formats as $format)
                                <span class="tag-item" data-id="{{ $format->id }}" data-input="format">{{ $format->name }}</span>
                                @endforeach
                            </div>
                            <input type="hidden" name="formats" id="formats" value="{{ str_replace(' ','', $module->get_params('formats', 'id')) }}">
                        </fieldset>
                        @endif
                    </div>
                </div>

                @include('modules/background')

                <div class="row">
                    <div class="col">
                        <div id="progress-bar" class="pb-5"></div>
                    </div>
                </div>

                <div id="videos" class="row{{ (!AuthHelper::is_admin() && $module->videos->count()) === 0 ? ' d-none' : '' }}">
                    <div class="col">
                        <div class="row video-inputs">
                            @if ($module->videos->count() > 0)
                                                        @foreach ($module->videos as $video)
                            @include('modules/videos', ['id' => $x, 'video' => $video])
                                                        @endforeach
                            @else
                            @include('modules/videos', ['id' => 1])
                            @endif
                            <input type="hidden" name="videos-added" id="videos-added" @if ($module->videos()->count() == 0) value="1" @else value="0" @endif>
                        </div>
                        <div class="invalid-feedback" id="videos-added-warning"></div>
                        <button type="button" id="add-video" class="btn btn-secondary">{{ __('Add more videos') }}</button>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group position-relative">
                    <label class="d-block" for="icon">{{ __('Icon') }}</label>
                    <img id="icon-preview" style="max-width:100%" class="mb-2" src="{{ env('MEDIA_URL') . $module->icon }}" alt="">
                    <i class="ion-trash-b img-1 remove-image-input" data-target="icon" hidden></i>
                    <div class="custom-file" id="error-icon">
                        <label class="upload-label mt-1" for="icon">
                            Select <i class="fas fa-upload"></i>
                        </label>
                        <input type="file" class="form-control-file image-file-input image-loading mt-3" data-target="#icon-preview" id="icon" name="icon" accept="image/x-png,image/jpeg" data-max-size="2097152" hidden>
                        <div class="help-block d-block"><b>{{ __('Format:') }}</b> {{ __('png, jpg, jpeg') }}<br> <b>{{ __('Dimensions:') }}</b> 220x156</div>
                        @if ($errors->has('icon'))
                        <span class="invalid-feedback">
                            {{ $errors->first('icon') }}
                        </span>
                        @endif
                    </div>
                </div>
                <div class="form-group position-relative">
                    <label class="d-block" for="iconlarge">{{ __('Icon Large') }}</label>
                    <img id="iconlarge-preview" style="max-width:100%" class="mb-2" src="{{ env('MEDIA_URL') . $module->icon_large }}" alt="">
                    <div class="custom-file" id="error-iconlarge">
                        <label class="upload-label mt-1" for="iconlarge">
                            {{ __('Select') }} <i class="fas fa-upload"></i>
                        </label>
                        <input type="file" class="form-control-file image-file-input image-loading mt-3" data-target="#iconlarge-preview" id="iconlarge" name="iconlarge" accept="image/x-png,image/jpeg" data-max-size="2097152" hidden>
                        <div class="help-block d-block"><b>{{ __('Format:') }}</b> {{ __('png, jpg, jpeg') }}<br> <b>{{ __('Dimensions:') }}</b> 1024x725</div>
                        @if ($errors->has('iconlarge'))
                        <span class="invalid-feedback">
                            {{ $errors->first('iconlarge') }}
                        </span>
                        @endif
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col">
                        <div class="form-group mt-3">
                            <span class="switch switch-sm">
                                <input type="checkbox" class="switch featured-switch" id="featured" name="featured" {{ $module->featured ? ' checked="checked"' : '' }}>
                                <label for="featured">{{ __('Featured') }}</label>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row mb-5">
            <div class="col text-right">
                <button type="button" class="btn btn-action btn-publish">
                    {{ __('Update') }}
                </button>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-center" id="video-modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <video id="video-hls" width="960" height="540" class="video-js"></video>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //let moduleGrades = 'null';
    let moduleFormats = 'null';
    //let moduleThemes = 'null';
    let moduleSubtopics = 'null';
    let editModeNumVideos =