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

{{-- page title --}}
@section('title', 'Productos')
{{-- 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/sweetalert/sweetalert.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.categories.modals.categories-modal')

    <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>Productos </span></h5>
                </div>
            </div>
        </div>
    </div>
    <section class="invoice-list-wrapper section col s12">
        <div class="invoice-create-btn">
            <button data-type="new" onclick="showModalCategories(this,1)" 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">Productos</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'>
                <form action="{{ route('categories.index') }}" method="GET" id="myForm">
                    <li><a href="#" onclick="submitFilter(1)">Activos</a></li>
                    <li><a href="#" onclick="submitFilter(0)">Inactivos</a></li>
                </form>
            </ul>

        </div>
        <div class="responsive-table">
            <table class="table invoice-data-table white border-radius-4 pt-1" id="categories-table">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>IMAGEN</th>
                        <th>NOMBRE</th>
                        <th>COLOR</th>
                        <th>RESUMEN</th>
                        <th>ACCIONES</th>
                        <th></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($categories as $category)
                        <tr>
                            <td></td>
                            <td></td>
                            <td><img src=" {{ $category->imageSignedUrl ?? 'https://via.placeholder.com/50' }}" alt="" class="circle z-depth-2 avatar" width="50px" height="50px"> </td>
                            <td>{{ $category->name }}</td>
                            <td><span class="bullet " style="background-color: {{ $category->color }}"></span></td>
                            <td>{{ $category->summary }}</td>
                            <td>
                                <div class="invoice-action">
                                    <button class="invoice-action-edit" data-id="{{ $category->uuidKey }}" data-type="edit" onclick="editCategory(this)" style="border: none;color: #937d7d; background-color: #fff;">
                                        <i class="material-icons">edit</i>
                                    </button>
                                    <button type="button" data-id="{{ $category->uuidKey }}" onclick="deleteCategory(this, '{{ $category->name }}')" class="invoice-action-clear" style="border: none; color: #937d7d; background-color: #fff;">
                                        <i class="material-icons">clear</i>
                                    </button>
                                </div>
                            </td>
                            <td></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/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('vendors/jquery-validation/jquery.validate.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/manager/admin-categories.js') }}"></script>
    <script src="{{ asset('js/scripts/app-categories.js') }}"></script>
    <script>
        let routeSaveCategories = '{{ route('api.categories.save') }}';
        let routeIndexCategories = '{{ route('categories.index') }}';
        let routeDeleteCategory = '{{ route('categories.destroy', ':categoryId') }}';
        let routeObtainCategory = '{{ route('web.categories.obtain', ['uuidKey' => ':categoryId']) }}';
    </script>
    <script src="{{ asset('js/scripts/form-validation.js') }}"></script>
    <script>
        function showPreview(objFileInput) {
            console.log(objFileInput)
            if (objFileInput.files[0]) {
                let fileReader = new FileReader();
                // let categoriaId = objFileInput.id
                // let url = `https://www.cotelco.org:9090/jpms-gateway/ms-outlet/api/v1/categories/upload/image/${categoriaId}`;
                // let formData = new FormData();

                fileReader.onload = function(e) {
                    $('#imglogo').attr('src', e.target.result);
                }
                fileReader.readAsDataURL(objFileInput.files[0]);
            }
        }

        // $('.dropify').dropify({
        //         messages: {
        //             default: 'Subir una imagen',
        //             replace: 'Click para reemplazar la imagen',
        //             remove: 'Eliminar',
        //             error: 'Désolé, le fichier trop volumineux'
        //         }
        //     });

        function submitFilter(frm) {
            var url = `{{ route('categories.index') }}`;
            if (url.indexOf('?') != -1)
                var addon = '&stateParam=' + frm;
            else
                var addon = '?stateParam=' + frm;

            window.location.assign(url + addon);
        }

        // $(document).ready(function() {
        //     // Basic
        //     $('.dropify').dropify();

        //     // Translated
        //     $('.dropify-fr').dropify({
        //         messages: {
        //             default: 'Glissez-déposez un fichier ici ou cliquez',
        //             replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
        //             remove: 'Supprimer',
        //             error: 'Désolé, le fichier trop volumineux'
        //         }
        //     });

        //     // Used events
        //     var drEvent = $('.dropify-event').dropify();

        //     drEvent.on('dropify.beforeClear', function(event, element) {
        //         return confirm("Do you really want to delete \"" + element.filename + "\" ?");
        //     });

        //     drEvent.on('dropify.afterClear', function(event, element) {
        //         alert('File deleted');
        //     });
        // });
    </script>
@endsection