@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">
            @if($ProductHeader)
                <a href="{{ route('productShortEdit', ['id' => $ProductHeader->id]) }}" class="text-dark"><i class="fa fa-arrow-circle-left "></i> Producto padre: <small>{{ $ProductHeader->name }}</small></a>
            @else
                <a href="{{ route('listProduct', ['id' => $shopId]) }}" class="text-dark"><i class="fa fa-arrow-circle-left "></i> Productos</a>
            @endif
            <hr>
        </div>
        <form method="POST" action="{{ url('/item') }}">
            @csrf
            <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" 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>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">Catalogo</div>
                <div class="card-body">
                    {{--<a href="#" @click.prevent="getImages({{ $ProductHeader->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_new">
                            <label class="custom-control-label" for="is_catalog_new"></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'))?'':old('custom_link') }}" placeholder="Link personalizado para catalogo pdf">
                    </div>
                </div>
            </div>
            <div class="card my-4">
                <div class="card-header">General</div>
                <div class="card-body">
                    <h3>Formulario de producto</h3>
                    @if(!is_null($ProductHeader))
                        <small>{{ $ProductHeader->name }}</small>
                    @endif
                    <hr>

                    @if(!is_null($ProductHeader))
                        <input type="hidden" name="header_product_id" value="{{ $ProductHeader->id }}">
                    @endif
                    <input type="hidden" name="shop_id" value="{{ $shopId }}">
                    <input v-model="raw" type="hidden" name="raw">
                    <div class="form-group row">
                        <label for="sku" class="col-sm-2 col-form-label">SKU</label>
                        <div class="col-sm-5">
                            <input name="sku" type="text" placeholder="CODE-OR-ABBREVIATION" class="form-control @error('sku') is-invalid @enderror" id="sku" 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="short_name" class="col-sm-2 col-form-label">nombre corto</label>
                        <div class="col-sm-10">
                            <input name="short_name" type="text" class="form-control @error('short_name') is-invalid @enderror" id="short_name" value="{{ old('short_name') }}">

                            @error('short_name')
                            <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 normal</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="short_detail" class="col-sm-2 col-form-label">{{ __('short detail') }}</label>
                        <div class="col-sm-10">
                            <textarea placeholder="..." name="short_detail" class="form-control" id="short_detail" rows="2" maxlength="56">{{ old('short_detail') }}</textarea>
                        </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" v-model="long_detail"></ckeditor>
                            <input type="hidden" name="long_detail" id="long_detail" v-model="long_detail" value="{{ old('long_detail') }}">
                            {{--<textarea placeholder="..." name="long_detail" class="form-control" id="long_detail" rows="4">{{ old('long_detail') }}</textarea>--}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="raw" class="col-sm-2 col-form-label">{{ __('raw code') }}</label>
                        <div class="col-sm-10">
                            <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>
                    <div class="form-group row">
                        <label for="order" class="col-sm-2 col-form-label">Orden</label>
                        <div class="col-sm-5">
                            <input name="order" type="text" class="form-control @error('order') is-invalid @enderror" id="order" value="{{ old('order') }}">

                            @error('order')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <hr>
                    <h5>{{ __('general.Value and Quantity') }}</h5><br>
                    <div class="form-group row">
                        <label for="price" class="col-sm-2 col-form-label">{{ __('price') }}</label>
                        <div class="col-sm-5">
                            <input name="price" step=".01" type="number" class="form-control @error('price') is-invalid @enderror" id="price" value="{{ old('price') }}">

                            @error('price')
                            <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="discount_price" class="col-sm-2 col-form-label">{{ __('discount price') }}</label>
                        <div class="col-sm-5">
                            <input name="discount_price" step=".01" type="number" class="form-control" id="discount_price" value="{{ old('discount_price') }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="stock" class="col-sm-2 col-form-label">{{ __('stock') }}</label>
                        <div class="col-sm-5">
                            <input name="stock" type="number" class="form-control @error('stock') is-invalid @enderror" id="stock" value="{{ old('stock') }}">

                            @error('stock')
                            <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="buyOneClick" name="buy_one_click" {{ !is_null(old('buy_one_click')) ? ' checked' : '' }}>
                                <label class="custom-control-label" for="buyOneClick">{{ __('buy one click') }}</label>
                            </div>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="isDigital" name="is_digital" {{ !is_null(old('is_digital')) ? ' checked' : '' }}>
                                <label class="custom-control-label" for="isDigital">{{ __('is digital') }}</label>
                            </div>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="freeShipping" name="free_shipping" {{ !is_null(old('free_shipping')) ? ' checked' : '' }}>
                                <label class="custom-control-label" for="freeShipping">{{ __('free shipping') }}</label>
                            </div>
                        </div>
                    </div>
                    {{--<fieldset class="form-group">
                        <div class="row">
                            <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
                            <div class="col-sm-10">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
                                    <label class="form-check-label" for="gridRadios1">
                                        First radio
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                                    <label class="form-check-label" for="gridRadios2">
                                        Second radio
                                    </label>
                                </div>
                                <div class="form-check disabled">
                                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
                                    <label class="form-check-label" for="gridRadios3">
                                        Third disabled radio
                                    </label>
                                </div>
                            </div>
                        </div>
                    </fieldset>--}}

                    <hr>
                    <h5>{{ __('general.Develop when is digital') }}</h5><br>
                    <div class="form-group row">
                        <label for="product_contract_type" class="col-sm-2 col-form-label">{{ __('product contract type') }}</label>
                        <div class="col-sm-10">
                            <input name="product_contract_type" type="text" class="form-control" id="product_contract_type">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="product_contract_id" class="col-sm-2 col-form-label">{{ __('product contract id') }}</label>
                        <div class="col-sm-10">
                            <input name="product_contract_id" type="text" class="form-control" id="product_contract_id">
                        </div>
                    </div>
                    <hr>
                    <h5>{{ __('general.shipping') }}</h5><br>
                    <div class="form-group row">
                        <label for="shipping_id" class="col-sm-2 col-form-label">{{ __('select shipping') }}</label>
                        <div class="col-sm-9">
                            <select v-for="shippingId in shipping" name="shipping_id[]" class="form-control mb-1" id="shipping_id" required>
                                <option value="">{{ __('select') }}</option>
                                @foreach($Shipping as $ShippingData)
                                    <option value="{{ $ShippingData->id }}">{{ $ShippingData->name }} - $@convert($ShippingData->price)</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-1"><button type="button" @click="shipping.push(1)" class="btn btn-success btn-sm"><i class="fa fa-plus"></i></button></div>
                    </div>
                    <hr>
                    <div class="form-group row">

                        <div class="col-sm-2">{{ __('general.is active') }}</div>
                        <div class="col-sm-10">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="isActive" name="is_active" {{ !is_null(old('is_active')) ? ' checked' : '' }}>
                                <label class="custom-control-label" for="isActive">{{ __('general.visible for all') }}</label>
                            </div>
                        </div>
                    </div>
                    <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">{{ ucfirst(__('general.save')) }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection

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