@extends('layouts.app')

@section('content')

<h2>{{ __('Add Module') }}</h2>
<div class="files-wrapper py-4">
    <form method="POST" id="publish-form" action="{{ route('module_store') }}" 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' => old('name'), 'required' => true, 'errors' => $errors, 'maxlength' => 32 ])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include('commons/textarea', [ 'title' => 'Description', 'name' => 'desc', 'value' => old('desc'), 'required' => false, 'errors' => $errors ])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include('commons/textarea', [ 'title' => 'Georgia Standards of Excellence', 'name' => 'short', 'value' => old('short'), 'required' => false, 'errors' => $errors ])
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        @include('commons/input', [ 'title' => 'Funding Partner', 'type' => 'text', 'name' => 'partner', 'value' => old('partner'), 'required' => false, 'errors' => $errors ])
                    </div>
                </div>
                @if (AuthHelper::is_admin())
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="type" class="form-label">{{ __('Type') }}*</label>
                            <select class="form-control" id="type" name="type" required>
                                <option value="default">Default</option>
                                <option value="videos">Videos</option>
                                <option value="scenes">Scenes</option>
                            </select>
                            @if ($errors->has('type'))
                            <span class="invalid-feedback">{{ $errors->first('type') }}</span>
                            @else
                            <div class="invalid-feedback">{{ __('The type field is required.') }}</div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif
                <div class="row mb-3">
                    <div class="col">
                        @include('modules/subtopics')
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col">
                        @if (AuthHelper::is_admin())
                        @include('modules/formats')
                        @else
                        <fieldset>
                            <legend>{{ __('Formats') }}*</legend>
                            <input type="hidden" name="formats" id="formats" value="3,2" required>
                            <div id="formats-items">
                                <span class="tag-item" data-id="3" data-input="format">360</span>
                                <span class="tag-item" data-id="3" data-input="format">VR</span>
                            </div>
                        </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">
                    <div class="col">
                        <div class="row video-inputs">
                            @include('modules/videos', ['id' => 1])
                            <input type="hidden" name="videos-added" id="videos-added" value="1">
                        </div>
                        <div class="invalid-feedback" id="videos-added-warning"></div>
                        <button type="button" id="add-video" class="btn btn-secondary mt-3">{{ __('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="" alt="">
                    <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/png,image/jpeg" data-max-size="2097152" hidden required>
                        <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>
                        @else
                        <div class="invalid-feedback" id="icon-warning">
                            {{ __('The icon image is required.') }}
                        </div>
                        @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="" 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/png,image/jpeg" data-max-size="2097152" hidden required>
                        <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>
                        @else
                        <div class="invalid-feedback" id="iconlarge-warning">
                            {{ __('The icon large is required.') }}
                        </div>
                        @endif
                    </div>
                </div>
                <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">
                                <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-publish">
                    {{ __('Save') }}
                </button>
            </div>
        </div>
    </form>
</div>

@endsection