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

{{-- page title --}}
@section('title', 'Marcas')
{{-- vendor styles --}}
@section('vendor-style')
    <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('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/dropify/css/dropify.min.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.supplier.modals.supplier-brand-modal")
    <div id="edit_supplier" class="modal"></div>
    <div id="load_progress" class="progress" style="display: none">
        <div class="indeterminate"></div>
    </div>
    <div class="breadcrumbs-dark pb-0 pt-0" id="breadcrumbs-wrapper">
        <!-- Search for small screen-->
        <div class="container">
            <div class="row">
                <div class="col s10 m6 l6">
                    <h5 class="breadcrumbs-title mt-0 mb-0"><span>Marcas </span></h5>

                </div>
            </div>
        </div>
    </div>
    <section class="invoice-list-wrapper section col s12">
        <div class="invoice-create-btn">
            <button id="btn-add-brand" name="btn-add-brand" onclick="showModalBrands(this)" data-type="new" class="btn waves-effect waves-light invoice-create border-round z-depth-4">
                <i class="material-icons">add</i>
                <span class="hide-on-small-only">Marca</span>
            </button>
        </div>
        <div class="filter-btn">
            <a class='dropdown-trigger btn waves-effect waves-light purple darken-1 border-round' href='#'
                data-target='btn-filter'>
                <span class="hide-on-small-only">Filtrar</span>
                <i class="material-icons">keyboard_arrow_down</i>
            </a>

            <ul id='btn-filter' class='dropdown-content'>
                <li><a href="#" onclick="submitFilterTable('{{ route('supplier.index') }}', 1)">Activos</a></li>
                <li><a href="#" onclick="submitFilterTable('{{ route('supplier.index') }}', 0)">Inactivos</a></li>
            </ul>

        </div>
        {{-- {{ $suppliers }} --}}
        <div class="responsive-table">
            <table id="table-brands" class="table invoice-data-table white border-radius-4 pt-1">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>NOMBRE</th>
                        <th>COLOR</th>
                        <th>CATEGORÍA</th>
                        <th>DESCRIPCI&Oacute;N</th>
                        <th>ACCIONES</th>
                    </tr>
                </thead>
                {{-- {{ $suppliers }} --}}
                {{-- {{ $categories }} --}}
                <tbody>
                    @forelse ($suppliers as $supplier)
                        <tr>
                            <td></td>
                            <td></td>
                            <td><img src="{{ $supplier->imageSignedUrl ? $supplier->imageSignedUrl : 'https://via.placeholder.com/50' }}" alt="" class="circle z-depth-2 avatar" width="50px" height="50px"> </td>
                            <td>{{ $supplier->name }}</td>
                            <td><span class="bullet " style="background-color: {{ $supplier->color }}"></span></td>
                            <td>
                                @foreach ($categories as $category)
                                    @if($supplier->categoryUuidKey === $category->uuidKey)
                                        {{ $category->name }}
                                    @endif
                                @endforeach
                            </td>
                            @isset($supplier->description)
                                <td class="text-justify">{{ substr($supplier->description, 0, 150) }}</td>
                            @endisset
                            @empty($supplier->description)
                                <td class="text-justify"></td>
                            @endempty
                            <td>
                                <div class="invoice-action">
                                    <a href="supplier/{{$supplier->uuidKey}}/info"
                                        class="invoice-action-edit modal-trigger tooltipped" data-tooltip="Referencias" data-position="bottom" data-id="{{ $supplier->uuidKey }}" style="padding-right: 10px">
                                        <i class="material-icons">shopping_basket</i>
                                    </a>
                                    <a style="cursor:pointer;" onclick="editBrand(this)" data-toggle="tooltip" class="invoice-action-edit tooltipped" data-tooltip="Editar" data-position="bottom" data-id="{{ $supplier->uuidKey }}" data-type="edit">
                                        <i class="material-icons">edit</i>
                                    </a>
                                    <a  class="invoice-action-clear tooltipped" data-id="{{ $supplier->uuidKey }}" onclick="deleteBrand(this,'{{ $supplier->name }}')" data-tooltip="Eliminar" data-position="bottom" style="border: none; color: #937d7d; background-color: #fff;cursor:pointer;">
                                        <i class="material-icons">clear</i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty

                    @endforelse

                </tbody>
            </table>
        </div>
    </section>
@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/jquery-validation/jquery.validate.js') }}"></script>
    <script src="{{ asset('vendors/dropify/js/dropify.min.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
    <script src="{{ asset('js/manager/index-admin-brands.js') }}"></script>
    <script>
        const routeBrandSave = "{{ route("api.supplier.brand.save") }}";
        const routeBrandDelete = "{{ route("api.supplier.brand.destroy",[":supplierUuidKey"]) }}";
        const routeBrandFind = "{{ route('web.supplier.brand.find',[":supplierUuidKey"]) }}";
        const routeBrandUpdate = "{{ route('api.supplier.brand.update', [':uuidKey']) }}";
    </script>
    <script src="{{ asset('js/scripts/form-validation.js') }}"></script>
    <script src="{{ asset('js/scripts/app-supplier.js') }}"></script>

    <script>
        $(function() {
            $('.modal').modal();
            $('#modal3').modal('open');
            $('#modal3').modal('close');
            $('.dropify').dropify({
                messages: {
                    default: 'Subir una imagen',
                    replace: 'Click para reemplazar la imagen',
                    remove: 'Eliminar',
                    error: 'Désolé, le fichier trop volumineux'
                }
            });
        });

        function showPreview(objFileInput) {
            console.log(objFileInput)
            if (objFileInput.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function(e) {
                    console.log(e);
                    $('#imgCat').attr('src', e.target.result);
                }
                fileReader.readAsDataURL(objFileInput.files[0]);

                let supplierId = objFileInput.id
                let url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/suppliers/upload/image/${supplierId}`;
                let formData = new FormData();

                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) {

                }).fail(function() {

                });
            }
        }
    </script>
@endsection