@extends('donamarmita-admin')
@section('title', 'Criar Pack - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fa fa-cube"></i> Criar Novo Pack</h1>
            <p class="text-muted">Preencha os campos para adicionar um novo pack</p>
        </div>
        <div class="title_right">
            <div class="pull-right">
                <a href="{{ route('admin.packs.index') }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Voltar à Lista
                </a>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <!-- Breadcrumbs -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.products.index') }}">Produtos</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.packs.index') }}">Packs</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Criar Novo</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Main Form Card -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-edit"></i> Formulário de Criação</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form class="form-horizontal form-label-left" method="POST" enctype="multipart/form-data" id="formCreatePack" action="{{ route('admin.packs.store') }}">
                        @csrf

                        <!-- Alert Messages -->
                        @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <strong><i class="fa fa-exclamation-circle"></i> Erro!</strong>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                        <!-- Seção 1: Informações Básicas -->
                        <div class="form-section">
                            <h3 class="section-title"><i class="fa fa-info-circle"></i> Informações Básicas</h3>
                            <div class="ln_solid"></div>

                            <!-- Nomes Multilingue -->
                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="pro_description_pt">
                                    Nome do Pack - PT <span class="required">*</span>
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="pro_description_pt" 
                                           name="pro_description_pt" 
                                           class="form-control @error('pro_description_pt') is-invalid @enderror" 
                                           placeholder="Ex: Pack Semanal Completo"
                                           value="{{ old('pro_description_pt') }}"
                                           required>
                                    @error('pro_description_pt')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Nome principal em português</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="pro_description_en">
                                    Product Name - EN
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="pro_description_en" 
                                           name="pro_description_en" 
                                           class="form-control @error('pro_description_en') is-invalid @enderror" 
                                           placeholder="Ex: Complete Weekly Pack"
                                           value="{{ old('pro_description_en') }}">
                                    @error('pro_description_en')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Name of the pack in English</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="pro_description_es">
                                    Nombre del Pack - ES
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="pro_description_es" 
                                           name="pro_description_es" 
                                           class="form-control @error('pro_description_es') is-invalid @enderror" 
                                           placeholder="Ex: Pack Semanal Completo"
                                           value="{{ old('pro_description_es') }}">
                                    @error('pro_description_es')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Nombre del pack en español</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align" for="pro_description_fr">
                                    Nom du Pack - FR
                                </label>
                                <div class="col-md-6 col-sm-6">
                                    <input type="text" 
                                           id="pro_description_fr" 
                                           name="pro_description_fr" 
                                           class="form-control @error('pro_description_fr') is-invalid @enderror" 
                                           placeholder="Ex: Pack Hebdomadaire Complet"
                                           value="{{ old('pro_description_fr') }}">
                                    @error('pro_description_fr')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">Nom du pack en français</small>
                                </div>
                            </div>
                        </div>

                        <!-- Seção 2: Categoria e Configurações -->
                        <div class="form-section mt-4">
                            <h3 class="section-title"><i class="fa fa-cog"></i> Categoria e Configurações</h3>
                            <div class="ln_solid"></div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align" for="pro_cat_id">
                                            Categoria <span class="required">*</span>
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <select class="form-control @error('pro_cat_id') is-invalid @enderror" 
                                                    name="pro_cat_id" 
                                                    id="pro_cat_id"
                                                    required>
                                                <option value="">Selecione uma categoria</option>
                                                @foreach($categories as $category)
                                                <option value="{{ $category->cat_id }}" 
                                                    {{ old('pro_cat_id') == $category->cat_id ? 'selected' : '' }}>
                                                    {{ $category->cat_description_pt }} ({{ $category->cat_type }})
                                                </option>
                                                @endforeach
                                            </select>
                                            @error('pro_cat_id')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align" for="pro_type">
                                            Tipo de Comida
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <select class="form-control @error('pro_type') is-invalid @enderror" 
                                                    name="pro_type" 
                                                    id="pro_type">
                                                <option value="Normal" {{ old('pro_type', 'Normal') == 'Normal' ? 'selected' : '' }}>Normal</option>
                                                <option value="Vegetariano" {{ old('pro_type') == 'Vegetariano' ? 'selected' : '' }}>Vegetariano</option>
                                            </select>
                                            @error('pro_type')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align" for="pro_country_code">
                                            País
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <select class="form-control @error('pro_country_code') is-invalid @enderror"
                                                    name="pro_country_code"
                                                    id="pro_country_code">

                                                <option value="">Todos os Países</option>

                                                <option value="PT" {{ old('pro_country_code', 'PT') === 'PT' ? 'selected' : '' }}>
                                                    Portugal
                                                </option>

                                                <option value="ES" {{ old('pro_country_code', 'PT') === 'ES' ? 'selected' : '' }}>
                                                    Espanha
                                                </option>

                                                <option value="FR" {{ old('pro_country_code', 'PT') === 'FR' ? 'selected' : '' }}>
                                                    França
                                                </option>

                                                <option value="EN" {{ old('pro_country_code', 'PT') === 'EN' ? 'selected' : '' }}>
                                                    Inglaterra
                                                </option>

                                            </select>
                                            @error('pro_country_code')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align" for="pro_country_code">
                                            Taxa de IVA
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <select class="form-control @error('vat_rate') is-invalid @enderror" 
                                                    name="vat_rate" 
                                                    id="vat_rate">
                                                <option value="">Selecione a taxa de IVA</option>
                                                @foreach($vatRates as $vatRate)
                                                    <option value="{{ $vatRate->vat_id }}" {{ old('vat_rate', $defaultVat) == $vatRate->vat_id ? 'selected' : '' }}>{{ number_format($vatRate->vat_rate, 0)."% - ". $vatRate->vat_code }}</option>
                                                @endforeach
                                            </select>
                                            @error('pro_country_code')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">&nbsp;</div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align">
                                            Visibilidade
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" 
                                                           id="pro_visible" 
                                                           name="pro_visible" 
                                                           value="1"
                                                           {{ old('pro_visible', true) ? 'checked' : '' }}
                                                           class="flat">
                                                    Pack visível no site
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Se desmarcado, este pack não será exibido aos clientes
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        <label class="col-form-label col-md-6 col-sm-6 label-align">
                                            Destaque
                                        </label>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" 
                                                           id="pro_highlight" 
                                                           name="pro_highlight" 
                                                           value="1"
                                                           {{ old('pro_highlight', false) ? 'checked' : '' }}
                                                           class="flat">
                                                    Pack em destaque
                                                </label>
                                            </div>
                                            <small class="form-text text-muted">
                                                Destacar este pack nas listagens
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Seção 3: Preços por Tipo de Refeição -->
                        @if($typeMeals->count() > 0)
                        <div class="form-section mt-4">
                            <h3 class="section-title"><i class="fa fa-euro"></i> Preços por Tipo de Refeição</h3>
                            <p class="text-muted">Defina os preços e número de embalagens para cada tipo de refeição</p>
                            <div class="ln_solid"></div>

                            <!-- Cabeçalho das colunas para melhor visualização -->
                            <div class="row mb-2">
                                <div class="col-md-3 col-sm-3"></div>
                                <div class="col-md-9 col-sm-9">
                                    <div class="row">
                                        <div class="col-md-2 text-center text-muted">
                                            <small><i class="fa fa-power-off"></i> Ativo</small>
                                        </div>
                                        <div class="col-md-3 text-center text-muted">
                                            <small><i class="fa fa-euro"></i> Preço (€)</small>
                                        </div>
                                        <div class="col-md-3 text-center text-muted">
                                            <small><i class="fa fa-cube"></i> Embalagens</small>
                                        </div>
                                        <div class="col-md-4"></div>
                                    </div>
                                </div>
                            </div>

                            @foreach($typeMeals as $typeMeal)
                                @php
                                    $oldTypeMeals = old('typeMeal', []);
                                    $isChecked = in_array($typeMeal->typ_id, $oldTypeMeals);
                                @endphp

                                <div class="form-group row type-meal-row" data-type-id="{{ $typeMeal->typ_id }}">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align"
                                           for="pro_cost_{{ $typeMeal->typ_id }}"
                                           style="margin-top: 18px !important;">
                                        {{ $typeMeal->typ_description_pt }}
                                    </label>

                                    <div class="col-md-9 col-sm-9">
                                        <div class="row align-items-center">

                                            <!-- Checkbox -->
                                            <div class="col-md-2">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox"
                                                               class="js-switch type-meal-checkbox"
                                                               name="typeMeal[]"
                                                               value="{{ $typeMeal->typ_id }}"
                                                               id="typeMeal_{{ $typeMeal->typ_id }}"
                                                               data-type-id="{{ $typeMeal->typ_id }}"
                                                               {{ $isChecked ? 'checked' : '' }}>
                                                        <span style="margin-left: 8px;">Ativar</span>
                                                    </label>
                                                </div>
                                            </div>

                                            <!-- Preço -->
                                            <div class="col-md-3" style="margin-top: 12px !important;">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-euro"></i>
                                                    </span>
                                                    <input type="number"
                                                           class="form-control type-meal-price"
                                                           name="prices[{{ $typeMeal->typ_id }}]"
                                                           id="pro_cost_{{ $typeMeal->typ_id }}"
                                                           placeholder="0.00"
                                                           min="0"
                                                           step="0.01"
                                                           value="{{ old('prices.' . $typeMeal->typ_id, '0.00') }}"
                                                           {{ $isChecked ? '' : 'disabled' }}
                                                           style="text-align: right;">
                                                </div>
                                                <small class="form-text text-muted">Preço unitário</small>
                                            </div>

                                            <!-- Número de Embalagens -->
                                            <div class="col-md-3" style="margin-top: 12px !important;">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-cube"></i>
                                                    </span>
                                                    <input type="number"
                                                           class="form-control type-meal-packages"
                                                           name="packages[{{ $typeMeal->typ_id }}]"
                                                           id="pro_packages_{{ $typeMeal->typ_id }}"
                                                           placeholder="0"
                                                           min="1"
                                                           step="1"
                                                           value="{{ old('packages.' . $typeMeal->typ_id, '1') }}"
                                                           {{ $isChecked ? '' : 'disabled' }}
                                                           style="text-align: right;">
                                                </div>
                                                <small class="form-text text-muted">Nº de embalagens</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                        @endif
                        

                        <!-- Seção 4: Imagem do Pack -->
                        <div class="form-section mt-4">
                            <h3 class="section-title"><i class="fa fa-image"></i> Imagem do Pack</h3>
                            <div class="ln_solid"></div>

                            <div class="form-group row">
                                <label class="col-form-label col-md-3 col-sm-3 label-align">
                                    Imagem do Pack <span class="required">*</span>
                                </label>
                                <div class="col-md-8 col-sm-8">
                                    <div class="dropzone-area">
                                        <input type="hidden" id="folder-1" value="product">
                                        <input type="hidden" id="width-1" value="{{ $productWidth ?? 800 }}">
                                        <input type="hidden" id="height-1" value="{{ $productHeight ?? 600 }}">
                                        <input type="hidden" id="numberOfFiles-1" value="1">
                                        <input type="hidden" id="imgName-1" name="pro_img">
                                        <input type="hidden" id="linkToAdministration-1" value="{{ $adminPage }}">
                                        <div class="dropzone" id="dropzone1" data-form-id="1" style="border: 1px dashed #ccc; padding: 20px; text-align: center; background: #f9f9f9;">
                                            <i class="fa fa-cloud-upload-alt fa-3x mb-2 upload-icon" style="color: #ccc;"></i>
                                        </div>
                                        <div class="mt-3">
                                            <small class="form-text text-muted">
                                                <strong>Dimensões recomendadas:</strong> {{ $productWidth ?? 800 }} x {{ $productHeight ?? 600 }} px
                                            </small>
                                            <small class="form-text text-muted">
                                                <strong>Formatos aceites:</strong> JPG, PNG, WebP
                                            </small>
                                            <small class="form-text text-muted">
                                                <strong>Tamanho máximo:</strong> 5MB
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Form Footer -->
                        <div class="ln_solid"></div>
                        <div class="form-group row">
                            <div class="col-md-6 col-sm-6 offset-md-3">
                                <a href="{{ route('admin.packs.index') }}" class="btn btn-secondary">
                                    <i class="fa fa-times"></i> Cancelar
                                </a>
                                <button type="reset" class="btn btn-warning">
                                    <i class="fa fa-eraser"></i> Limpar
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save"></i> Criar Pack
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .form-section {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        border-left: 4px solid #2A3F54;
    }
    
    .section-title {
        color: #2A3F54;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .ln_solid {
        border-top: 1px solid #e5e5e5;
        margin: 15px 0;
    }
    
    .required {
        color: #E74C3C;
    }
    
    .checkbox label {
        padding-left: 0;
        cursor: pointer;
    }
    
    .checkbox input[type="checkbox"] {
        margin-right: 5px;
    }
    
    .dropzone-area {
        background-color: #fff;
        border-radius: 6px;
        padding: 15px;
    }
    
    .dropzone:hover {
        border-color: #2A3F54;
        cursor: pointer;
        background: #f0f7ff;
    }
    
    .upload-icon {
        transition: color 0.3s;
    }
    
    .dropzone:hover .upload-icon {
        color: #2A3F54;
    }
    
    .input-group-addon {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-right: 0;
        border-radius: 4px 0 0 4px;
        padding: 6px 12px;
        color: #495057;
    }
    
    .type-meal-price {
        border-left: 0;
    }
    
    .form-text.text-muted {
        font-size: 12px;
        margin-top: 5px;
    }
    
    /* Estilo para checkboxes flat */
    .flat {
        position: relative;
        cursor: pointer;
    }
    
    .flat:checked {
        background-color: #2A3F54;
        border-color: #2A3F54;
    }
    
    /* Ajuste para input groups com checkboxes */
    .row.align-items-center {
        min-height: 34px;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Ativar/desativar campos de preço quando checkbox é alterado
    $('.type-meal-checkbox').change(function() {
        var typeId = $(this).data('type-id');
        var priceField = $('#pro_cost_' + typeId);
        var packagesField = $('#pro_packages_' + typeId);
        var row = $(this).closest('.form-group');
        
        if ($(this).is(':checked')) {
            // Ativar campos
            priceField.prop('disabled', false);
            packagesField.prop('disabled', false);
            
            // Focar no campo de preço
            priceField.focus();
            
            // Destacar a linha
            row.addClass('bg-light-success');
        } else {
            // Desativar campos
            priceField.prop('disabled', true);
            packagesField.prop('disabled', true);
            
            // Valores padrão quando desativado
            priceField.val('0.00');
            packagesField.val('1');
            
            // Remover destaque da linha
            row.removeClass('bg-light-success');
        }
    });

    // Formatação de números (preços)
    $('.type-meal-price').on('blur', function() {
        var value = parseFloat($(this).val());
        if (isNaN(value) || value < 0) {
            $(this).val('0.00');
        } else {
            $(this).val(value.toFixed(2));
        }
    });
    
    // Validar valores mínimos
    $('#pro_packages_').each(function() {
        $(this).on('input', function() {
            var value = parseInt($(this).val());
            if (value < 0 || isNaN(value)) {
                $(this).val(0);
            }
        });
    });

    // Validação do formulário com toast
    $('#formCreatePack').on('submit', function(e) {
        var hasImage = $('#imgName-1').val();
        var hasCategory = $('#pro_cat_id').val();
        var hasName = $('#pro_description_pt').val().trim();

        // Array para armazenar erros
        var errors = [];

        if (!hasImage) {
            errors.push('Por favor, carregue uma imagem para o pack.');
        }

        if (!hasCategory) {
            errors.push('Por favor, selecione uma categoria.');
        }

        if (!hasName) {
            errors.push('Por favor, preencha o nome do pack em português.');
        }

        // Validar que pelo menos um tipo de refeição está selecionado com preço > 0
        if ($('.type-meal-checkbox').length > 0) {
            var hasValidPrice = false;
            var hasValidPackages = false;
            var invalidPackages = [];

            $('.type-meal-checkbox:checked').each(function() {
                var typeId = $(this).data('type-id');
                var price = parseFloat($('#pro_cost_' + typeId).val());
                var packages = parseInt($('#pro_packages_' + typeId).val());

                // Validar preço
                if (price > 0) {
                    hasValidPrice = true;
                }

                // Validar número de embalagens
                if (packages > 0) {
                    hasValidPackages = true;
                } else {
                    // Guardar tipos com embalagens inválidas
                    var typeName = $(this).closest('.form-group').find('.label-align').text().trim();
                    invalidPackages.push(typeName);
                }
            });

            if (!hasValidPrice) {
                errors.push('Por favor, defina pelo menos um preço maior que 0€ para um tipo de refeição.');
            }

            if (!hasValidPackages) {
                errors.push('Por favor, defina pelo menos 1 embalagem para cada tipo de refeição ativo.');
            } else if (invalidPackages.length > 0) {
                // Se alguns tipos têm embalagens inválidas
                var packageError = 'Os seguintes tipos de refeição precisam de pelo menos 1 embalagem:<br>';
                packageError += '<ul style="margin: 5px 0 0 20px;">';
                invalidPackages.forEach(function(type) {
                    packageError += '<li>' + type + '</li>';
                });
                packageError += '</ul>';
                errors.push(packageError);
            }

            // Validar se há pelo menos um tipo ativo
            if ($('.type-meal-checkbox:checked').length === 0) {
                errors.push('Por favor, ative pelo menos um tipo de refeição.');
            }
        } else {
            // Se não há tipos de refeição definidos
            errors.push('Não existem tipos de refeição configurados. Por favor, contacte o administrador.');
        }

        // Se houver erros, mostrar toast e prevenir submit
        if (errors.length > 0) {
            e.preventDefault();

            // Mostrar todos os erros em um único toast
            if (errors.length === 1) {
                // Um único erro
                if (errors[0].includes('<ul>')) {
                    // Se o erro já contém HTML (como o de embalagens)
                    toast.error(errors[0], 'Erro de Validação', 8000);
                } else {
                    // Erro simples
                    toast.error(errors[0], 'Erro de Validação', 6000);
                }
            } else {
                // Múltiplos erros - criar lista HTML
                var errorList = '<ul style="margin: 0; padding-left: 20px; text-align: left;">';
                errors.forEach(function(error) {
                    if (error.includes('<ul>')) {
                        // Se o erro já contém HTML, adicionar como está
                        errorList += '<li style="margin-bottom: 8px;">' + error + '</li>';
                    } else {
                        errorList += '<li style="margin-bottom: 8px;">' + error + '</li>';
                    }
                });
                errorList += '</ul>';

                toast.error(errorList, 'Erros de Validação (' + errors.length + ')', 10000);
            }

            // Scroll para o topo do formulário para mostrar os erros
            $('html, body').animate({
                scrollTop: $('.form-section').first().offset().top - 100
            }, 500);

            return false;
        }
    });

    // Auto-focus no primeiro campo
    $('#pro_description_pt').focus();  
    
    document.querySelectorAll('.type-meal-checkbox').forEach(cb => {
        const typeId = cb.dataset.typeId;
        const priceInput = document.getElementById('pro_cost_' + typeId);

        if (cb.checked) {
            priceInput.removeAttribute('disabled');
        }
    });
});
</script>
@endpush