{{-- 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')
    <!-- Modal Trigger -->
    <div id="add_categories" class="modal">
        @include('pages.products._form')
    </div>
    <div id="edit_categories" 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>Referencias </span></h5>
                    {{-- {{ $categories }} --}}
                </div>
                <select style="border-bottom:none !important">
                        <option value="{{$cam->uuidKey}}">colchones</option>
                </select>
            </div>
        </div>
    </div>
    {{-- {{ $categories }} --}}
    <section class="invoice-list-wrapper section col s12">

        <div class="invoice-create-btn">
            <a href="#add_categories"
                class="btn waves-effect waves-light invoice-create border-round z-depth-4 modal-trigger">
                <i class="material-icons">add</i>
                <span class="hide-on-small-only">Productos</span>
            </a>
        </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">
                <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)

                        <div id="edit_bussines_{{ $category->uuidKey }}" class="modal">
                            @include('pages.categories._form')
                        </div>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><img src=" {{ $category->imageSignedUrl ? $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">
                                    <a href="#edit_bussines_{{ $category->uuidKey }}"
                                        class="invoice-action-edit modal-trigger" data-id="{{ $category->uuidKey }}">
                                        <i class="material-icons">edit</i>
                                    </a>
                                    <form action="{{ route('categories.destroy', $category->uuidKey) }}" style="
                                        display: inline-block" class="eliminar-category" method="post">
                                        @method('DELETE')
                                        @csrf
                                        <button type="submit" class="eliminar_category invoice-action-clear modal-trigger" style="border: none; color: #937d7d; background-color: #fff;">
                                            <i class="material-icons">clear</i>
                                        </button>
                                    </form>

                                </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>
    <script src="{{ asset('js/custom/custom-script.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $('.eliminar-category').submit(function(e){
            e.preventDefault();
            const progress = document.getElementById('load_progress');
            progress.style.display = 'block';
            Swal.fire({
                title: "Eliminar?",
                text: "Desea usted eliminar esta categoria!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, eliminar!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: 'La categoría fue eliminada correctamente',
                        showConfirmButton: false,
                        timer: 1500
                    })
                    this.submit();
                } else {
                    progress.style.display = 'none';
                }
            })
        })
    </script>

    <script src="{{ asset('js/scripts/form-validation.js') }}"></script>
    <script src="{{ asset('js/scripts/app-categories.js') }}"></script>
    <script>
        $(function() {
            $('.modal').modal();
            $('#modal3').modal('open');
            $('#modal3').modal('close');

        });
        const buttons = document.querySelectorAll(".invoice-action-edit");

        const addButton = document.getElementById("addButton");
        const progress = document.getElementById('load_progress');

        addButton.addEventListener('click', function(event) {
            addButton.classList.add("disabled")


            progress.style.display = 'block';
            setTimeout(() => {
                progress.style.display = 'none';
                addButton.classList.remove("disabled");
            }, 1000);
        })
        // const editButton = document.querySelectorAll(".editButton");
        // for (const btn_add of editButton) {
        //     btn_add.addEventListener('click', function(event) {
        //         btn_add.classList.add("disabled")
        //         $('.modal').modal('close');
        //         progress.style.display = 'block';
        //         setTimeout(() => {
        //             progress.style.display = 'none';
        //             btn_add.classList.remove("disabled");
        //         }, 1000);
        //     })
        // }




        for (const button of buttons) {
            button.addEventListener('click', function(event) {
                const progress = document.getElementById('load_progress');
                progress.style.display = 'block';
                setInterval(() => {
                    progress.style.display = 'none';
                }, 100);

                let bussine_id = this.getAttribute('data-id');
                const routeedit = `{{ route('categories.edit', ['category' => ':id']) }}`;
                // url = routeedit.replace(':id', bussine_id);
                // fetch(url)
                //     .then(response => {
                //         return response.text();
                //     })
                //     .then(response => {
                //         const edit_bussines = document.getElementById('edit_bussines');

                //         $(document).ready(function() {
                //             M.updateTextFields();
                //             $('select').formSelect();
                //         });
                //         edit_bussines.innerHTML = response
                //         $('#edit_bussines').modal('open');
                //         progress.style.display = 'none';
                //     })
                //     .catch(error => console.log(error));
            })
        }
        /* const buttons_delete = document.querySelectorAll(".invoice-action-view");
        for (const button_delete of buttons_delete) {
            button_delete.addEventListener('click', function(event) {
                const progress = document.getElementById('load_progress');
                progress.style.display = 'block';

                let bussine_id = this.getAttribute('data-id');
                swal({
                    title: "Eliminar?",
                    text: "Desea usted eliminar esta categoria!",
                    icon: 'warning',
                    dangerMode: true,
                    buttons: {
                        cancel: 'No!',
                        delete: 'Si, eliminar!'
                    }
                }).then(function(willDelete) {
                    if (willDelete) {
                        const routeedit = `{{ route('categories.destroy', ['category' => ':id']) }}`;
                        url = routeedit.replace(':id', bussine_id);
                        const fetchOptions = {
                            method: "delete",
                            body: JSON.stringify({
                                id: bussine_id,
                                _method: 'DELETE',
                            }),
                        };
                        fetch(url, fetchOptions)
                            .then(response => {
                                return response.text();
                            })
                            .then(response => {
                                progress.style.display = 'none';
                                setTimeout(() => {
                                    window.location.reload()
                                }, 1000);
                            })
                            .catch(error => console.log(error));
                    } else {
                        progress.style.display = 'none';
                        swal("A cancelado el proceso", {
                            title: 'Proceso cancelado',
                            icon: "error",
                        });
                    }
                });
            })
        } */

        const buttons_delete = document.querySelectorAll(".invoice-action-view");
        for (const button_delete of buttons_delete) {
            button_delete.addEventListener('click', function(event) {
                event.preventDefault();
                const progress = document.getElementById('load_progress');
                progress.style.display = 'block';

                let category_id = this.getAttribute('data-id');
                swal({
                    title: "Eliminar?",
                    text: "Desea usted eliminar esta categoría!",
                    icon: 'warning',
                    dangerMode: true,
                    buttons: {
                        cancel: 'No!',
                        delete: 'Si, eliminar!'
                    }
                }).then(function(willDelete) {
                    if (willDelete) {
                        const routeedit = `{{ route('categories.destroy', ['category' => ':id']) }}`;
                        url = routeedit.replace(':id', category_id);
                        const fetchOptions = {
                            method: "delete",
                            body: JSON.stringify({
                                id: category_id,
                                _method: 'DELETE',
                            }),
                        };
                        fetch(url, fetchOptions)
                            .then(response => {
                                return response.text();
                            })
                            .then(response => {
                                progress.style.display = 'none';
                                setTimeout(() => {
                                    window.location.reload()
                                }, 1000);
                            })
                            .catch(error => console.log(error));


                    } else {
                        progress.style.display = 'none';
                        swal("A cancelado el proceso", {
                            title: 'Proceso cancelado',
                            icon: "error",
                        });
                    }
                });
            })
        }

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

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

                console.log(url);
                console.log(categoriaId);
                console.log(objFileInput.files[0]);

                formData.append('fileItem', objFileInput.files[0]);
                let routeUPLOAD = $("#media").data("url");
                $.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)
                    // window.location.reload();
                }).fail(function() {

                });
            }
        }

        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);
        }


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

        //         var formData = new FormData();
        //         formData.append('fileItem', objFileInput.files[0]);
        //         let routeUPLOAD = $("#media").attr("data-url");
        //         $.ajax({
        //             url: routeUPLOAD,
        //             method: 'PUT',
        //             data: formData,
        //             processData: false,
        //             contentType: false,
        //             beforeSend: function(xhr) {
        //                 xhr.setRequestHeader('Authorization', 'Bearer {{ session()->get('token') }} ');

        //             },
        //         }).done(function(data) {
        //             window.location.reload();
        //         }).fail(function() {

        //         });
        //     }
        // }
        $(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