{{-- 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')
    <style>
        .btnrmimg {
    display: contents;
    position: absolute;
    opacity: 0;
    z-index: 7;
    top: 10px;
    right: 10px;
    background: 0 0;
    border: 2px solid #FFF;
    text-transform: uppercase;
    font-size: 11px;
    padding: 4px 8px;
    font-weight: 700;
    color: #FFF;
    -webkit-transition: all .15s linear;
    transition: all .15s linear;
}
    </style>
    @include('pages.supplier.modals.supplier-user-modal')
    @include('pages.supplier.modals.supplier-product-modal')
    <div class="section users-edit">
        <div class="row">
            <div class="col xl9 m8 s12">
                <div class="card">
                    <div class="card-content" role="tabpanel" id="DetailsTab">
                        <ul class="tabs nav-tabs mb-2 row">
                            <li class="tab">
                                <a class="display-flex align-items-center nav-link active" style="text-overflow: clip !important" id="information-tab" role="tab" data-toggle="tab" href="#information">
                                    <i class="material-icons mr-2">error_outline</i><span>Información</span>
                                </a>
                            </li>
                            @if ($userDefault->userType === 1 || $userDefault->userType === 2)
                                <li class="tab">
                                    <a class="display-flex align-items-center " id="account-tab" href="#account" role="tab" data-toggle="tab" style="text-overflow: clip !important">
                                        <i class="material-icons mr-1">people_outline</i><span>Usuarios</span>
                                    </a>
                                </li>
                                <li class="tab">
                                    <a class="display-flex align-items-center" id="products-tab" href="#products" data-toggle="tab" role="tab" style="text-overflow: clip !important">
                                        <i class="material-icons mr-1">shopping_basket</i><span>Referencias</span>
                                    </a>
                                </li>
                            @endif
                        </ul>
                        <div class="divider mb-0"></div>
                        <div class="row tab-content">
                            @include('pages.supplier.tabs.information-tab')
                            
                            @if ($userDefault->userType === 1 || $userDefault->userType === 2)
                                @include('pages.supplier.tabs.account-tab')
                                @include('pages.supplier.tabs.products-tab')
                            @endif
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
            @if ($userDefault->userType === 1 || $userDefault->userType === 2)
            <div class="col xl3 m4 s12">
                <div class="card invoice-action-wrapper mb-3">
                    <div class="card-alert" style="overflow: hidden; align-items: center">
                        <div class="card-content white-text">
                            <a class="waves-effect waves-light btn-large" href="{{ route('supplier.index') }}" style="width: 100%">
                                <i class="material-icons dp48">arrow_back</i><span class=" ml-3 mb-3">Regresar</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="col xl3 m4 s12">
                <div class="card invoice-action-wrapper mb-10">
                    <div class="card-content" style="overflow: hidden; align-items: center">
                        <div class="card-alert card purple">
                            <div class="card-content white-text">
                                <p>Imagen 325x260</p>
                            </div>
                        </div>
                        <div class="col s12 m12 l12">
                        @if($userDefault->userType === 1 || $userDefault->userType === 2)
                            <input type="file"  class="dropify"  id="imgBrand" name="imgBrand" onChange="showPreviewBrand(this,'logo');" data-default-file="@isset($supplier['imageSignedUrl']){{ $supplier['imageSignedUrl'] }} @endisset"/>
                        @else
                        <input type="file"  class="dropify"  id="imgBrand" name="imgBrand" onChange="showPreviewBrand(this,'logo');" data-default-file="@isset($supplier['imageSignedUrl']){{ $supplier['imageSignedUrl'] }} @endisset" disabled/>
                        @endif
                        </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/dropify/js/dropify.min.js') }}"></script>
    <script src="{{ asset('vendors/color-picker-drawr-palette/src/jquery.drawrpalette.js') }}"></script>
    <script src="{{ asset('/vendors/ckeditor/ckeditor.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
    <script src="{{ asset('js/scripts/form-file-uploads.js') }}"></script>
    <script src="{{ asset('js/scripts/form-validation.js') }}"></script>
    <script src="{{ asset('js/scripts/app-supplier-products.js') }}"></script>
    <script src="{{ asset('js/scripts/app-supplier-users.js') }}"></script>
    <script src="{{ asset('js/manager/admin-brands.js') }}"></script>
    <script>
        let routeManagerProductsDelete = '{{route('SupplierProduct.destroyProduct', [':idSupplier', ':idProduct'])}}';
        let routeManagerUser = '{{ route('api.supplier.user.save', ':idSupplier') }}';
        let routeManagerInfo = '{{ route('SupplierProduct.info',':idSupplier') }}';
        let routeManagerUserDelete = '{{ route('api.supplier.user.destroy',[':idSupplier', ':idUser']) }}';
        let routeManagerGetUser = '{{ route('web.supplier.user.find', [':userUuid']) }}';
        let routeManagerUpdateUser = '{{ route('api.supplier.user.update', [':idSupplier']) }}';
        let routeManagerGetProduct = '{{ route('web.supplier.product.find',[':idSupplier', ':productUuid']) }}';
        let routeManagerSaveProduct = '{{ route('api.supplier.products.save',[':idSupplier']) }}';
        let routeManagerUpdateProduct = '{{ route('api.supplier.products.update', [':idSupplier', ':productUuid']) }}';
        let routeInformationBrandUpdate = '{{ route('api.supplier.brand.update', [':uuidKey']) }}';
        let routeUsersByUsername = '{{ route('web.users.find.byUserName', ':username') }}';
        let routeImageSupplierUpload = '{{ route('api.supplier.image.upload',[':idSupplier']) }}';
        let routeImageSupplierRemove = '{{ route('api.supplier.image.remove', ':idSupplier') }}';
        let routeValidateIdentification = '{{ route('web.users.identification.validate', [':type', ':identification']) }}'
        let token = '{{ session()->get('token') }}';
                $(function() {
                    $('.modal').modal();
                    $('#userForm').hide();
                });

                

                $('input[name="imgBrand"]').dropify({
                    tpl: {
                        preview:'<div class="dropify-preview " style="height: 200px; display: flex; align-items: center;"><span ><img id="imglogo-supplier" class="responsive-img"  src="{{ $supplier['imageSignedUrl'] }}"></span> </div>',
                        filename:'',
                        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'
                    }
                });

                
                $('.dropify-wrapper').css({
                                            'max-height': '200px',
                                            'height': 'auto!important',
                                        });
                $(".dropify-wrapper").addClass("touch-fallback");
                $('.dropify-clear').css({
                                            'top': 'auto',
                                            'bottom': '23px',
                                            'opacity': '1',
                                            'border-color': 'rgba(119,119,119,.7)',
                                            'color': '#f51313'
                                        });

                // $('.btnrmimg').click(function(){
                    
                //             SwalJirka.showWarningQuestionAlert({
                //                 title: "¿Desea eliminar la imagen?",
                //                 text: name,
                //                 cancelButtonText: "Cancelar",
                //                 confirmButtonText: "Si, eliminar!"
                //             }, function () {
                //                 removeImgBrand();
                //                 let event = new Event("EventRmImg", {bubbles: true}); 
                //                  document.dispatchEvent(event);

                //                // swal("Eliminado!", data.message, "success");

                //             });
                // });

                var drEvent = $('.dropify').dropify();
                var hideConfirmBox = false;

                drEvent.on('dropify.beforeClear', function(event, element){
                    if (hideConfirmBox == false) {
                        swal({   
                                title: "¿Desea eliminar la imagen?",
                                text: "Eliminar",
                                icon: "warning",
                                buttons: {
                                    cancel: 'Cancelar',
                                    confirm: {
                                        text:'Si',
                                    }
                                }  
                            }).then((isConfirm) => { 
                                if (isConfirm) {
                                    hideConfirmBox = true;
                                    removeImgBrand();
                                    $(this).next('button.dropify-clear').trigger('click');

                                } else {     
                                   
                                } 
                            });
                    }
                    return hideConfirmBox;
                   

                });

                drEvent.on('dropify.afterClear', function(event, element){
                    hideConfirmBox = false;
                });

                // document.addEventListener("EventRmImg", function(event) { 
                //     removeImgBrand();
                // })

    </script>
@endsection