@extends('cliente.layout.menu')

@section('content')
    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center mb-2 pt-4">
                <div class="col-md-7 heading-section text-center ftco-animate">
                    <h2 class="">Bebidas</h2>
                    <a href="{{ route('cardapio') }}" class="btn btn-sm btn-info">Voltar p/ Cardápio</a>
                    <p class="flip mt-4"><span class="deg1"></span><span class="deg2"></span><span class="deg3"></span>
                    </p>
                </div>
            </div>
        </div>
    </section>

    <div class="container-fluid">
        <div class="row justify-content-center mt-2" id="div-bebids">
            <div class="col-md-9 text-center">
                <select name="" id="select-bebida" class="form-control"
                    style="border-color: #fac564 !important; color: #fff !important" onchange="addBebida(this)">
                    <option value="0">Adicionar a bebida</option>
                    @foreach ($bebidas 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>

                @foreach ($bebidas as $bebida)
                    <div class="col-md-12 d-flex mt-4">
                        <div class="opt col-md-12 col-12 d-none" id="bebida-{{ $bebida->id }}">
                            <label><span id="bebida-qtd-{{ $bebida->id }}"></span> - {{ $bebida->descricao }}
                                <span id="bebida-valor-{{ $bebida->id }}"></span></label><br>
                            <a href="javascript:void(0)" onclick="deleteBebida({{ $bebida->id }})"
                                style="color: red !important">Excluir</a>
                        </div>
                    </div>
                @endforeach

                {{-- <h2>Escolha a bebida</h2>
                @foreach ($bebidas as $bebida)
                    <div class="col-md-12 d-flex">
                        <div class="opt col-md-12 col-12" id="bebida-{{ $bebida->id }}" data-id={{ $bebida->id }}>
                            <label>{{ $bebida->descricao }} - R$
                                {{ number_format($bebida->valor, 2, ',', '.') }} (cada)</label><br>
                            <button class="btn btn-sn btn-info" data-id={{ $bebida->id }} onclick="addOrRemoveBebida(this, '-')">-</button>
                            <label class="p-4" id="label-bebida-{{ $bebida->id }}">0</label>
                            <button class="btn btn-sn btn-info" data-id={{ $bebida->id }} onclick="addOrRemoveBebida(this, '+')">+</button>
                        </div>
                    </div>
                @endforeach --}}
            </div>
        </div>


        <div class="col-md-12 text-center pb-4 pt-2">
            <button class="btn btn-sm btn-success" onclick="addCarrinho()">Adicionar ao carrinho</button>
        </div>
    </div>
@endsection

@section('css')
    <style>
        .desc-borda {
            font-size: 14px;
        }

        .opt {
            cursor: pointer;
            border: solid;
            border-width: thin;
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .opt label {
            color: white;
            cursor: pointer;
        }

        .opt-active {
            background-color: green;
        }

        .fa-triangle-exclamation {
            color: yellow;
        }

        .fa-circle-check {
            color: green;
        }

        .fa-trash-can {
            color: red;
            cursor: pointer;
            font-size: 20px;
        }

        .row-buttons {
            grid-gap: 10px;
        }

        .button-option {
            cursor: pointer;
            border-radius: 10px;
            border: solid;
            border-width: thin;
            padding: 10px;
        }

        .button-active {
            background-color: darkblue;
        }
    </style>
@endsection

@section('modal')
    <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>
        function deleteBebida(id) {
            bebidas.forEach(el => {
                if (el.id == id) {
                    el.qtd = 0
                    var elBebida = document.getElementById(`bebida-${id}`);
                    elBebida.classList.add('d-none')
                }
            })
        }

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



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

                    var elBebida = document.getElementById(`bebida-${id}`);

                    $(`#bebida-qtd-${id}`).text(`${qtd}`)
                    $(`#bebida-valor-${id}`).text(`(${total})`)
                    elBebida.classList.remove('d-none')

                    $('#select-bebida').val('0')
                    $('#qtd-selected').val('0')

                    $('#modal-add-bebida').modal('hide')
                }
            })
        }

        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 addOrRemoveBebida(el, operacao) {
            var id = el.dataset.id;

            if (operacao == '+') {
                bebidas.forEach(el => {
                    if (el.id == id) {
                        el.qtd = el.qtd += 1;
                        $(`#label-bebida-${id}`).text(el.qtd)
                    }
                })
            } else if (operacao == '-') {
                bebidas.forEach(el => {
                    if (el.id == id) {
                        if (el.qtd == 0) return;

                        el.qtd = el.qtd -= 1;
                        $(`#label-bebida-${id}`).text(el.qtd)
                    }
                })

            }
        }

        var bebidas = {!! $bebidas !!};

        function addCarrinho() {
            console.log(bebidas);
            $.ajax({
                url: "{{ route('addBebida') }}",
                type: 'POST',
                dataType: 'json',
                data: {
                    bebidas: bebidas
                },
                success: function(response) {
                    if (response.message) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Adicionado',
                            text: response.message
                        }).then(() => {
                            window.location.href = '/carrinho'
                        })
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erro',
                            text: response.error
                        }).then(() => {
                            window.location.href = '/carrinho'
                        })
                    }
                }
            })



        }

        $(function(e) {
            const btnBorda = document.getElementById('btn-borda');
            const btnSabor = document.getElementById('btn-sabor');
            const btnAdicional = document.getElementById('btn-adicional');
            const divBorda = document.getElementById('div-borda');
            const divSabor = document.getElementById('div-sabor');
            const divAdicional = document.getElementById('div-adicional');
            const descBorda = document.getElementById('desc-borda');
            const descSabor = document.getElementById('desc-sabor');
            const descAdicional = document.getElementById('desc-adicional');
            const statusBorda = document.getElementById('status-borda');
            const statusSabor = document.getElementById('status-sabor');
            const statusOK = 'fa-solid fa-circle-check float-right pt-2';
            const statusPENDING = 'fa-solid fa-triangle-exclamation float-right pt-2';

            bebidas.forEach(el => el.qtd = 0)

            // Listener
            document.querySelectorAll('.button-option').forEach((el) => el.addEventListener('click', () => {
                resetOption();
                showOption(el.dataset.type)
            }));

            document.querySelectorAll('.opt-borda').forEach((el) => el.addEventListener('click', () => {
                addBorda(el)
            }));

            document.querySelectorAll('.opt-sabor').forEach((el) => el.addEventListener('click', () => {
                addSabor(el)
            }));

            document.querySelectorAll('.excluir-sabor').forEach((el) => el.addEventListener('click', () => {
                excluirSabor(el)
            }));

            document.querySelectorAll('.opt-adicional').forEach((el) => el.addEventListener('click', () => {
                addAdicional(el)
            }));

            document.querySelectorAll('.opt-bebida').forEach((el) => el.addEventListener('click', () => {
                addBebida(el)
            }));

            document.querySelectorAll('.excluir-adicional').forEach((el) => el.addEventListener('click', () => {
                excluirAdicional(el)
            }));

            const addBebida = function(el) {
                if (el.classList.contains('opt-active')) {
                    excluirBebida(el)
                    return;
                };

                el.classList.add('opt-active')
            }

            const excluirBebida = function(el) {
                el.classList.remove('opt-active');
            }

            const addAdicional = function(el) {
                if (el.classList.contains('opt-active')) {
                    excluirAdicional(el)
                    return;
                };


                if (itemPedido.adicionais.length == itemPedido.categoria.maximoAdicional) {
                    toastr.error(
                        `Você pode escolher no máximo ${itemPedido.categoria.maximoAdicional} adicionais!`)
                    return;
                }

                itemPedido.adicionais.push({
                    id: el.dataset.id,
                    descricao: el.dataset.desc
                })

                el.classList.add('opt-active')
                //let ex = document.getElementById('ex-adicional-' + el.dataset.id)
                //ex.classList.remove('d-none');
                //ex.parentNode.classList.add('opt')
                updateButtonAdicional();
            }

            const updateButtonAdicional = function() {
                descAdicional.innerHTML = '';
                itemPedido.adicionais.forEach((el, i) => {
                    if (i != 0) descAdicional.append(', ')
                    descAdicional.append(el.descricao)
                })
            }

            const addBorda = function(el) {
                document.querySelectorAll('.opt-borda').forEach((el) => {
                    el.classList.remove('opt-active')
                });

                itemPedido.borda = {
                    id: el.dataset.id,
                    descricao: el.dataset.desc
                }
                el.classList.add('opt-active')

                rolarPagina('#div-adicional', 60)
                updateButtonBorda();
            }

            const excluirAdicional = function(el) {
                itemPedido.adicionais.forEach((adicional, i) => {
                    if (adicional.id === el.dataset.id) {
                        itemPedido.adicionais.splice(i, 1)
                    }
                })

                //el.classList.add('d-none')
                //el.parentNode.classList.remove('opt')
                let div = document.getElementById(`adicional-${el.dataset.id}`)
                div.classList.remove('opt-active')



                updateButtonAdicional();
            }

            const updateButtonBorda = function() {
                descBorda.innerHTML = itemPedido.borda.descricao;
                statusBorda.classList = statusOK;
            }

            const addSabor = function(el) {
                if (el.classList.contains('opt-active')) {
                    excluirSabor(el)
                    return;
                };

                if (itemPedido.sabores.length == itemPedido.categoria.maximoSabor) {
                    toastr.error(`Você pode escolher no máximo ${itemPedido.categoria.maximoSabor} sabores!`)
                    return;
                }

                itemPedido.sabores.push({
                    id: el.dataset.id,
                    descricao: el.dataset.desc
                })
                el.classList.add('opt-active')

                //let ex = document.getElementById('ex-sabor-' + el.dataset.id)
                //ex.classList.remove('d-none');
                //ex.parentNode.classList.add('opt')

                if (itemPedido.sabores.length == itemPedido.categoria.maximoSabor) {
                    rolarPagina('#div-borda', 140)
                }

                updateButtonSabor();
            }

            function rolarPagina(element, revert) {
                var target = $($(element));

                $('html, body').animate({
                    scrollTop: target.offset().top - revert //Captura a posição do elemento
                }, 1000); //Tempo de animação em milissegundos
            }

            const excluirSabor = function(el) {
                itemPedido.sabores.forEach((sabor, i) => {
                    if (sabor.id === el.dataset.id) {
                        itemPedido.sabores.splice(i, 1)
                    }
                })

                //el.classList.add('d-none')
                //el.parentNode.classList.remove('opt')
                let div = document.getElementById(`sabor-${el.dataset.id}`)
                div.classList.remove('opt-active')
                updateButtonSabor();
            }

            const updateButtonSabor = function() {
                descSabor.innerHTML = '';
                itemPedido.sabores.forEach((el, i) => {
                    if (i != 0) descSabor.append(', ')
                    descSabor.append(el.descricao)
                })

                statusSabor.classList = itemPedido.sabores.length > 0 ? statusOK : statusPENDING;
            }

            const showOption = function(option) {
                let btn = document.getElementById('btn-' + option);
                let div = document.getElementById('div-' + option);
                btn.classList.add('button-active');
                div.classList.remove('d-none');
            }

            const resetOption = function() {
                btnBorda.classList.remove('button-active')
                btnSabor.classList.remove('button-active')
                btnAdicional.classList.remove('button-active')
                divBorda.classList.add('d-none')
                divSabor.classList.add('d-none')
                divAdicional.classList.add('d-none')
            }
        })
    </script>
@endsection