@extends('layouts.app')

@section('content')
    <!-- Modal -->
    <div class="modal fade" id="findOrUploadImage" ref="findOrUploadImageRef" tabindex="-1" aria-labelledby="findOrUploadImageLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="findOrUploadImageLabel">Buscar/Subir Imagen</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="checkbox" v-model="wannaUpload"> Subir imagen
                    <button class="btn btn-primary btn-sm" type="button" @click="getAllImages">Recargar</button>
                    <hr>
                    <div v-show="wannaUpload">
                        <vue-dropzone ref="imageVueDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-success="uploadSuccess"/>
                    </div>
                    <div v-show="!wannaUpload" class="container-fluid">
                        <div class="row">
                            <div v-for="(image, key) in images" class="col-md-3 mb-3" @click="setImageNormal(image)">
                                <div class="card">
                                    <div style="height: 150px;">
                                        <img :src="image.link" class="img-fluid" :alt="image.name">
                                    </div>
                                    <div class="card-body">
                                        <br>
                                        ID: <b v-html="image.id"></b>
                                        <br>
                                        <b v-html="image.link"></b>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<table class="table">
                            <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>url</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(image, key) in images" :key="key">
                                <td v-html="image.name"></td>
                                <td v-html="image.url"></td>
                            </tr>
                            </tbody>
                        </table>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="mt-5">
            <a href="{{ route('showListShop') }}" class="text-dark"><i class="fa fa-arrow-circle-left "></i> Tiendas</a>
            <hr>
        </div>
        <div class="card my-4">
            <div class="card-body">
                <form method="POST" action="{{ url('/shop') }}">
                    @csrf
                    <input type="hidden" name="section_id" value="{{ $section->id }}">
                    <input v-model="raw" type="hidden" name="raw">
                    <fieldset>
                        <legend>Shop</legend>
                        <div class="form-group row">
                            <label for="sku" class="col-sm-2 col-form-label">{{ __('sku') }}</label>
                            <div class="col-sm-10">
                                <input name="sku" type="text" class="form-control @error('sku') is-invalid @enderror" id="name" value="{{ old('sku') }}" required>

                                @error('sku')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="name" class="col-sm-2 col-form-label">Nombre</label>
                            <div class="col-sm-10">
                                <input name="name" type="text" class="form-control @error('name') is-invalid @enderror" id="name" value="{{ old('name') }}" required>

                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="detail" class="col-sm-2 col-form-label">Detalle</label>
                            <div class="col-sm-10">
                                <textarea placeholder="..." name="detail" class="form-control" id="detail" rows="2" maxlength="56">{{ old('detail') }}</textarea>
                            </div>
                        </div>

                        <div class="form-group-row">
                            <table width="100%">
                                <thead>
                                <tr>
                                    <th>imagen</th>
                                    <th>url</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><img :src="avatar" alt="" height="50"></td>
                                    <td width="75%">
                                        <input name="avatar" type="text" class="form-control" v-model="avatar" required>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <button @click="setImgLoad(1)" type="button" class="btn btn-primary btn-sm mt-2" data-toggle="modal" data-target="#findOrUploadImage">
                                Buscar/Subir Imagen
                            </button>
                            {{--<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptionsShop" @vdropzone-success="uploadSuccess"/>--}}
                        </div>
                        {{--<input v-for="fileId in uploaderFileIds" type="hidden" name="images[]" :value="fileId">--}}
                    </fieldset>
                    <hr>
                    <fieldset>
                        <legend>Showcase</legend>
                        <div class="form-group row">
                            <label for="url_external" class="col-sm-2 col-form-label">URL Externo</label>
                            <div class="col-sm-10">
                                <textarea placeholder="url to external shop" name="url_external" class="form-control" id="url_external" rows="2">{{ old('url externa') }}</textarea>
                                <small>url que dirige a la tienda de forma externa</small>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="long_detail" class="col-sm-2 col-form-label">{{ __('long detail') }}</label>
                            <div class="col-sm-10">
                                <ckeditor :editor="editor" :config="editorConfig" v-model="long_detail"></ckeditor>
                                <input type="hidden" name="long_detail" id="long_detail" v-model="long_detail" value="{{ old('long_detail') }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="raw" class="col-sm-2 col-form-label">Raw</label>
                            <div class="col-sm-10">
                                <codemirror
                                    ref="cmEditor"
                                    :value="raw"
                                    :options="cmOptions"
                                    @ready="onCmReady"
                                    @focus="onCmFocus"
                                    @input="onCmCodeChange"
                                />
                                <small>se ingresa contenido expresado en html</small>
                            </div>
                        </div>
                    </fieldset>
                    <hr>
                    <fieldset>
                        <legend>Section</legend>
                        <div class="form-group row">
                            <label for="width" class="col-sm-2 col-form-label">{{ __('width') }}</label>
                            <div class="col-sm-5">
                                <input name="width" step="1" max="12" type="number" class="form-control @error('width') is-invalid @enderror" id="name" value="{{ old('width')?old('width'):'0' }}" required>

                                @error('width')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="offset" class="col-sm-2 col-form-label">{{ __('offset') }}</label>
                            <div class="col-sm-5">
                                <input name="offset" step="1" max="11" type="number" class="form-control @error('offset') is-invalid @enderror" id="name" value="{{ old('offset')?old('offset'):'0' }}" required>

                                @error('offset')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="padding" class="col-sm-2 col-form-label">{{ __('padding') }}</label>
                            <div class="col-sm-5">
                                <input name="padding" step="1" type="number" class="form-control @error('padding') is-invalid @enderror" id="padding" value="{{ old('padding')?old('padding'):'0' }}">

                                @error('padding')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="order" class="col-sm-2 col-form-label">{{ __('general.order') }}</label>
                            <div class="col-sm-5">
                                <input name="order" step="1" type="number" class="form-control @error('order') is-invalid @enderror" id="order" value="{{ old('order')?old('order'):'0' }}">

                                @error('order')
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-2">{{ __('options') }}</div>
                            <div class="col-sm-10">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="mini" name="mini" {{ !is_null(old('mini')) ? ' checked' : '' }}>
                                    <label class="custom-control-label" for="mini">{{ __('mini') }}</label>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <hr>
                    @if(count($errors) > 0)
                        @foreach($errors->all() as $error)
                            <div class="alert alert-danger"><center>{{ $error }}</center></div>
                        @endforeach
                    @endif
                    @if (session('success'))
                        <div class="alert alert-success">
                            <center>{{ session('success') }}</center>
                        </div>
                    @endif
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Guardar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.avatar = `{{ !empty(old('avatar')) ? old('avatar') : '' }}`;
        window.rawCode = `{!! !is_null(old('raw')) ? old('raw') : '' !!}`;
        window.longDetail = `{!! !is_null(old('long_detail')) ? old('long_detail') : '' !!}`;
    </script>
@endpush