@extends('cliente.layout.menu')

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

        .valor {
            color: white;
        }

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

        .btn-carrinho {
            font-size: 18px;
        }
    </style>
@endsection

@section('content')
    @if ($items || $bebidas)
        <div class="col-md-12 text-center mt-4">
            <h3>Carrinho</h3>
        </div>
    @endif

    <div class="container-fluid">
        @if (!$items && !$bebidas)
            <div class="col-md-12 text-center mt-2">
                <h3>Carrinho Vazio!</h3>
            </div>
        @else
            @foreach ($items as $key => $item)
                <div class="row pb-2 justify-content-center">
                    <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('deletarItemCarrinho', $key) }}">Excluir</a>
                    </div>
                </div>
            @endforeach

            @foreach ($bebidas as $key => $item)
                <div class="row pb-2 justify-content-center">
                    <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('deletarBebidaCarrinho', $key) }}">Excluir</a>
                    </div>
                </div>
            @endforeach



            <div class="row pb-2 justify-content-center" style="color: white">
                <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>
        @endif
        <div class="row pb-2 justify-content-center">
            <div class="col-md-9 text-center">
                <a href="{{ route('cardapio') }}" class="btn btn-sm btn-info btn-carrinho">+ Itens</a>
                @if ($items || $bebidas)
                    {{-- <a href="{{ route('cliente.finalizarPedido') }}" class="btn btn-sm btn-success">Finalizar Pedido</a> --}}
                    <a href="javascript:void(0)" data-aberto="{{ $aberto }}" onclick="finalizarPedido(this)"
                        class="btn btn-sm btn-success btn-carrinho">Finalizar
                        Pedido</a>
                @endif
                {{-- <a href="{{ route('limparCarrinho') }}" class="btn btn-sm btn-outline-secondary">Esvaziar Carrinho</a> --}}
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="modal-pedido-balcao" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('cliente.finalizarBalcao') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row mt-2">
                            <div class="col-md-12 text-center">
                                <input style="border-color: #fac564 !important; color: #000 !important" name="nome"
                                    type="text" class="form-control" placeholder="Nome" required>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12 text-center">
                                <input style="border-color: #fac564 !important; color: #000 !important" name="telefone"
                                    type="text" class="form-control" placeholder="Telefone" required>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12 text-center">
                                <input style="color: #000 !important" type="text" class="form-control text-center"
                                    placeholder="Forma de Pagamento" disabled>
                                <select onchange="toogleTroco(this)"
                                    style="border-color: #fac564 !important; color: #000 !important" name="pagamento"
                                    id="pagamento" class="form-control" required>
                                    <option></option>
                                    @foreach ($pagamentos as $pagamento)
                                        <option>{{ $pagamento->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mt-2 d-none" id="div-troco">
                            <div class="col-md-12 text-center">
                                <input style="border-color: #fac564 !important; color: #000 !important" name="troco"
                                    type="text" class="form-control money troco" placeholder="Informe o valor do troco">
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12">
                                <textarea name="obs" style="border-color: #fac564 !important; color: #000 !important; resize: none"
                                    class="form-control" rows="4" placeholder="Observação"></textarea>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Finalizar Pedido</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-pedido" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('cliente.finalizarPedido') }}" method="POST">
                    @csrf
                    <div class="modal-body">

                        @if (Auth::user())
                            <div class="col-md-12 text-center pt-2 pb-2" style="background: #000; border-radius: 10px;"
                                id="endereco-atual">
                                <label>Endereço de entrega</label> <br>
                                <label>{{ Auth::user()->endereco()->rua }}, </label>
                                <label>{{ Auth::user()->endereco()->numero }} - </label>
                                <label>{{ Auth::user()->endereco()->bairro()->descricao }} </label>
                                <label>{{ Auth::user()->endereco()->complemento }} </label> <br>
                                <button type="button" onclick="novoEndereco()" class="btn btn-sm btn-outline-info">Alterar
                                    Endereço</button>
                            </div>

                            <hr>
                        @endif

                        <div class="row d-none" id="novo-endereco">
                            <input type="hidden" name="updateEndereco" id="updateEndereco" value="0">

                            <div class="col-md-12 text-center">
                                <input id="rua" style="border-color: #fac564 !important; color: #000 !important"
                                    name="rua" type="text" class="form-control" placeholder="Rua"
                                    value="{{ $cliente ? $cliente->endereco()->rua : '' }}">
                            </div>

                            <div class="col-md-4 text-center">
                                <input id="numero" style="border-color: #fac564 !important; color: #000 !important"
                                    name="numero" type="number" class="form-control" placeholder="Número"
                                    value="{{ $cliente ? $cliente->endereco()->numero : '' }}">
                            </div>

                            <div class="col-md-8 text-center">
                                <input style="border-color: #fac564 !important; color: #000 !important" name="complemento"
                                    type="text" class="form-control" placeholder="Complemento"
                                    value="{{ $cliente ? $cliente->endereco()->complemento : '' }}">
                            </div>

                            <div class="col-md-12 text-center">
                                <select style="border-color: #fac564 !important; color: #000 !important" name="bairro"
                                    class="form-control" required>
                                    <option>Selecione o Bairro</option>
                                    @foreach ($bairros as $bairro)
                                        <option value="{{ $bairro->id }}"
                                            {{ $enderecoAtual == $bairro->id ? 'selected' : '' }}>{{ $bairro->descricao }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12 text-center">
                                <input style="color: #000 !important" type="text" class="form-control text-center"
                                    placeholder="Forma de Pagamento" disabled>
                                <select onchange="toogleTrocoPedido(this)"
                                    style="border-color: #fac564 !important; color: #000 !important" name="pagamento"
                                    id="pagamento" class="form-control" required>
                                    <option></option>
                                    @foreach ($pagamentos as $pagamento)
                                        <option>{{ $pagamento->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <style>
                            .troco::-webkit-input-placeholder {
                                color: red;
                                font: 18px verdana, arial, sans-serif;
                            }
                        </style>

                        <div class="row mt-2 d-none" id="div-troco-pedido">
                            <div class="col-md-12 text-center">
                                <input style="border-color: #fac564 !important; color: #000 !important" name="troco"
                                    type="text" class="form-control money troco"
                                    placeholder="Informe o valor do troco">
                            </div>
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-12">
                                <textarea name="obs" style="border-color: #fac564 !important; color: #000 !important; resize: none"
                                    class="form-control" rows="4" placeholder="Observação"></textarea>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">Finalizar Pedido</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('#modal-pedido').on('hide.bs.modal', function() {
            window.location.reload()
        })

        function novoEndereco() {
            $('#updateEndereco').val(1)
            var novo = document.getElementById('novo-endereco')
            var atual = document.getElementById('endereco-atual')
            novo.classList.remove('d-none')
            atual.classList.add('d-none')
        }

        function toogleTroco(el) {
            var troco = document.getElementById('div-troco')
            if (el.value.toLowerCase() == 'dinheiro') {
                troco.classList.remove('d-none');
            } else {
                troco.value = '';
                troco.classList.add('d-none');
            }
        }

        function toogleTrocoPedido(el) {
            var troco = document.getElementById('div-troco-pedido')
            if (el.value.toLowerCase() == 'dinheiro') {
                troco.classList.remove('d-none');
            } else {
                troco.value = '';
                troco.classList.add('d-none');
            }
        }


        function finalizarPedido(el) {
            var aberto = el.dataset.aberto;

            if (aberto == 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Desculpe no momento não estamos recebendo pedidos!',
                    text: 'Nosso horário de funcionamento é das 18:00 as 22:45',
                });

                return;
            }

            Swal.fire({
                title: 'Finalizar pedido',
                showDenyButton: true,
                showCancelButton: false,
                confirmButtonText: 'RETIRAR NO BALCÃO',
                denyButtonText: `ENTREGA`,
                confirmButtonColor: '#3085d6',
                denyButtonColor: '#05c76a',
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#modal-pedido-balcao').modal('show')
                } else if (result.isDenied) {
                    $('#modal-pedido').modal('show')
                    // window.location.href = '{{ route('cliente.finalizarPedido') }}'
                }
            })
        }
    </script>
@endsection