@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="">{{ $tamanho->nome }} - {{ $tamanho->subNome }}</h2>
                    <h5 class="mb-3">{{ $tamanho->descricao }}</h5>
                    <a href="{{ route('cardapio') }}" class="btn btn-danger btn-cardapio">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-sabor">
            <div class="col-md-9">

                <div class="col-md-12">
                    <input type="text" class="form-control" onkeyup="buscarSabor(this)" placeholder='🔍 Buscar Sabor'>
                </div>
                @foreach ($categorias as $categoria)
                    <div class="col-md-12 mt-4">
                        <p class="bg-success tamanho-desc p-1 rounded">{{ $categoria->titulo }}</p>
                    </div>
                    @foreach ($categoria->sabores() as $sabor)
                        <div class="col-md-12 d-flex sabor text-center" id="{{ $sabor->saborBusca() }}">
                            <div class="opt-sabor opt col-md-12 col-12" id="sabor-{{ $sabor->id }}"
                                data-id={{ $sabor->id }} data-desc="{{ $sabor->titulo }}">
                                <label style="font-size: 18px;">{{ $sabor->titulo }} <span
                                        style="font-size: 10px !important;">({{ $sabor->descricao }})</span>
                                    <br>R$ {{ number_format($sabor->valorByTamanho($tamanho->nome), 2, ',', '.') }}</label>
                            </div>

                            <div class="col-md-1 col-2 d-flex justify-content-center align-items-center">
                                <i class="fa-solid fa-trash-can float-right excluir-sabor d-none float-right"
                                    id="ex-sabor-{{ $sabor->id }}" data-id={{ $sabor->id }}></i>
                            </div>
                        </div>
                    @endforeach
                @endforeach
                {{-- @foreach ($categoria->sabores() as $sabor)
                    <div class="col-md-12 d-flex sabor" id="{{ $sabor->saborBusca() }}">
                        <div class="opt-sabor opt col-md-12 col-12" id="sabor-{{ $sabor->id }}"
                            data-id={{ $sabor->id }} data-desc="{{ $sabor->get('titulo') }}">
                            <label style="font-size: 18px;">{{ $sabor->get('titulo') }} <span
                                    style="font-size: 10px !important;">({{ $sabor->get('descricao') }})</span>
                                    <br>R$ {{ number_format($sabor->valor, 2, ',', '.') }}</label>
                        </div>

                        <div class="col-md-1 col-2 d-flex justify-content-center align-items-center">
                            <i class="fa-solid fa-trash-can float-right excluir-sabor d-none float-right"
                                id="ex-sabor-{{ $sabor->id }}" data-id={{ $sabor->id }}></i>
                        </div>
                    </div>
                @endforeach --}}
            </div>
        </div>

        <div class="row justify-content-center mt-2" id="div-borda">
            <div class="col-md-9 text-center">
                <h2 style="color: yellow">Escolha Borda</h2>
                @foreach ($bordas as $borda)
                    <div class="col-md-12 opt-borda opt text-center" data-id="{{ $borda->id }}"
                        data-desc="{{ $borda->titulo }}">
                        <label style="font-size: 18px;">{{ $borda->titulo }} - R$
                            {{ number_format($borda->valorByTamanho($tamanho->nome), 2, ',', '.') }}</label>
                    </div>
                @endforeach
                {{-- @foreach ($categoria->bordas() as $borda)
                    <div class="col-md-12 opt-borda opt text-center" data-id="{{ $borda->id }}"
                        data-desc="{{ $borda->get('titulo') }}">
                        <label style="font-size: 18px;">{{ $borda->get('titulo') }} - R$
                            {{ number_format($borda->valor, 2, ',', '.') }}</label>
                    </div>
                @endforeach --}}
            </div>
        </div>



        <div class="row justify-content-center mt-2" id="div-adicional">
            <div class="col-md-9 text-center">
                <h2 style="color: yellow">Escolha os adicionais</h2>
                @foreach ($adicionais as $adicional)
                    <div class="col-md-12 d-flex">
                        <div class="opt-adicional opt col-md-12 col-12" id="adicional-{{ $adicional->id }}"
                            data-id={{ $adicional->id }} data-desc="{{ $adicional->titulo }}">
                            <label style="font-size: 18px;">{{ $adicional->titulo }} - R$
                                {{ number_format($adicional->valor, 2, ',', '.') }}</label><br>
                            <span>{{ $adicional->descricao }}</span>
                        </div>

                        <div class="col-md-1 col-2 d-flex justify-content-center align-items-center">
                            <i class="fa-solid fa-trash-can float-right excluir-adicional d-none float-right"
                                id="ex-adicional-{{ $adicional->id }}" data-id={{ $adicional->id }}></i>
                        </div>
                    </div>
                @endforeach
                {{-- @foreach ($categoria->adicionais() as $adicional)
                    <div class="col-md-12 d-flex">
                        <div class="opt-adicional opt col-md-12 col-12" id="adicional-{{ $adicional->id }}"
                            data-id={{ $adicional->id }} data-desc="{{ $adicional->get('titulo') }}">
                            <label style="font-size: 18px;">{{ $adicional->get('titulo') }} - R$
                                {{ number_format($adicional->valor, 2, ',', '.') }}</label><br>
                            <span>{{ $adicional->get('descricao') }}</span>
                        </div>

                        <div class="col-md-1 col-2 d-flex justify-content-center align-items-center">
                            <i class="fa-solid fa-trash-can float-right excluir-adicional d-none float-right"
                                id="ex-adicional-{{ $adicional->id }}" data-id={{ $adicional->id }}></i>
                        </div>
                    </div>
                @endforeach --}}
            </div>
        </div>

        <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; font-size: 12px;" 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-2">
                        <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
            </div>
        </div>

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

@section('modal')
    <div class="col-md-10">
        <div class="modal fade" id="modal-add-bebida" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered justify-content-center">
                <div class="modal-content" style="width: 80% !important">
                    <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>
    </div>
@endsection

@section('css')
    <style>
        .tamanho-desc{
            color: #fff;
            padding-left: 20px !important;
        }

        .btn-cardapio {
            font-size: 18px;
            width: 80%;
        }

        .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('scripts')
    <script>
        function buscarSabor(el) {
            var search = el.value

            document.querySelectorAll('.sabor').forEach((x) => {
                var id = x.id;

                x.classList.remove('d-flex')
                x.classList.add('d-none')

                if (id.includes(search.toLowerCase())) {
                    x.classList.remove('d-none')
                    x.classList.add('d-flex')
                }
            });
        }

        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 check() {
            console.log(itemPedido);
            console.log(bebidas);
        }

        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 itemPedido = {
            categoria: {
                id: '{{ $tamanho->id }}',
                descricao: '{{ $tamanho->nome }}',
                name: '{{ $tamanho->subNome }}',
                maximoSabor: parseInt('{{ $tamanho->maxSabor }}'),
                maximoAdicional: parseInt('{{ $tamanho->maxAdicional }}')
            },
            borda: null,
            sabores: [],
            adicionais: []
        }

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

        function addCarrinho() {
            if (!itemPedido.borda) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Escolha a borda!'
                }).then(() => {
                    //document.getElementById('btn-borda').click()
                })

                return;
            }

            if (itemPedido.sabores.length === 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Escolha o sabor!'
                }).then(() => {
                    //document.getElementById('btn-sabor').click()
                })

                return;
            }

            itemPedido.bebidas = bebidas;

            $.ajax({
                url: "{{ route('addCarrinho') }}",
                type: 'POST',
                dataType: 'json',
                data: itemPedido,
                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