{{-- Botoes --}}
    <div class="row d-flex justify-content-center">
        <div class="col-md-4">
            <button style="width: 100%" id="btn-pendentes"
                class="btn btn-sm {{ $tipo == 'pendentes' ? 'btn-warning' : 'btn-outline-warning' }}"
                data-tipo="pendentes" onclick="changeType(this)">PENDENTES ({{ $pendentes->count() }})</button>
        </div>
        <div class="col-md-4">
            <button style="width: 100%" id="btn-preparacao"
                class="btn btn-sm {{ $tipo == 'preparacao' ? 'btn-secondary' : 'btn-outline-secondary' }}"
                data-tipo="preparacao" onclick="changeType(this)">EM PREPARAÇÃO ({{ $preparacao->count() }})</button>
        </div>
        <div class="col-md-4">
            <button style="width: 100%" id="btn-entrega"
                class="btn btn-sm {{ $tipo == 'entrega' ? 'btn-info' : 'btn-outline-info' }}" data-tipo="entrega"
                onclick="changeType(this)">SAIU PARA ENTREGA ({{ $entrega->count() }})</button>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-md-12">
            <span class="float-right">
                Última atualização {{ date('d/m/Y H:i') }}
                <i class="fas fa-check" id="update-check" style="color: green"></i>
                <div class="spinner-border spinner-border-sm d-none" id="update-loading" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </span>
        </div>
    </div>

    {{-- Pedidos Pendentes de aceitação --}}
    <div id="div-pendentes" class="row pendentes mt-2 mb-4 {{ $tipo == 'pendentes' ? '' : 'd-none' }}">
        @if ($pendentes->count() == 0)
            <div class="col-md-12 text-center">
                <label>Nenhum pedido pendente!</label>
            </div>
        @else
            <div class="table-responsive mt-2">
                <table class="table table-sm table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th>Número</th>
                            <th>Cliente</th>
                            <th>Data</th>
                            <th>Endereço</th>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pendentes as $pedido)
                            <tr>
                                <td>{{ $pedido->id }}</td>
                                <td>{{ $pedido->cliente()->name }}</td>
                                <td>{{ date('d/m/Y', strtotime($pedido->created_at)) }}</td>
                                <td>{{ $pedido->entrega ? $pedido->endereco : 'Retirada no balcão' }}</td>
                                <td>
                                    <button data-pedido="{{ $pedido->id }}"
                                        onclick="changeStatus(this, 2, 'EM PREPARAÇÃO')"
                                        class="btn btn-sm btn-secondary">EM PREPARAÇÃO&nbsp;<i
                                            class="fas fa-arrow-circle-right"></i></button>
                                    <button data-pedido="{{ $pedido->id }}" onclick="cancelarPedido(this)"
                                        class="btn btn-sm btn-danger">CANCELAR</button>
                                    <button data-pedido="{{ $pedido->id }}" onclick="printOrder(this)"
                                        class="btn btn-sm btn-secondary" title="Imprimir Pedido"><i
                                            class="fas fa-print"></i></button>
                                    <a href="{{ $pedido->getLinkWPP() }}" target="_blank"
                                        class="btn btn-sm btn-success"><i class="fab fa-whatsapp"></i></a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Pedidos em preparação --}}
    <div id="div-preparacao" class="row pendentes mt-4 mb-4 {{ $tipo == 'preparacao' ? '' : 'd-none' }}">
        @if ($preparacao->count() == 0)
            <div class="col-md-12 text-center">
                <label>Nenhum pedido em preparação!</label>
            </div>
        @else
            <div class="table-responsive mt-2">
                <table class="table table-sm table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th>Número</th>
                            <th>Cliente</th>
                            <th>Data</th>
                            <th>Endereço</th>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($preparacao as $pedido)
                            <tr>
                                <td>{{ $pedido->id }}</td>
                                <td>{{ $pedido->cliente()->name }}</td>
                                <td>{{ date('d/m/Y', strtotime($pedido->created_at)) }}</td>
                                <td>{{ $pedido->entrega ? $pedido->endereco : 'Retirada no balcão' }}</td>
                                <td>
                                    <button data-pedido="{{ $pedido->id }}"
                                        onclick="changeStatus(this, 3, 'SAIU PARA ENTREGA')"
                                        class="btn btn-sm btn-info">SAIU PARA ENTREGA&nbsp;<i
                                            class="fas fa-arrow-circle-right"></i></button>
                                    <button data-pedido="{{ $pedido->id }}" onclick="cancelarPedido(this)"
                                        class="btn btn-sm btn-danger">CANCELAR</button>
                                    <button data-pedido="{{ $pedido->id }}" onclick="printOrder(this)"
                                        class="btn btn-sm btn-secondary" title="Imprimir Pedido"><i
                                            class="fas fa-print"></i></button>
                                    <a href="{{ $pedido->getLinkWPP() }}" target="_blank"
                                        class="btn btn-sm btn-success"><i class="fab fa-whatsapp"></i></a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- Pedidos em entrega --}}
    <div id="div-entrega" class="row pendentes mt-4 mb-4 {{ $tipo == 'entrega' ? '' : 'd-none' }}">
        @if ($entrega->count() == 0)
            <div class="col-md-12 text-center">
                <label>Nenhum pedido saiu para entrega!</label>
            </div>
        @else
            <div class="table-responsive mt-2">
                <table class="table table-sm table-bordered table-striped text-center">
                    <thead>
                        <tr>
                            <th>Número</th>
                            <th>Cliente</th>
                            <th>Data</th>
                            <th>Endereço</th>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($entrega as $pedido)
                            <tr>
                                <td>{{ $pedido->id }}</td>
                                <td>{{ $pedido->cliente()->name }}</td>
                                <td>{{ date('d/m/Y', strtotime($pedido->created_at)) }}</td>
                                <td>{{ $pedido->entrega ? $pedido->endereco : 'Retirada no balcão' }}</td>
                                <td>
                                    <button data-pedido="{{ $pedido->id }}" onclick="changeStatus(this, 4, 'FINALIZADO')"
                                        class="btn btn-sm btn-success">FINALIZADO&nbsp;<i class="fas fa-check"></i></button>
                                    <button data-pedido="{{ $pedido->id }}" onclick="cancelarPedido(this)"
                                        class="btn btn-sm btn-danger">CANCELAR</button>
                                    <button data-pedido="{{ $pedido->id }}" onclick="printOrder(this)"
                                        class="btn btn-sm btn-secondary" title="Imprimir Pedido"><i
                                            class="fas fa-print"></i></button>
                                    <a href="{{ $pedido->getLinkWPP() }}" target="_blank"
                                        class="btn btn-sm btn-success"><i class="fab fa-whatsapp"></i></a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <!-- Modal Imprimir Pedido -->
    <div class="modal fade" id="modal-imprimir-pedido" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Pedido Nº <span id="numero-pedido"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="body-pedido">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btn-imprimir" data-id=""
                        onclick="print(this)">IMPRIMIR</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function print(el) {
            var url = '/painel/imprimir-pedido/' + el.dataset.id
            $('#modal-imprimir-pedido').modal('hide')
            window.open(url, '_blank')
        }

        function printOrder(el) {
            loading(true)
            $.ajax({
                url: '{{ route('painel.imprimirPedido') }}',
                type: 'POST',
                data: {
                    'id': el.dataset.pedido
                },
                success: function(response) {
                    loading(false)
                    if (response.html) {
                        document.getElementById('btn-imprimir').dataset.id = el.dataset.pedido;
                        $('#body-pedido').html(response.html)
                        $('#numero-pedido').text(el.dataset.pedido)
                        $('#modal-imprimir-pedido').modal('show')
                    } else if (response.error) {
                        toastr.error(response.error)
                    }
                }
            })



        }

        function loadUpdate() {
            var check = document.getElementById('update-check')
            var loading = document.getElementById('update-loading')

            check.classList.toggle("d-none");
            loading.classList.toggle("d-none");
        }

        function changeStatus(el, status, statusDesc) {
            Swal.fire({
                title: `Passar o pedido nº ${el.dataset.pedido} para "${statusDesc} ?"`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Confirmar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    loading(true)
                    $.ajax({
                        url: '{{ route('pedido.changeStatus') }}',
                        type: 'POST',
                        data: {
                            'pedido': el.dataset.pedido,
                            'status': status,
                            'tipo': $('#tipo-selected').val(),
                        },
                        success: function(response) {
                            console.log(response);
                            loading(false)
                            if (response.message) {
                                Swal.fire(
                                    'Sucesso!',
                                    response.message,
                                    'success'
                                ).then(() => {
                                    $('#conteudo').html(response.html);
                                    window.open(response.linkWPP, '_blank');
                                })
                            } else if (response.error) {
                                toastr.error(response.error)
                            }
                        }
                    })
                }
            })
        }
    </script>