{{-- extend layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title', 'Referencias')
{{-- vendor styles --}}
@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/katex.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/monokai-sublime.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/quill.snow.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/quill/quill.bubble.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/dropify/css/dropify.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/dataTables.checkboxes.css') }}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-invoice.css') }}">
@endsection

{{-- page content --}}
@section('content')
    @include('pages.productos.modals.products-modal')
    <div class="section users-edit">
        <div class="row">
            <div class="col xl9 m8 s12">
                <div class="card">
                    <div class="card-content">
                        <ul class="tabs mb-2 row">
                            <li class="tab">
                                <a class="display-flex align-items-center" id="products-tab" href="#products" onclick="changedTab('product')" style="text-overflow: clip !important">
                                    <i class="material-icons mr-1">filter_none</i><span>Referencias</span>
                                </a>
                            </li>
                        </ul>
                        <div class="divider mb-0"></div>
                        <div class="row">
                            <div class="col s12" id="products">
                                <!-- users edit Info form start -->
                                <section class="invoice-list-wrapper section col s12">
                                        <div id="invoice-create-btn" class="s12" style="float: right" >
                                            <button onclick="showModalProducts(this)" class="btn waves-effect waves-light invoice-create border-round z-depth-4">
                                                <i class="material-icons" style="float: left">add</i>
                                                <span class="hide-on-small-only" style="float: left">Referencias</span>
                                            </button>
                                        </div>
                                    <div class="responsive-table">
                                        <table class="table invoice-data-table white border-radius-4 pt-1">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th></th>
                                                    <th>IMAGEN</th>
                                                    <th>NOMBRE</th>
                                                    <th>COLOR</th>
                                                    <th>DESCRIPCI&Oacute;N</th>
                                                    <th>ACCIONES</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        @isset($products)
                                            @forelse ($products as $product)
                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td><img src=" {{ $product->imageSignedUrl ?? 'https://via.placeholder.com/50' }}" alt="" class="circle z-depth-2 avatar" width="50px" height="50px"> </td>
                                                <td>{{ $product->name }}</td>
                                                <td><span class="bullet " style="background-color: {{ $product->color }}"></span></td>
                                                <td>{{ $product->description }}</td>
                                                <td>
                                                    <div class="invoice-action">
                                                        <button onclick="editProducts(this)" data-id="{{ $product->uuidKey }}" data-supplier="{{$supplier['uuidKey']}}" data-type="edit" class="invoice-action-edit tooltipped" data-tooltip="Editar" data-position="bottom" style="border: none; color: #937d7d; background-color: #fff;">
                                                            <i class="material-icons">edit</i>
                                                        </button>
                                                            <button onclick="deleteProducts(this,'{{ $product->name }}')" data-product="{{$product->uuidKey}}" data-supplier="{{$supplier['uuidKey']}}" class="eliminar_category invoice-action-clear tooltipped" data-tooltip="Eliminar" data-position="bottom" style="border: none; color: #937d7d; background-color: #fff;">
                                                                <i class="material-icons">clear</i>
                                                            </button>
                                                    </div>
                                                </td>
                                                <td></td>
                                            </tr>
                                            @empty

                                            @endforelse
                                        @endisset

                                            </tbody>
                                        </table>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
    <script src="{{ asset('vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/js/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('vendors/quill/katex.min.js') }}"></script>
    <script src="{{ asset('vendors/quill/highlight.min.js') }}"></script>
    <script src="{{ asset('vendors/quill/quill.min.js') }}"></script>
    <script src="{{ asset('vendors/dropify/js/dropify.min.js') }}"></script>
    <script src="{{ asset('vendors/color-picker-drawr-palette/src/jquery.drawrpalette.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
    <script src="{{ asset('js/scripts/form-file-uploads.js') }}"></script>
    <script src="{{ asset('js/scripts/app-products.js') }}"></script>
    <script>
        let routeProductInfo = '{{ route('web.productos.info', [':idSupplier']) }}';
        let routeSaveProduct = '{{ route('api.supplier.products.save',[':idSupplier']) }}';
        let routeGetProduct = '{{ route('web.supplier.product.find',[':idSupplier', ':productUuid']) }}';
        let routeUpdateProduct = '{{ route('api.supplier.products.update', [':idSupplier', ':productUuid']) }}';
        let routeProductsDelete = '{{route('SupplierProduct.destroyProduct', [':idSupplier', ':idProduct'])}}';
        let routeImageProductRemove = '{{ route('api.productos.image.remove', [':idSupplier', ':idProduct']) }}';

                $(function() {
                    $('.modal').modal();
                });

                function changedTab(name){
                    if( name === 'info' ){
                        //$('#information').attr('style','visibility:visible;');
                        $('#products').attr('style','visibility:hidden;');
                        $('#account').attr('style','visibility:hidden;');
                    } else if( name === 'account' ){
                        $('#account').attr('style','visibility:visible;');
                        $('#products').attr('style','visibility:hidden;');
                        //$('#information').attr('style','visibility:hidden;');

                        } else if( name === 'product' ){

                            $('#products').attr('style','visibility:visible;');
                            $('#account').attr('style','visibility:hidden;');
                            //$('#information').attr('style','visibility:hidden;');

                            }

                }

        function showPreview(objFileInput, imgType) {
            let url = "";
            let uuidKeyProduct = $('#uuidKey').val();
            let supplierUuidKey = $('#supplierUuidKey').val();

            if (objFileInput.files[0]) {
                var fileReader = new FileReader();
                fileReader.onload = function(e) {
                    $('#imglogo').attr('src', e.target.result);
                    $('#btn-rm-img-product').show();
                }
                fileReader.readAsDataURL(objFileInput.files[0]);

                let supplierId = objFileInput.id;
                if ( imgType === "logo"){
                     url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/suppliers/upload/image/${supplierId}`;
                } else if( imgType === "poster" ) {
                     url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/suppliers/upload/poster/${supplierId}`;
                }else if(imgType === "product"){
                    let supplierIdProver = objFileInput.id;
                    url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/products/${supplierUuidKey}/upload/${uuidKeyProduct}`;
                }

                let formData = new FormData();
                console.log(formData);
                console.log(url);
                console.log(supplierId);
                console.log(objFileInput.files[0]);
                formData.append('fileitem', objFileInput.files[0]);

                $.ajax({
                    url: url,
                    method: 'PUT',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ session()->get('token') }} ');

                    },
                }).done(function(data) {
                    console.log(data)
                    console.log(data.uuidKey)
                    // window.location.reload();
                }).fail(function(error) {
                    console.log(error);
                });
            }
        }

        // $('input[name="image-product"]').dropify({
        //     tpl: {
        //         clearButton:'<button type="button" class="dropify-clear">Eliminar</button>'
        //         },
        //     messages: {
        //         default: 'Subir una imagen',
        //         replace: 'Click para reemplazar la imagen',
        //         remove: 'Eliminar',
        //         error: 'Désolé, le fichier trop volumineux'
        //     }
        // });

    </script>
@endsection