@extends('painel.layout.menu')

@section('css')
    <style>
        .pendentes {
            border: 1px solid gray;
            border-radius: 10px;
            align-items: center;
        }

        .total {
            border-top: 1px solid #000;
        }

        .header-pedido {
            border-top: 10px solid darkblue
        }
    </style>
@endsection

@section('content')
    <div class="col-md-12 text-center">
        <h3>Painel de pedidos</h3>
    </div>
    <input type="hidden" id="tipo-selected" value="{{ $tipo }}">

    <span id="conteudo">
        @include('painel.layout.painelPedidos')
    </span>
@endsection

@section('scripts')
    <script>
        $(function(e) {
            setInterval(() => {
                var modalImprimir = document.getElementById('modal-imprimir-pedido')
                if (modalImprimir.classList.contains('show')) return;

                loadUpdate()
                $.ajax({
                    url: '{{ route('painel.update') }}',
                    type: 'POST',
                    data: {
                        'tipo': $('#tipo-selected').val()
                    },
                    success: function(response) {
                        loadUpdate()
                        if (response.html) {
                            $('#conteudo').html(response.html)
                        } else if (response.error) {
                            toastr.error(response.error)
                        }
                    }
                })
            }, 5000);
        })

        function cancelarPedido(el) {
            var id = el.dataset.pedido
            Swal.fire({
                title: 'Motivo do cancelamento',
                input: 'textarea',
                html: `<input type="hidden" id="idPedido" class="swal2-input" value="` + id + `">`,
                inputPlaceholder: '',
                inputAttributes: {
                    autocapitalize: 'off'
                },
                backdrop: true,
                showCancelButton: true,
                confirmButtonText: 'Cancelar Pedido',
                cancelButtonText: 'Fechar',
                showLoaderOnConfirm: true,
                preConfirm: (comentario) => {
                    var idPedido = document.getElementById('idPedido').value;

                    if (comentario != '') {
                        $.ajax({
                            url: "{{ route('painel.cancelarPedido') }}",
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                "id": idPedido,
                                "comentario": comentario
                            },
                            success: function(response) {
                                if (response.message) {
                                    Swal.fire({
                                        title: 'Cancelado!',
                                        text: response.message,
                                        icon: 'success'
                                    }).then((result) => {

                                    })
                                } else {
                                    Swal.fire({
                                        title: 'Erro!',
                                        text: response.error,
                                        icon: 'error'
                                    })
                                }
                            }
                        })
                    }
                    else{
                        toastr.error('Informe o motivo do cancelamento');
                    }
                },
                allowOutsideClick: () => !Swal.isLoading()
            })
        }

        function changeType(el) {
            clear()
            var select = document.getElementById(`div-${el.dataset.tipo}`)
            select.classList.remove('d-none')

            $('#tipo-selected').val(el.dataset.tipo)

            var btnClass = '';
            if (el.dataset.tipo == 'pendentes') {
                btnClass = 'btn btn-sm btn-warning'
            } else if (el.dataset.tipo == 'preparacao') {
                btnClass = 'btn btn-sm btn-secondary'
            } else if (el.dataset.tipo == 'entrega') {
                btnClass = 'btn btn-sm btn-info'
            }

            el.classList = btnClass;

        }

        function clear() {
            var divPendentes = document.getElementById('div-pendentes')
            var divPreparacao = document.getElementById('div-preparacao')
            var divEntrega = document.getElementById('div-entrega')

            var btnPendentes = document.getElementById('btn-pendentes')
            var btnPreparacao = document.getElementById('btn-preparacao')
            var btnEntrega = document.getElementById('btn-entrega')

            divPendentes.classList.add('d-none')
            divPreparacao.classList.add('d-none')
            divEntrega.classList.add('d-none')

            btnPendentes.classList = 'btn btn-sm btn-outline-warning'
            btnPreparacao.classList = 'btn btn-sm btn-outline-secondary'
            btnEntrega.classList = 'btn btn-sm btn-outline-info'

        }
    </script>
@endsection