@extends('painel.layout.menu')

@section('css')
    <style>
        .item {
            border: solid;
            border-width: thin;
            border-radius: 10px;
            padding: 10px;
            color: #000;
        }

        .valor {
            color: #000;
        }

        .ex {
            color: rgb(240, 138, 6);
        }

        .btn-carrinho {
            font-size: 18px;
        }
    </style>
@section('content')
    <div class="col-md-12 text-center">
        <h3>Novo Pedido</h3>
    </div>

    <div class="row justify-content-center d-flex">
        <div class="col-md-12 text-center">
            @foreach ($tamanhos as $tamanho)
                <button type="button" class="btn btn-sm btn-outline-info" data-categoria="{{ $tamanho->id }}"
                    onclick="loadCategoriaPizza(this)">+ Pizza {{ strtoupper($tamanho->nome) . ' - ' . $tamanho->subNome }}</button>
            @endforeach
            {{-- @foreach ($categorias as $categoria)
                <button type="button" class="btn btn-sm btn-outline-info" data-categoria="{{ $categoria->id }}"
                    onclick="loadCategoriaPizza(this)">+ Pizza {{ $categoria->titulo }}</button>
            @endforeach --}}

        </div>
        <div class="col-md-4 mt-2">
            <select name="" id="select-bebida" class="form-control" onchange="addBebida(this)">
                <option value="0">Adicionar a bebida</option>
                @foreach ($bebidasCadastro as $bebida)
                    <option style="color: #000 !important;" data-desc="{{ $bebida->descricao }}"
                        value="{{ $bebida->id }}">{{ $bebida->descricao }} - (R$
                        {{ number_format($bebida->valor, 2, ',', '.') }} un.)</option>
                @endforeach
            </select>
        </div>
    </div>



    <form action="" method="POST">
        @csrf


        {{-- DIV COM OS ITENS DO PEDIDO --}}
        @if (!$items && !$bebidas)
        @else
            @foreach ($items as $key => $item)
                <div class="row pb-2 justify-content-center mt-2">
                    <div class="col-md-9 col-10 item">
                        <label class="categoria">{{ strtoupper($item['categoria']['descricao']) . ' - ' .  $item['categoria']['name'] }}
                            ({{ $item['borda']['descricao'] }})
                        </label>
                        <label class="float-right valor">R$ {{ number_format($item['valor'], 2, ',', '.')  }}</label>
                        <br>

                        @if (isset($item['sabores']))
                            @foreach ($item['sabores'] as $keySabor => $sabor)
                                {{ $sabor['descricao'] }}
                                @if ($keySabor + 1 < count($item['sabores']))
                                    ,
                                @endif
                            @endforeach
                        @endif

                        @if (isset($item['adicionais']))
                            (
                            @foreach ($item['adicionais'] as $keyAdicional => $adicional)
                                {{ $adicional['descricao'] }}
                                @if ($keyAdicional + 1 < count($item['adicionais']))
                                    ,
                                @endif
                            @endforeach
                            )
                        @endif
                        <a class="float-right ex" href="{{ route('painel.deletarItemCarrinho', $key) }}">Excluir</a>
                    </div>
                </div>
            @endforeach

            @foreach ($bebidas as $key => $item)
                <div class="row pb-2 justify-content-center mt-2">
                    <div class="col-md-9 item">
                        <label class="categoria">{{ $item['descricao'] }}
                            (Qtd: {{ $item['qtd'] }})
                        </label>
                        <label class="float-right valor">R$
                            {{ number_format($item['qtd'] * $item['valor'], 2, ',', '.') }}</label>
                        <br>

                        <a class="float-right ex" href="{{ route('painel.deletarBebidaCarrinho', $key) }}">Excluir</a>
                    </div>
                </div>
            @endforeach



            <div class="row pb-2 justify-content-center" style="color: #000">
                <div class="col-md-9 text-right">
                    <label>Sub Total: <strong>R$ {{ number_format($total, 2, ',', '.') }}</strong></label> <br>
                    @if ($taxa > 0)
                        <label>Entrega: <strong>R$ {{ number_format($taxa, 2, ',', '.') }}</strong></label> <br>
                        <label>Total: <strong>R$ {{ number_format($valorFinal, 2, ',', '.') }}</strong></label>
                    @endif
                </div>
            </div>

            <div class="col-md-12 text-center">
                <button type="button" onclick="finalizarPedido()" class="btn btn-sm btn-primary">Finalizar Pedido</button>
                <a href="{{ route('painel.limparCarrinho') }}" button class="btn btn-sm btn-outline-secondary">Limpar
                    Pedido</a>
            </div>
        @endif
    </form>
@endsection

@section('modal')
    {{-- Modal finalizar pedido --}}
    <div class="modal fade" id="modal-finalizar" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Finalizar Pedido</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('painel.finalizarPedido') }}" method="POST">
                        @csrf
                        <div class="row" id="div-clientes">
                            <div class="col-md-12">
                                <label>Cliente</label>
                                <select name="cliente" id="" class="form-control" onchange="changeCliente(this)">
                                    <option></option>
                                    <option value="-1">CADASTRAR NOVO CLIENTE</option>
                                    @foreach ($clientes as $cliente)
                                        <option value="{{ $cliente->id }}">{{ $cliente->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- DIV PARA CADASTO DE NOVO CLIENTE --}}
                        <div class="d-none" id="div-novo-cliente">
                            <div class="row d-flex justify-content-center mt-4">
                                <div class="col-md-8 col-10">
                                    <input class="form-control" type="text" name="name" value="{{ old('name') }}"
                                        placeholder="Nome">
                                </div>
                            </div>

                            <div class="row d-flex justify-content-center mt-2">
                                <div class="col-md-4 col-10">
                                    <input class="form-control" type="email" name="email" value="{{ old('email') }}"
                                        placeholder="E-mail">
                                </div>

                                <div class="col-md-4 col-10">
                                    <input class="form-control" type="text" name="telefone"
                                        value="{{ old('telefone') }}" placeholder="Telefone/Celular">
                                </div>
                            </div>

                            <div class="row d-flex justify-content-center mt-2">
                                <div class="col-md-6 col-10">
                                    <input class="form-control" type="text" name="rua" value="{{ old('rua') }}"
                                        placeholder="Rua">
                                </div>

                                <div class="col-md-2 col-10">
                                    <input class="form-control" type="text" name="numero" value="{{ old('numero') }}"
                                        placeholder="Número">
                                </div>
                            </div>

                            <div class="row d-flex justify-content-center mt-2">
                                <div class="col-md-6 col-10">
                                    <select name="bairro" class="form-control">
                                        <option value="0">Selecione o bairro</option>
                                        @foreach ($bairros as $bairro)
                                            <option style="color: #000 !important;" value="{{ $bairro->id }}">
                                                {{ $bairro->descricao }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2 col-10">
                                    <input class="form-control" type="text" name="complemento"
                                        value="{{ old('complemento') }}" placeholder="Complemento">
                                </div>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-4">
                                <label>Entrega</label>
                                <select name="entrega" id="" class="form-control" required>
                                    <option></option>
                                    <option value="1">Entrega</option>
                                    <option value="0">Retirada no Balcão</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label>Forma de Pgto</label>
                                <select name="pagamento" id="" class="form-control" required>
                                    <option></option>
                                    @foreach ($pagamentos as $pagamento)
                                        <option>{{ $pagamento->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label>Troco</label>
                                <input type="text" name="troco" class="form-control">
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-sm btn-success float-right">Finalizar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Add Pizza -->
    <div class="modal fade" id="modal-item" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body" style="background: #000" id="body-modal">
                    {{-- @include('painel.cardapioPainel') --}}
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Qtd da bebida --}}
    <div class="modal fade" id="modal-add-bebida" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <input type="hidden" id="bebida-selected">
                    <div class="row mt-2">
                        <div class="col-md-12 text-center">
                            <label>Quantidade <span id="descricao"></span></label>
                            <select name="" id="qtd-selected" class="form-control"
                                style="border-color: #fac564 !important; color: #000 !important">
                                <option value="0" style="color: #000 !important;">Selecione a quantidade</option>
                                <option value="1" style="color: #000 !important;">1</option>
                                <option value="2" style="color: #000 !important;">2</option>
                                <option value="3" style="color: #000 !important;">3</option>
                                <option value="4" style="color: #000 !important;">4</option>
                                <option value="5" style="color: #000 !important;">5</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" style="color: #fff"
                        onclick="novaBebida()">Adicionar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var bebidasLista = {!! $bebidasCadastro !!};

        function finalizarPedido() {
            $('#modal-finalizar').modal('show')
        }

        function novaBebida() {
            var id = $('#bebida-selected').val()
            var qtd = parseInt($('#qtd-selected').val())



            bebidasLista.forEach(el => {
                el.qtd = 0;

                if (el.id == id) {
                    el.qtd = qtd;
                    var total = el.qtd * el.valor
                    total = total.toLocaleString('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                    })
                }
            })

            $.ajax({
                url: "{{ route('painel.addBebida') }}",
                type: 'POST',
                dataType: 'json',
                data: {
                    bebidas: bebidasLista
                },
                success: function(response) {
                    if (response.message) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Adicionado',
                            text: response.message
                        }).then(() => {
                            location.reload();
                        })
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erro',
                            text: response.error
                        }).then(() => {
                            location.reload();
                        })
                    }
                }
            })
        }

        function addBebida(el) {
            if (el.value == '0') return;

            var descricao = el.options[el.selectedIndex].text;
            $('#descricao').text(`(${descricao})`)
            $('#bebida-selected').val(el.value)
            $('#modal-add-bebida').modal('show')
        }

        function loadCategoriaPizza(el) {
            $('#body-modal').html('')
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{ route('painel.loadCategoria') }}',
                type: 'POST',
                dataType: 'json',
                data: {
                    "categoria": el.dataset.categoria
                },
                beforeSend: function() {
                    loading(true);
                },
                success: function(response) {
                    loading(false);
                    $('#body-modal').html(response.html)
                    $('#modal-item').modal('show')
                    // toastr.success('Ordem alterada com sucesso!')
                }
            })
        }

        function changeCliente(el) {
            if (el.value == '-1') {
                document.getElementById('div-clientes').classList.add('d-none');
                document.getElementById('div-novo-cliente').classList.remove('d-none');
            }
        }
    </script>
@endsection