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

{{-- page title --}}
@section('title', 'Información')
{{-- 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') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-users-proveedor.css') }}">
    <style>
        .editor {
            height: 200px;
            flex: 1;
            overflow-y: auto;
            width: 100%;
        }
    </style>
@endsection

{{-- page styles --}}
@section('page-style')
@endsection

{{-- page content --}}
@section('content')
{{-- @dd($supplier) --}}
    <div class="section users-edit">
        <div class="row">
            <form action="" method="post"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="col xl9 m8 s12">
                    <div class="card">
                        <div class="card-content">
                            <!-- <div class="card-body"> -->
                            <ul class="tabs mb-2 row">
                                <li class="tab">
                                    <a class="display-flex align-items-center active" style="text-overflow: clip !important" id="information-tab"
                                        href="#information">
                                        <i class="material-icons mr-2">error_outline</i><span>Información</span>
                                    </a>
                                </li>
                                @if ($user->userType === 1 || $user->userType === 0)
                                    <li class="tab">
                                        <a class="display-flex align-items-center" id="account-tab" href="#account" style="text-overflow: clip !important">
                                            <i class="material-icons mr-1">person_outline</i><span>Administradores</span>
                                        </a>
                                    </li>
                                @endif
                            </ul>
                            <div class="divider mb-3"></div>
                            <input id="proveedorUuidKey" name="proveedorUuidKey" type="hidden" value={{ $supplier->uuidKey }}>
                            <div class="row">
                                <div class="col s12" id="information">
                                    <div class="col m12 s12">
                                        <h5 class="indigo-text">{{ $supplier->name }}</h5>
                                    </div>
                                    <div class="col m12 s12">
                                        <div class="input-field col s12 m12">
                                            <input id="name" type="text" placeholder="Nombre" name="name" @isset($supplier) value="{{ $supplier->name }}" @endisset disabled />
                                            <label for="name">Nombre <span style="color:red">*</span></label>
                                        </div>
                                    </div>

                                    <div class="col s12 m6 l6 xl6">
                                        <div class="col s6 m6 l6 xl6">
                                            <label for="color">Color <span style="color:red">*</span></label>
                                        </div>
                                        <div class="input-field col s12 m12 l12">
                                            <input id="color" type="color" placeholder="color" name="color"
                                                @isset($supplier) value="{{ $supplier->color }}" @endisset />
                                        </div>
                                    </div>
                                    <div class="col m6 s12">
                                        <div class="input-field col s12 m12 l12">
                                            <input id="mail" type="email" placeholder="Correo" name="mail" @isset($supplier)value="{{ $supplier->mail ?? '' }}" @endisset />
                                            <label for="mail">Correo <span style="color:red">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col m6 s12">
                                        <div class="input-field col s12 m12">
                                            <input id="phone" type="text" placeholder="Tel&eacute;fono" name="phone"
                                                @isset($supplier) value="{{ $supplier->phone ?? '' }}" @endisset />
                                            <label for="phone">Tel&eacute;fono <span style="color:red">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col s12 m6 l6 xl6">
                                        <div class="input-field col s12 m12">
                                            <input id="whatsApp" type="text" placeholder="whatsApp" name="whatsApp"
                                                @isset($supplier) value="{{$supplier->whatsApp ?? '' }}" @endisset />
                                            <label for="whatsApp">Celular <span style="color:red">*</span></label>
                                        </div>
                                    </div>
                                    <div class="col s12 m12 l12 xl12">
                                        <div class="col s6 m6 l6 xl6">
                                            <label for="brandSupplierinfo">Información <span style="color:red">*</span></label>
                                        </div>
                                        <div class="input-field col s12 m12">
                                            <textarea class="ckeditor" name="brandSupplierinfo" id="brandSupplierinfo" rows="10" cols="80">@isset($supplier) {{ $supplier->description ?? '' }} @endisset</textarea>
                                        </div>
                                    </div>
                                    <div class="col s12 m12 l12 xl12">
                                        <br>
                                        <div class="input-field col s12 m12 l12 ">
                                            <input id="proveedorUuidKeyName" type="text" name="proveedorUuidKeyName" value="{{ session()->get('defaultCampaing')->name ?? '' }}" disabled />
                                            <label for="proveedorUuidKeyName">Campa&ntilde;a <span style="color:red">*</span></label>
                                        </div>
                                    </div>
                                    <div class=" mt-5">
                                        <div class="card-content " style="display: flex; justify-content:space-around">
                                            <div class="invoice-action-btn mb-2">
                                                <button type="submit"
                                                    class="btn indigo waves-effect waves-light display-flex align-items-center justify-content-center"
                                                    style="width:100%">
                                                    <i class="material-icons mr-4">check</i>
                                                    <span class="responsive-text">Guardar</span>
                                                </button>
                                            </div>

                                            <div class="invoice-action-btn">
                                                <a href="{{ route('purchase.index') }}"
                                                    class="btn waves-effect waves-light display-flex align-items-center justify-content-center">
                                                    <i class="material-icons mr-3">clear</i>
                                                    <span class="responsive-text">Cancelar</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <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>Image 383x123</p>
                                </div>
                            </div>
                            <div class="col s12 m12 l12">
                                <input type="file"  class="dropify" name="logo"
                                    onChange="showPreview(this,'logo');"
                                    id="{{ $supplier->uuidKey }}"
                                    data-default-file="@isset($supplier->imageSignedUrl){{ $supplier->imageSignedUrl }} @endisset" disabled />
                                     <!-- <img class="responsive-img card-border z-depth-2 mt-2"  src="" alt=""> -->
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </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/dropify/js/dropify.min.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>
            $('input[name="logo"]').dropify({
                tpl: {
                    preview:'<div class="dropify-preview" style="@isset($supplier->imageSignedUrl) height: 200px;@endisset  display: flex; align-items: center;"><span> <img id="imgLogo" class="responsive-img" @isset($supplier->imageSignedUrl)  src="{{ $supplier->imageSignedUrl }} @endisset "></span></div>',
                    filename:''
                    },
                    messages: {
                        default: 'Subir una imagen',
                        replace: 'Click para reemplazar la imagen',
                        remove: 'Eliminar',
                        error: 'Désolé, le fichier trop volumineux'
                    }
                });


            function removeImg(proveedorId, imgType) {
                var url = "";
                if (proveedorId) {
                    var fileReader = new FileReader();
                    if ( imgType == "logo"){
                        url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/proveedors/delete/logo/${proveedorId}`;
                    } else if( imgType == "poster" ) {
                        url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/proveedors/delete/poster/${proveedorId}`;
                    }


                    $.ajax({
                        url: url,
                        method: 'DELETE',
                        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() {

                    });
                }
            }

            $('.dropify-clear').click(function(){
                var inputObject = $(this).closest('.dropify-wrapper').children('input');
                //inputObject.setAttribute('')
                removeImg(inputObject[0].id,inputObject[0].name);
                    console.log('id:',inputObject[0].id)
                    console.log('eliminar foto', $(this).closest('.dropify-wrapper').children('input').attr('name'));
                    console.log('file',inputObject[0].files)
            });


        function showPreview(objFileInput, imgType) {
            console.log(imgType)
            var url = "";
            let img64 = "";
            if (objFileInput.files[0]) {
                var fileReader = new FileReader();
                fileReader.onload = function(e) {
                    if ( imgType == "logo"){
                        $('#imgLogo').closest('.dropify-preview').attr('style','height: 200px; display: flex; align-items: center;');
                        $('#imgLogo').attr('src', e.target.result);
                    }
                    else{
                        $('#imgPoster').closest('.dropify-preview').attr('style','height: 200px; display: flex; align-items: center;');
                        $('#imgPoster').attr('src', e.target.result);
                    }

                }
                fileReader.readAsDataURL(objFileInput.files[0]);

                let proveedorId = objFileInput.id;
                if ( imgType == "logo"){
                     url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/proveedors/upload/logo/${proveedorId}`;

                } else if( imgType == "poster" ) {
                     url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/proveedors/upload/poster/${proveedorId}`;
                }

                var formData = new FormData();
                console.log(formData);
                console.log(url);
                console.log(proveedorId);
                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() {

                });
            }
        }

        if ($(".invoice-data-table").length) {
            var dataListView = $(".invoice-data-table").DataTable({
                "oLanguage": {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sZeroRecords": "No se encontraron resultados",
                    "sEmptyTable": "Ningún dato disponible en esta tabla",
                    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "sSearch": "Buscar:",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst": "<|",
                        "sLast": "|>",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Ordenar ascendentement",
                        "sSortDescending": ": Ordenar descendentemente"
                    },
                    "buttons": {
                        "copy": "Copiar",
                        "colvis": "Visibilidad"
                    }
                },
                columnDefs: [{
                        targets: 0,
                        className: "control"
                    },
                    {
                        targets: [0, 1, 6],
                        orderable: false
                    },
                ],
                order: [2, 'asc'],
                dom: '<"top display-flex  mb-2"<"action-filters"f><"actions action-btns display-flex align-items-center">><"clear">rt<"bottom"p>',
                language: {
                    search: "",
                    searchPlaceholder: "Buscar"
                },
                select: {
                    style: "multi",
                    selector: "td:first-child>",
                    items: "row"
                },
                responsive: {
                    details: {
                        type: "column",
                        target: 0
                    }
                }
            });
            // To append actions dropdown inside action-btn div
            var invoiceFilterAction = $(".invoice-filter-action");
            var invoiceCreateBtn = $(".invoice-create-btn");
            var filterButton = $(".filter-btn");
            $(".action-btns").append(invoiceFilterAction, invoiceCreateBtn);
            $(".dataTables_filter label").append(filterButton);
        }
    </script>
@endsection