@extends('layouts.app')

@section('content')

<h2>{{ __('Add topic') }}</h2>
<div class="files-wrapper py-4">
    <form method="POST" action="{{ route('topic_store') }}" enctype="multipart/form-data" novalidate="novalidate">
        @csrf

        <div class="row mb-3">
            <div class="col-md-6">
                <div class="row">
                    <div class="col">
                        @include('commons/input', [ 'title' => 'Name', 'type' => 'text', 'name' => 'name', 'value' => old('name'), 'required' => true, 'errors' => $errors ])
                    </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>
        </div>
        <div class="row mb-3">
            <div class="col-sm-6 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/x-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> 112x112</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>
            <div class="col-sm-6 col-md-3">
                <div class="form-group position-relative">
                    <label class="d-block" for="covervr">{{ __('Cover VR') }}*</label>
                    <img id="covervr-preview" style="max-width:100%" class="mb-2" src="" alt="">
                    <div class="custom-file" id="error-icon">
                        <label class="upload-label mt-1" for="covervr">
                            {{ __('Select') }} <i class="fas fa-upload"></i>
                        </label>
                        <input type="file" class="form-control-file image-file-input image-loading mt-3" data-target="#covervr-preview" id="covervr" name="covervr" accept="image/x-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> 315x185</div>
                        @if ($errors->has('covervr'))
                        <span class="invalid-feedback">
                            {{ $errors->first('covervr') }}
                        </span>
                        @else
                        <div class="invalid-feedback" id="covervr-warning">
                            {{ __('The icon 3d image is required.') }}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="form-group position-relative">
                    <label class="d-block" for="scover">{{ __('Image cover small') }}*</label>
                    <img id="scover-preview" style="max-width:100%" class="mb-2" src="" alt="">
                    <div class="custom-file" id="error-scover">
                        <label class="upload-label mt-1" for="scover">
                            {{ __('Select') }} <i class="fas fa-upload"></i>
                        </label>
                        <input type="file" class="form-control-file image-file-input image-loading mt-3" data-target="#scover-preview" id="scover" name="scover" accept="image/x-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> 220x256</div>
                        @if ($errors->has('scover'))
                        <span class="invalid-feedback">
                            {{ $errors->first('scover') }}
                        </span>
                        @else
                        <div class="invalid-feedback" id="scover-warning">
                            {{ __('The scover image is required.') }}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="form-group position-relative">
                    <label class="d-block" for="cover">{{ __('Image cover large') }}*</label>
                    <img id="cover-preview" style="max-width:100%" class="mb-2" src="" alt="">
                    <div class="custom-file" id="error-cover">
                        <label class="upload-label mt-1" for="cover">
                            {{ __('Select') }} <i class="fas fa-upload"></i>
                        </label>
                        <input type="file" class="form-control-file image-file-input image-loading mt-3" data-target="#cover-preview" id="cover" name="cover" accept="image/x-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> 1024x1191</div>
                        @if ($errors->has('cover'))
                        <span class="invalid-feedback">
                            {{ $errors->first('cover') }}
                        </span>
                        @else
                        <div class="invalid-feedback" id="cover-warning">
                            {{ __('The cover image is required.') }}
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group row mb-5">
            <div class="col">
                <p><strong><small>* required</small></strong></p>
                <button type="submit" class="btn btn-action">
                    {{ __('Save') }}
                </button>
            </div>
        </div>
    </form>
</div>

@endsection