@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('listProduct', ['id' => $product->shop->id]) }}" class="text-dark"><i class="fa fa-arrow-circle-left "></i> Productos</a>
            <hr>
        </div>
        <form method="post" action="{{ route('productShortUpdate', ['id' => $product->id]) }}">
            <div class="card">
                <div class="card-header">Miniaturas</div>
                <div class="card-body">
                    <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">
                            </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>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">Catalogo</div>
                <div class="card-body">
                    <a href="#" @click.prevent="getImages({{ $product->id }})"><i class="fa fa-refresh"></i> cargar</a>
                    <table width="100%">
                        <thead>
                        <tr>
                            <th>imagen</th>
                            <th>url</th>
                            <th>&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(image, keyImage) in productCatalog" :key="keyImage">
                            <td><img :src="image.url" alt="" height="50"></td>
                            <td width="75%">
                                <input :name="`image[${keyImage}][url]`" type="text" class="form-control" v-model="image.url">
                                <input :name="`image[${keyImage}][id]`" type="hidden" class="form-control" v-model="image.id">
                            </td>
                            <td>
                                <a href="#" class="btn btn-danger btn-sm float-right" @click.prevent="removeImage(image.id, keyImage)"><i class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <button @click="setImgLoad(2)" type="button" class="btn btn-primary btn-sm mt-2" data-toggle="modal" data-target="#findOrUploadImage">
                        Buscar/Subir Imagen
                    </button>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">PDF</div>
                <div class="card-body">
                    <div class="form-group">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" name="is_catalog" class="custom-control-input" id="is_catalog{{$product->id}}" {{ $product->is_catalog ? ' checked' : '' }}>
                            <label class="custom-control-label" for="is_catalog{{$product->id}}"></label>
                        </div>
                        <label for="custom_link">Link PDF</label>
                        <input name="custom_link" type="text" class="form-control" id="custom_link" value="{{ empty(old('custom_link'))?$product->custom_link:old('custom_link') }}" placeholder="Link personalizado para catalogo pdf">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">General</div>
                <div class="card-body">
                    @csrf
                    <input v-model="raw" type="hidden" name="raw">
                    <div class="form-group">
                        <label for="short_name">Nombre corto</label>
                        <input name="short_name" type="text" class="form-control" id="short_name" value="{{ empty(old('short_name'))?$product->short_name:old('short_name') }}" placeholder="nombre corto para el producto">
                    </div>
                    <div class="form-group">
                        <label for="name">Nombre</label>
                        <input name="name" type="text" class="form-control" id="name" value="{{ empty(old('name'))?$product->name:old('name') }}" placeholder="nombre del producto" required="">
                        <div class="invalid-feedback"> Debe ingresar el nombre del producto. </div>
                    </div>
                    <div class="form-group">
                        <label for="price">detalle corto</label>
                        <textarea name="short_detail" class="form-control" id="short_detail" maxlength="56" rows="2" required="">{{ empty(old('short_detail'))?$product->short_detail:old('short_detail') }}</textarea>
                        <div class="invalid-feedback"> Debe tener un corto detalle. </div>
                    </div>
                    <div class="form-group">
                        <label for="price">detalle largo</label>
                        <ckeditor :config="editorConfig" :editor="editor" v-model="long_detail"></ckeditor>
                        <input type="hidden" name="long_detail" id="long_detail" v-model="long_detail" value="">
                    </div>
                    <div class="form-group">
                        <label for="raw" class="col-form-label">Raw</label>
                        <div v-html="raw"></div>
                        <small>se ingresa contenido expresado en html</small>
                        <codemirror
                            ref="cmEditor"
                            :value="raw"
                            :options="cmOptions"
                            @ready="onCmReady"
                            @focus="onCmFocus"
                            @input="onCmCodeChange"
                        />
                    </div>
                    <div>
                        <a class="ml-2" href="#" @click.prevent="copySharedFbToRaw('{{ route('showProductDetail', ['id' => $product->id]) }}')"><i class="fa fa-facebook-square"></i> Facebook share</a>
                        <a class="ml-2" href="#" @click.prevent="copySharedTwToRaw('{{ route('showProductDetail', ['id' => $product->id]) }}')"><i class="fa fa-twitter-square"></i> Twitter share</a>
                        {{--<a class="ml-2" href="#" @click.prevent="copySharedInToRaw('{{ route('showProductDetail', ['id' => $product->id]) }}', '{{ $product->name }}', '{{ $product->short_detail }}')"><i class="fa fa-linkedin-square"></i> Linkedin share</a>
                        <a class="ml-2" href="#" @click.prevent="copySharedPiToRaw('{{ route('showProductDetail', ['id' => $product->id]) }}', '{{ $product->getImagePrincipal() }}', '{{ $product->short_detail }}')"><i class="fa fa-pinterest-square"></i> Pinterest share</a>--}}
                    </div>
                    <div class="form-group">
                        <label for="order">Orden</label>
                        <input name="order" type="text" class="form-control" id="order" value="