{{-- 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' }}">
        <div class="col-md-12 text-center bg-warning rounded">
            <label class="mt-2">PENDENTES</label>
        </div>

        @if ($pendentes->count() == 0)
            <div class="col-md-12 text-center">
                <label>Nenhum pedido pendente!</label>
            </div>
        @endif

        @foreach ($pendentes as $pedido)
            <div class="col-md-12 col-12 text-center header-pedido">
                <label>
                    Pedido nº {{ $pedido->id }} <br> Cliente: {{ $pedido->cliente()->name }}
                </label> <br>
                <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>
                <a href="{{ $pedido->getLinkWPP() }}" target="_blank" class="btn btn-sm btn-success"><i
                        class="fab fa-whatsapp"></i></a>
                <button data-pedido="{{ $pedido->id }}" onclick="printOrder(this)" class="btn btn-sm btn-secondary"
                    title="Imprimir Pedido"><i class="fas fa-print"></i></button>
            </div>

            <div class="col-md-12 col-12">
                <ol start="1">
                    @foreach ($pedido->items() as $item)
                        <div class="col-md-12 col-12 mt-2">
                            <li>
                                <label class="categoria mb-0">{{ $item->categoria }}
                                    ({{ $item->borda }})
                                </label>
                                <label class="float-right valor">R$
                                    {{ number_format($item->valor, 2, ',', '.') }}</label>
                                <br>

                                <span>{{ $item->sabores }} ({{ $item->adicionais }})</span>
                            </li>
                        </div>
                    @endforeach

                    @foreach ($pedido->bebidas() as $bebida)
                        <div class="col-md-12 col-12 mt-2">
                            <li>
                                <label>{{ $bebida->descricao() }} (Qtd: {{ $bebida->qtd }})</label>
                                <label class="float-right valor">R$
                                    {{ number_format($bebida->valorTotal, 2, ',', '.') }}</label>
                            </li>
                        </div>
                    @endforeach
                </ol>

                <div class="col-md-12 col-12 total">
                    @if ($pedido->entrega)
                        <label>
                            Rua: {{ $pedido->cliente()->endereco()->rua }},
                            {{ $pedido->cliente()->endereco()->numero }}
                            <br>
                            Bairro: {{ $pedido->cliente()->endereco()->bairro()->descricao }} <br>
                            Comp.: {{ $pedido->cliente()->endereco()->complemento }}
                        </label>
                    @else
                        <label>
                            RETIRADA NO BALCÃO
                        </label>
                    @endif

                    <label class="float-right" style="text-align: end">
                        SubTotal: R$ {{ number_format($pedido->subTotal(), 2, ',', '.') }} <br>
                        Entrega: R$ {{ number_format($pedido->taxa, 2, ',', '.') }} <br>
                        Total: R$ {{ number_format($pedido->subTotal() + $pedido->taxa, 2, ',', '.') }}
                    </label>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Pedidos em preparação --}}
    <div id="div-preparacao" class="row pendentes mt-4 mb-4 {{ $tipo == 'preparacao' ? '' : 'd-none' }}">
        <div class="col-md-12 text-center bg-secondary rounded">
            <label class="mt-2">EM PREPARAÇÃO</label>
        </div>

        @if ($preparacao->count() == 0)
            <div class="col-md-12 text-center">
                <label>Nenhum pedido em preparação!</label>
            </div>
        @endif

        @foreach ($preparacao as $pedido)
            <div class="col-md-12 col-12 text-center header-pedido">
                <label>
                    Pedido nº {{ $pedido->id }} <br> Cliente: {{ $pedido->cliente()->name }}
                </label> <br>
                <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>
                <a href="{{ $pedido->getLinkWPP() }}" target="_blank" class="btn btn-sm btn-success"><i
                        class="fab fa-whatsapp"></i></a>
            </div>

            <div class="col-md-12 col-12">
                <ol start="1">
                    @foreach ($pedido->items() as $item)
                        <div class="col-md-12 col-12 mt-2">
                            <li>
                                <label class="categoria mb-0">{{ $item->categoria }}
                                    ({{ $item->borda }})
                                </label>
                                <label class="float-right valor">R$
                                    {{ number_format($item->valor, 2, ',', '.') }}</label>
                                <br>

                                <span>{{ $item->sabores }} ({{ $item->adicionais }})</span>
                            </li>
                        </div>
                    @endforeach

                    @foreach ($pedido->bebidas() as $bebida)
                        <div class="col-md-12 col-12 mt-2">
                            <li>
                                <label>{{ $bebida->descricao() }} (Qtd: {{ $bebida->qtd }})</label>
                                <label class="float-right valor">R$
                                    {{ number_format($bebida->valorTotal, 2, ',', '.') }}</label>
                            </li>
                        </div>
                    @endforeach
                </ol>

                <div class="col-md-12 col-12 total">
                    @if ($pedido->entrega)
                        <label>
                            Rua: {{ $pedido->cliente()->endereco()->rua }},
                            {{ $pedido->cliente()->endereco()->numero }}
                            <br>
                            Bairro: {{ $pedido->cliente()->endereco()->bairro()->descricao }} <br>
                            Comp.: {{ $pedido->cliente()->endereco()->complemento }}
                        </label>
                    @else
                        <label>
                            RETIRADA NO BALCÃO
                        </label>
                    @endif

                    <label class="float-right" style="text-align: end">
                        SubTotal: R$ {{ number_format($pedido->subTotal(), 2, ',', '.') }} <br>
                        Entrega: R$ {{ number_format($pedido->taxa, 2, ',', '.') }} <br>
                        Total: R$ {{ number_format($pedido->subTotal() + $pedido->taxa, 2, ',', '.') }}
                    </label>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Pedidos em entrega --}}
    <div id="div-entrega" class="row pendentes mt-4 mb-4 {{ $tipo == 'entrega' ? '' : 'd-none' }}">
        <div class="col-md-12 text-center bg-info rounded">
            <label class="mt-2">SAIU PARA ENTREGA</label>
        </div>

        @if ($entrega->count() == 0)
            <div class="col-md-12 text-center">
                <label>Nenhum pedido saiu para entrega!</label>
            </div>
        @endif

        @foreach ($entrega as $pedido)
            <div class="col-md-12 col-12 text-center header-pedido">
                <label>
                    Pedido nº {{ $pedido->id }} <br> Cliente: {{ $pedido->cliente()->name }}
                </label> <br>
                <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>
                <a href="{{ $pedido->getLinkWPP() }}" target="_blank" class="btn btn-sm btn-success"><i
                        class="fab fa-whatsapp"></i></a>
            </div>

            <div class="col-md-12 col-12">
                <ol start="1">
                    @foreach ($pedido->items() as $item)
                        <div class="col-md-12 col-12 mt-2">
                            <li>
                                <label class="categoria mb-0">{{ $item->categoria }}
                                    ({{ $item->borda }})
                                </label>
                                <label class="float-right valor">R$
                                    {{ number_format($item->valor, 2, ',', '.') }}</label>
                                <br>

                                <span>{{ $item->sabores }} ({{ $item->adicionais }})</span>
                            </li>
                        </div>
                    @endforeach

                    @foreach ($pedido->bebidas() as $bebida)
                        <div class="col-md-12 col-12 mt-2">
                            <li>
                                <label>{{ $bebida->descricao() }} (Qtd: {{ $bebida->qtd }})</label>
                                <label class="float-right valor">R$
                                    {{ number_format($bebida->valorTotal, 2, ',', '.') }}</label>
                            </li>
                        </div>
                    @endforeach
                </ol>

                <div class="col-md-12 col-12 total">
                    @if ($pedido->entrega)
                        <label>
                            Rua: {{ $pedido->cliente()->endereco()->rua }},
                            {{ $pedido->cliente()->endereco()->numero }}
                            <br>
                            Bairro: {{ $pedido->cliente()->endereco()->bairro()->descricao }} <br>
                            Comp.: {{ $pedido->cliente()->endereco()->complemento }}
                        </label>
                    @else
                        <label>
                            RETIRADA NO BALCÃO
                        </label>
                    @endif

                    <label class="float-right" style="text-align: end">
                        SubTotal: R$ {{ number_format($pedido->subTotal(), 2, ',', '.') }} <br>
                        Entrega: R$ {{ number_format($pedido->taxa, 2, ',', '.') }} <br>
                        Total: R$ {{ number_format($pedido->subTotal() + $pedido->taxa, 2, ',', '.') }}
                    </label>
                </div>
            </div>
        @endforeach
    </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>