@extends('welcome')

@php
    $packDescription = $product->title;
    $typeDescription = isset($typeMeal) ? $typeMeal->description : __('dishes.select_dishes');
    $seoReplacements = ['type' => $typeDescription];
@endphp

@section('title', __('dishes.seo_title', $seoReplacements))
@section('meta_description', __('dishes.meta_description'))
@section('content')

<!--==============================
    Breadcumb
============================== -->
<div class="breadcumb-wrapper" 
     data-bg-src="{{ asset('images/banners/dishes.jpg') }}" 
     style="background-image: url('{{ asset('images/banners/bg_03.jpg') }}');"
     data-track-type="view"
     data-track-click="Visualização Breadcrumb"
     data-track-meta="Etapa: Seleção Refeições | Pack: {{ $packDescription ?? __('dishes.pack') }} | Tipo: {{ $typeDescription }}">

    <div class="container">
        <div class="breadcumb-content">
            
            <h1 class="breadcumb-title">
                {{ __('dishes.select_dishes') }}
            </h1>

            <ul class="breadcumb-menu">
                
                <li>
                    <a href="{{ route('welcome') }}"
                       data-track-click="Breadcrumb Home"
                       data-track-type="navigation"
                       data-track-meta="Origem: Seleção Refeições">
                        {{ __('dishes.home') }}
                    </a>
                </li>

                <li>
                    <a href="{{ route('packs.list') }}"
                       data-track-click="Breadcrumb Packs"
                       data-track-type="navigation"
                       data-track-meta="Origem: Seleção Refeições">
                        {{ __('dishes.packs') }}
                    </a>
                </li>

                <li 
                    data-track-click="Breadcrumb Pack"
                    data-track-type="navigation"
                    data-track-meta="Pack: {{ $packDescription ?? __('dishes.pack') }}">
                    {{ $packDescription ?? __('dishes.pack') }}
                </li>

                <li 
                    data-track-click="Breadcrumb Tipo Refeição"
                    data-track-type="navigation"
                    data-track-meta="Tipo: {{ $typeDescription }}">
                    {{ $typeDescription }}
                </li>

            </ul>
        </div>
    </div>
</div>

<!--==============================
    Menu Dishes Area 
============================== -->
<section class="space-top space-extra-bottom" id="menu-dishes-sec">
    <div class="container">
        
        <!--==============================
            Menu Dishes - Título
        ============================== -->
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="title-area text-center">
                    <span class="sub-title">
                        <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="Icon">
                        {{ strtoupper(__('dishes.choose_your_dishes')) }}
                    </span>
                    <h2 class="sec-title" style="color: var(--verde-dona);">
                        {{ $packDescription ?? __('dishes.menu_selection') }}
                    </h2>
                    <p class="section-desc" style="color: var(--text-secondary);">
                        {{ __('dishes.select_dishes_for_pack', ['pack' => $packDescription ?? '', 'type' => $typeDescription ?? '']) }}
                    </p>
                </div>
            </div>
        </div>
        
        <!-- INFO DO PACK - COMPACTA -->
        <div class="pack-info-card mb-4" style="background-color: var(--bege-claro); border-radius: 15px; padding: 1rem 1.5rem; border-left: 5px solid var(--verde-dona);">
            <div class="row align-items-center">
                <div class="col-12 col-md-7">
                    <div class="pack-info d-flex align-items-center flex-wrap">
                        <span class="badge me-3 mb-2"
                              style="background-color: var(--verde-dona); color: white; padding: 5px 15px; border-radius: 25px; font-size: 0.75rem;">
                            <i class="fas fa-box me-1"></i>
                            {{ $category->description() }}
                        </span>

                        <span style="color: var(--text-secondary); font-size: 0.9rem;">
                            <i class="fas fa-calendar-alt me-1" style="color: var(--laranja-cta);"></i>
                            {{ $menu?->title() ?? __('dishes.current_week') }}
                        </span>
                    </div>
                </div>

                <div class="col-12 col-md-5">
                    <div class="pack-stats d-flex align-items-center justify-content-md-end mt-2 mt-md-0">
                        <span class="me-3" style="color: var(--castanho-texto); font-size: 0.9rem;">
                            {{ __('dishes.selected') }}:
                        </span>

                        <span class="total-selected"
                              style="color: var(--verde-dona); font-size: 1.5rem; font-weight: 700; line-height: 1;">
                            0
                        </span>

                        <span style="color: var(--text-secondary); font-size: 0.9rem;">
                            /{{ $totalMeals }}
                        </span>

                        <div class="progress ms-3"
                             style="width: 80px; height: 6px; background-color: var(--bege-medio); border-radius: 10px;">
                            <div class="progress-bar progress-total"
                                 style="width: 0%; background-color: var(--verde-dona); border-radius: 10px;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- FORMULÁRIO DE SELEÇÃO -->
        <form action="{{ route('cart.add') }}" method="POST" id="addDishToCart">
            @csrf
            <input type="hidden" name="pack_id" value="{{ $product->pro_id }}">
            <input type="hidden" name="type_meal_id" value="{{ $typeMeal->typ_id }}">
            <input type="hidden" name="total_needed" value="{{ $totalMeals }}" id="totalNeeded">
            
            <!-- PRATOS FIT -->
            <div class="dishes-section fit-section mb-5">
                <div class="d-flex align-items-center mb-3">
                    <div style="width: 40px; height: 40px; background-color: var(--verde-dona); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                        <i class="fas fa-dumbbell" style="color: white; font-size: 1.2rem;"></i>
                    </div>
                    <h3 style="color: var(--castanho-texto); font-size: 1.3rem; font-weight: 600; margin: 0;">
                        {{ __('dishes.fit_dishes') }}
                    </h3>
                </div>

                <div class="dishes-list">
                    @php $dishIndex = 1; @endphp

                    @forelse($latestMenu->dishes->filter(fn($d) => (int)$d->dsh_type === 0) as $dish)
                        @include('welcome.shop.partials.dish-list-item', [
                            'type' => 'fit',
                            'index' => $dishIndex,
                            'dish' => $dish,
                            'color' => 'var(--verde-dona)',
                            'showBadge' => false
                        ])
                        @php $dishIndex++; @endphp
                    @empty
                        <div class="dish-list-item" style="background-color: white; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border-color); overflow: hidden;">
                            <div class="row g-0 align-items-center">
                                <div class="col-12">
                                    <div style="padding: 16px 14px; color: var(--text-secondary); font-size: 0.95rem;">
                                        {{ __('dishes.no_fit_dishes_available') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- PRATOS VEGETARIANOS -->
            <div class="dishes-section veg-section">
                <div class="d-flex align-items-center mb-3">
                    <div style="width: 40px; height: 40px; background-color: var(--verde-oliva); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                        <i class="fas fa-seedling" style="color: white; font-size: 1.2rem;"></i>
                    </div>
                    <h3 style="color: var(--castanho-texto); font-size: 1.3rem; font-weight: 600; margin: 0;">
                        {{ __('dishes.veg_dishes') }}
                    </h3>
                </div>

                <div class="dishes-list">
                    @php $dishIndex = 1; @endphp

                    @forelse($latestMenu->dishes->filter(fn($d) => (int)$d->dsh_type === 1) as $dish)
                        @include('welcome.shop.partials.dish-list-item', [
                            'type' => 'veg',
                            'index' => $dishIndex,
                            'dish' => $dish,
                            'color' => 'var(--verde-oliva)',
                            'showBadge' => false
                        ])
                        @php $dishIndex++; @endphp

                    @empty
                        <div class="dish-list-item" style="background-color: white; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border-color); overflow: hidden;">
                            <div class="row g-0 align-items-center">
                                <div class="col-12">
                                    <div style="padding: 16px 14px; color: var(--text-secondary); font-size: 0.95rem;">
                                        {{ __('dishes.no_veg_dishes_available') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- BARRA DE RESUMO FIXA -->
            <div class="cart-summary-bar" style="position: sticky; bottom: 20px; background-color: white; border-radius: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); padding: 0.8rem 1.5rem; margin-top: 40px; border: 1px solid var(--border-color); z-index: 100;">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <span style="color: var(--castanho-texto); font-weight: 500; font-size: 0.9rem; white-space: nowrap;">{{ __('dishes.selected') }}:</span>
                        <span class="total-selected mx-2" style="color: var(--verde-dona); font-size: 1.3rem; font-weight: 700;">0</span>
                        <span style="color: var(--text-secondary); font-size: 0.9rem;">/{{ $totalMeals }}</span>
                        <div class="progress ms-3 " style="width: 100px; height: 6px; background-color: var(--bege-medio); border-radius: 10px;">
                            <div class="progress-bar progress-total" style="width: 0%; background-color: var(--verde-dona); border-radius: 10px;"></div>
                        </div>
                    </div>

                    <button type="submit" class="add-to-cart-btn" style="background-color: var(--verde-dona); color: white; border: none; padding: 8px 20px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; white-space: nowrap; cursor: pointer;">
                        <i class="fas fa-cart-plus me-1 d-none d-sm-inline"></i> {{ __('dishes.add_to_cart') }}
                    </button>
                </div>
            </div>

            <!-- MENSAGEM DE AVISO -->
            <div id="warning-message" class="alert-message" style="display: none; background-color: var(--laranja-cta); color: white; padding: 10px 15px; border-radius: 8px; margin-top: 15px; font-size: 0.9rem;">
                <i class="fas fa-info-circle me-2"></i> {{ __('dishes.select_minimum', ['count' => $totalMeals ?? 30]) }}
            </div>

        </form>
    </div>
</section>

@include('welcome.partials.dish-info-modal')

<!-- Espaçamento final -->
<div style="height: 30px;"></div>

@endsection

@push('styles')
    <style>
        .dish-list-item {
            transition: all 0.2s ease;
        }
        
        .dish-list-item:hover {
            background-color: var(--bege-claro) !important;
            border-color: var(--verde-dona) !important;
        }
        
        .quantity-controls input[type=number]::-webkit-inner-spin-button,
        .quantity-controls input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        .quantity-controls input[type=number] {
            -moz-appearance: textfield;
        }
        
        .qty-btn {
            transition: all 0.2s;
            box-shadow: none;
            outline: none;
        }
        
        .qty-btn:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }
        
        .qty-btn:active {
            transform: scale(0.95);
        }
        
        .add-to-cart-btn:disabled {
            background-color: var(--text-secondary) !important;
            cursor: not-allowed;
            opacity: 0.5;
        }
        
        /* Otimizações para mobile */
        @media (max-width: 576px) {
            .cart-summary-bar {
                left: 10px;
                right: 10px;
                width: calc(100% - 20px);
                padding: 0.6rem 1rem !important;
            }
            
            .cart-summary-bar .d-flex {
                flex-wrap: nowrap;
                gap: 8px;
            }
            
            .cart-summary-bar .d-flex:first-child {
                min-width: 0; /* Permite que o texto encolha */
                flex-shrink: 1;
            }
            
            .cart-summary-bar .total-selected {
                font-size: 1.1rem !important;
                margin-left: 5px !important;
                margin-right: 5px !important;
            }
            
            .cart-summary-bar span:not(.total-selected) {
                font-size: 0.8rem !important;
            }
            
            .add-to-cart-btn {
                padding: 6px 12px !important;
                font-size: 0.8rem !important;
                flex-shrink: 0; /* Impede que o botão encolha */
            }
        }
        
        @media (max-width: 767px) {
            .cart-summary-bar {
                left: 10px;
                right: 10px;
                width: calc(100% - 20px);
                margin-left: auto;
                margin-right: auto;
            }
            
            .cart-summary-bar .row {
                margin-left: 0;
                margin-right: 0;
            }
            
            .cart-summary-bar [class*="col-"] {
                padding-left: 5px;
                padding-right: 5px;
            }
            
            .cart-summary-bar .text-end {
                padding-right: 0 !important;
            }
            
            .add-to-cart-btn {
                padding: 8px 12px !important;
                font-size: 0.85rem !important;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        
        function refreshMiniCart() {
            // 🔹 atualizar HTML do mini-cart
            $.get('/cart/refresh', function (html) {
                $('.widget_shopping_cart_content').html(html);
            });

            // 🔹 atualizar contadores
            $.get('/cart/status', function (data) {

                $('.cart-count').text(data.cart_count);

                const subtotal = parseFloat(data.subtotal)
                    .toFixed(2)
                    .replace('.', ',');

                $('.cart-subtotal').html(
                    '<span class="woocommerce-Price-currencySymbol">€</span>' + subtotal
                );

            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            const modalEl = document.getElementById('dishInfoModal');
            const iframe = document.getElementById('dishInfoIframe');

            // ✅ Inicializar a instância Bootstrap
            const modal = new bootstrap.Modal(modalEl);

            document.querySelectorAll('.dishInformation').forEach(btn => {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    const url = this.getAttribute('data-url');
                    iframe.src = url;
                    // ✅ Abrir via instância
                    modal.show();
                });
            });

            // ✅ Agora este evento funciona
            modalEl.addEventListener('hidden.bs.modal', function () {
                iframe.src = '';
            });
        });


        document.addEventListener('DOMContentLoaded', function() {
            const totalNeeded = parseInt(document.getElementById('totalNeeded')?.value || 30);
            const qtyInputs = document.querySelectorAll('.qty-input');
            const totalSpans = document.querySelectorAll('.total-selected');
            const progressBars = document.querySelectorAll('.progress-total');
            const warningMessage = document.getElementById('warning-message');
            const submitBtn = document.querySelector('.add-to-cart-btn');
            
            function updateTotal() {
                let total = 0;
                qtyInputs.forEach(input => {
                    total += parseInt(input.value) || 0;
                });
                
                totalSpans.forEach(span => {
                    span.textContent = total;
                });
                
                const percentage = Math.min((total / totalNeeded) * 100, 100);
                progressBars.forEach(bar => {
                    bar.style.width = percentage + '%';
                });
                
                // Validação
                if (total !== totalNeeded) {
                    if (warningMessage) warningMessage.style.display = 'block';
                    if (submitBtn) {
                        submitBtn.disabled = true;
                    }
                } else {
                    if (warningMessage) warningMessage.style.display = 'none';
                    if (submitBtn) {
                        submitBtn.disabled = false;
                    }
                }
            }
            
            // Eventos para botões +
            document.querySelectorAll('.qty-plus').forEach(btn => {
                btn.addEventListener('click', function() {
                    const input = this.closest('.d-flex').querySelector('.qty-input');
                    if (input) {
                        input.value = (parseInt(input.value) || 0) + 1;
                        updateTotal();
                    }
                });
            });
            
            // Eventos para botões -
            document.querySelectorAll('.qty-minus').forEach(btn => {
                btn.addEventListener('click', function() {
                    const input = this.closest('.d-flex').querySelector('.qty-input');
                    if (input && (parseInt(input.value) || 0) > 0) {
                        input.value = (parseInt(input.value) || 0) - 1;
                        updateTotal();
                    }
                });
            });
            
            // Eventos para inputs
            qtyInputs.forEach(input => {
                input.addEventListener('change', updateTotal);
                input.addEventListener('keyup', updateTotal);
            });
            
            // Modal de informação nutricional
            document.querySelectorAll('.dishInformation').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const url = this.dataset.url;
                    const modalBody = document.getElementById('dishInfoModalBody');
                    
                    if (url && modalBody) {
                        modalBody.innerHTML = '<div class="text-center py-3"><i class="fas fa-spinner fa-spin fa-2x"></i></div>';
                        
                        fetch(url)
                            .then(response => response.text())
                            .then(html => {
                                modalBody.innerHTML = html;
                            })
                            .catch(error => {
                                modalBody.innerHTML = '<p class="text-danger mb-0">Erro ao carregar informação.</p>';
                            });
                    }
                });
            });
            
            // Inicializar
            updateTotal();
            
            
            document.getElementById('addDishToCart').addEventListener('submit', async function (e) {
                e.preventDefault();

                const form = this;
                const url = form.action;
                const formData = new FormData(form);

                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                        },
                        body: formData
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        throw data;
                    }

                    const warning = document.getElementById('warning-message');
                    if (warning) {
                        warning.style.display = 'none';
                    }

                    toast.success('Sucesso', data.message, 3000);
                    
                    refreshMiniCart();

                    document.dispatchEvent(new CustomEvent('cart:updated', {
                        detail: data
                    }));
                    
                    // 🔹 REDIRECT PARA O CARRINHO
                    window.location.href = "{{ route('cart.index') }}";

                } catch (error) {
                    let message = 'Ocorreu um erro ao adicionar o pack.';

                    // ✔ PRIORIDADE 1: mensagem direta do backend
                    if (error?.message) {
                        message = error.message;
                    }

                    // ✔ PRIORIDADE 2: erros de validação (fallback)
                    if (error?.errors) {
                        const firstField = Object.keys(error.errors)[0];
                        if (firstField && error.errors[firstField]?.length) {
                            message = error.errors[firstField][0];
                        }
                    }

                    // ✔ mensagem no layout
                    const warning = document.getElementById('warning-message');
                    if (warning) {
                        warning.style.display = 'block';
                        warning.innerHTML = '<i class="fas fa-info-circle me-2"></i>' + message;
                    }

                    // ✔ TOAST correto
                    toast.error('Erro', message, 4000);
                }
            });
        });
    </script>
@endpush