@extends('cliente.layout.menu')

@section('content')
    <section class="ftco-section">
        <div class="container">
            <div class="row justify-content-center mb-5 pb-3 pt-4">
                <div class="col-md-7 heading-section text-center ftco-animate">
                    <h2 class="">{{ $categoria->titulo }}</h2>
                    <h5 class="mb-3">{{ $categoria->descricao }}</h5>
                    <a href="{{ route('cardapio') }}" class="btn btn-sm btn-info">Voltar p/ Cardápio</a>
                    {{-- <button class="btn btn-sm btn-success" onclick="addCarrinho()">Adicionar ao carrinho</button> --}}
                    <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">
        {{-- Botoes --}}
        <div class="row text-center p-2 row-buttons justify-content-center">
            <div class="col-md-3 button-option button-active" data-type="borda" id="btn-borda">
                <h4 class="pt-2">
                    Borda
                    <i id="status-borda" class="fa-solid fa-triangle-exclamation float-right pt-2"></i>
                    <br><span class="desc-borda" id="desc-borda"></span>
                </h4>
            </div>

            <div class="col-md-3 button-option" data-type="sabor" id="btn-sabor">
                <h4 class="pt-2">
                    Sabor
                    <i id="status-sabor" class="fa-solid fa-triangle-exclamation float-right pt-2"></i>
                    <br><span class="desc-borda" id="desc-sabor"></span>
                </h4>
            </div>

            <div class="col-md-3 button-option" data-type="adicional" id="btn-adicional">
                <h4 class="pt-2">
                    Adicionais
                    <br><span class="desc-borda" id="desc-adicional"></span>
                </h4>
            </div>
        </div>

        {{-- Conteudo referente a cada botao --}}
        <div class="row justify-content-center mt-2" id="div-borda">
            <div class="col-md-9">
                <h2>Escolha Borda</h2>
                @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>{{ $borda->get('titulo') }} - R$
                            {{ number_format($borda->valor, 2, ',', '.') }}</label>
                    </div>

                    {{-- <li class="opt-borda opt" data-id="{{ $borda->get('id') }}" data-desc="{{ $borda->get('titulo') }}">
                            {{ $borda->get('titulo') }} - R$ {{ number_format($borda->get('valor'), 2, ',', '.') }}</li> --}}
                @endforeach
            </div>
        </div>

        <div class="row justify-content-center mt-2 d-none" id="div-sabor">
            <div class="col-md-9">
                <h2>Escolha o Sabor</h2>
                @foreach ($categoria->sabores() as $sabor)
                    <div class="col-md-12 d-flex">
                        <div class="opt-sabor opt col-md-11 col-10" id="sabor-{{ $sabor->id }}"
                            data-id={{ $sabor->id }} data-desc="{{ $sabor->get('titulo') }}">
                            <label>{{ $sabor->get('titulo') }} - R$
                                {{ number_format($sabor->valor, 2, ',', '.') }}</label><br>
                            <span>{{ $sabor->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-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 d-none" id="div-adicional">
            <div class="col-md-9">
                <h2>Escolha os adicionais</h2>
                @foreach ($categoria->adicionais() as $adicional)
                    <div class="col-md-12 d-flex">
                        <div class="opt-adicional opt col-md-11 col-10" id="adicional-{{ $adicional->id }}"
                            data-id={{ $adicional->id }} data-desc="{{ $adicional->get('titulo') }}">
                            <label>{{ $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->get('id') }}" data-id={{ $adicional->get('id') }}></i>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>


        <div class="col-md-12 text-center pb-4 pt-2">
            <a href="{{ route('cardapio') }}" class="btn btn-sm btn-info">Voltar p/ Cardápio</a>
            <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('scripts')
    <script>
        var itemPedido = {
            categoria: {
                id: '{{ $categoria->id }}',
                descricao: '{{ $categoria->titulo }}',
                maximoSabor: parseInt('{{ $categoria->maximoSabor }}'),
                maximoAdicional: 2
            },
            borda: null,
            sabores: [],
            adicionais: []
        }

        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;
            }

            $.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 = '/cardapio'
                        })
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erro',
                            text: response.error
                        }).then(() => {
                            window.location.href = '/cardapio'
                        })
                    }
                }
            })



        }

        $(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';

            // 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('.excluir-adicional').forEach((el) => el.addEventListener('click', () => {
                excluirAdicional(el)
            }));

            const addAdicional = function(el) {
                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')
                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')) return;

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

                console.log(el);

                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)
                console.log(ex);

                ex.classList.remove('d-none');
                ex.parentNode.classList.add('opt')
                updateButtonSabor();
            }

            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