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

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fas fa-shopping-cart"></i> Criar Nova Encomenda</h1>
            <p class="text-muted">Selecione os produtos e preencha os dados do cliente</p>
        </div>
        <div class="title_right">
            <div class="pull-right">
                <a href="{{ route('admin.orders.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.orders.index') }}">Encomendas</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Criar Nova</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-success 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-check-circle"></i> Sucesso!</strong> {{ session('success') }}
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="row">
        <div class="col-md-12">
            <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> {{ session('error') }}
            </div>
        </div>
    </div>
    @endif

    @if($errors->any())
    <div class="row">
        <div class="col-md-12">
            <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>
        </div>
    </div>
    @endif

    <!-- Main Content - Formulário em 3 colunas -->
    <div class="row">
        <!-- Coluna 1: Seleção de Pack -->
        <div class="col-md-3 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-cube"></i> Pack</h3>
                    <small>Selecione o Pack</small>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form id="packSelectionForm">
                        <div class="form-group">
                            @foreach($packs as $pack)
                            <div class="radio">
                                <label>
                                    <input type="radio"
                                           class="flat pack-select"
                                           name="pack_id"
                                           value="{{ $pack->pro_id }}"
                                           data-qtmeals="{{ $pack->category->cat_qtmeals }}"
                                           {{ $loop->first ? 'checked' : '' }}>

                                    &nbsp;&nbsp;&nbsp;{{ $pack->pro_description_pt }}

                                    <span class="badge badge-info float-right">
                                        {{ $pack->category->cat_qtmeals }} refeições
                                    </span>
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </form>

                </div>
            </div>

            <!-- Coluna 1: Tipo de Refeição -->
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-utensils"></i> Tipo de Refeição</h3>
                    <small>Selecione o tipo de ementa</small>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="form-group" id="type-meals-container">
                        @foreach($typeMeals as $typeMeal)
                        <div class="radio">
                            <label>
                                <input type="radio" 
                                       class="flat type-meal-select" 
                                       name="type_meal_id" 
                                       value="{{ $typeMeal->typ_id }}"
                                       {{ $loop->first ? 'checked' : '' }}>
                                &nbsp;&nbsp;&nbsp;{{ $typeMeal->typ_description_pt }}
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Coluna 2: Seleção de Pratos -->
        <div class="col-md-6 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-concierge-bell"></i> Pratos</h3>
                    <small>Selecione os pratos para a encomenda</small>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form id="dishSelectionForm" action="{{ route('admin.orders.add-to-cart') }}" method="POST">
                        @csrf
                        <input type="hidden" name="pack_id" id="form_pack_id" value="{{ $packs->first()->cat_id ?? '' }}">
                        <input type="hidden" name="type_meal_id" id="form_type_meal_id" value="{{ $typeMeals->first()->typ_id ?? '' }}">
                        <input type="hidden" name="required_dishes" id="required_dishes" value="{{ optional($packs->first()->category)->cat_qtmeals ?? 0 }}">
                        
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th style="width: 40px;">Imagem</th>
                                        <th>Nome do Prato</th>
                                        <th style="width: 120px; text-align: center;">Quantidade</th>
                                    </tr>
                                </thead>
                                <tbody id="dishes-container">
                                    @php
                                        $normalIndex = 0;
                                        $veggieIndex = 0;
                                    @endphp

                                    @foreach($dishes as $dish)
                                        @php
                                            if ($dish->dsh_type == 0) {
                                                $normalIndex++;
                                                $imagePrefix = 'f';
                                                $displayIndex = $normalIndex;
                                            } else {
                                                $veggieIndex++;
                                                $imagePrefix = 'v';
                                                $displayIndex = $veggieIndex;
                                            }
                                        @endphp

                                        <tr class="dish-row" data-type="{{ $dish->dsh_type }}">
                                            <td>
                                                <img src="{{ asset('images/dish/' . $imagePrefix . $displayIndex . '.png') }}" 
                                                     alt="{{ $dish->dsh_name_pt }}" 
                                                     width="50" 
                                                     style="border-radius: 3px;">
                                            </td>
                                        <td>
                                            <input type="hidden" name="dish_ids[]" value="{{ $dish->dsh_id }}">
                                            <strong>{{ $dish->dsh_name_pt }}</strong>
                                            @if($dish->dsh_desc_pt)
                                            <br><small class="text-muted">{{ Str::limit($dish->dsh_desc_pt, 50) }}</small>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="quantity">
                                                <input type="number" 
                                                       name="quantities[]" 
                                                       class="form-control qty-input dish-quantity" 
                                                       value="0" 
                                                       min="0" 
                                                       max="99"
                                                       data-dish-id="{{ $dish->dsh_id }}"
                                                       style="text-align: center; width: 70px;">
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Contador de Pratos -->
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <div class="alert alert-warning information" id="dish-counter-alert">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="fa fa-info-circle"></i>
                                            <span id="selected-count">0</span> de 
                                            <span id="required-count">{{ $packs->first()->cat_qtmeals ?? 0 }}</span> pratos selecionados
                                            <span id="selection-details" class="ml-2"></span>
                                        </div>
                                        <div>
                                            <span id="validation-message" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <!-- Linha extra para mostrar distribuição por tipo -->
                                    <div id="type-distribution" class="mt-2 small" style="display: none;">
                                        <span id="normal-count">0</span> normais | 
                                        <span id="vegetarian-count">0</span> vegetarianos
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ln_solid"></div>
                        <div class="form-group text-center">
                            <button type="reset" class="btn btn-primary" id="clear-dishes">
                                <i class="fa fa-eraser"></i> Limpar Seleção
                            </button>
                            <button type="submit" class="btn btn-success" id="add-to-cart-btn" disabled>
                                <i class="fa fa-cart-plus"></i> Adicionar ao Carrinho
                            </button>
                        </div>
                    </form>
                </div>
            </div>                        
        </div>

        <!-- Coluna 3: Informações do Cliente -->
        <div class="col-md-3 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-user"></i> Dados do Cliente</h3>
                    <small>Complete os dados de envio</small>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form id="customerForm" action="{{ route('admin.orders.checkout') }}" method="POST">
                        @csrf
                        <input type="hidden" id="customer_id" name="customer_id">
                        
                        <!-- Telefone com autocomplete -->
                        <div class="form-group">
                            <label for="customer_phone" class="text-green">Telefone *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_phone" 
                                   name="customer_phone"
                                   placeholder="Telefone"
                                   required>
                            <div id="phone-suggestions" class="list-group mt-2" style="display: none;"></div>
                        </div>

                        <!-- Email com autocomplete -->
                        <div class="form-group">
                            <label for="customer_email">Email *</label>
                            <input type="email" 
                                   class="form-control" 
                                   id="customer_email" 
                                   name="customer_email"
                                   placeholder="Email"
                                   required>
                            <div id="email-suggestions" class="list-group mt-2" style="display: none;"></div>
                        </div>

                        <div class="form-group">
                            <label for="customer_firstname">Nome *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_firstname" 
                                   name="customer_firstname"
                                   placeholder="Nome"
                                   required>
                        </div>

                        <div class="form-group">
                            <label for="customer_lastname">Apelido *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_lastname" 
                                   name="customer_lastname"
                                   placeholder="Apelido"
                                   required>
                        </div>

                        <div class="form-group">
                            <label for="customer_nif">NIF</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_nif" 
                                   name="customer_nif"
                                   placeholder="NIF">
                        </div>

                        <div class="form-group">
                            <label for="customer_company">Empresa</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_company" 
                                   name="customer_company"
                                   placeholder="Nome da Empresa">
                        </div>

                        <div class="form-group">
                            <label for="customer_address1">Endereço *</label>
                            <input type="text" 
                                   class="form-control mb-2" 
                                   id="customer_address1" 
                                   name="customer_address1"
                                   placeholder="Endereço da Rua"
                                   required>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_address2" 
                                   name="customer_address2"
                                   placeholder="Apartamento, suíte, etc.">
                        </div>

                        <div class="form-group">
                            <label for="customer_city">Cidade *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_city" 
                                   name="customer_city"
                                   placeholder="Cidade"
                                   required>
                        </div>

                        <div class="form-group">
                            <label for="customer_zipcode">Código Postal *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_zipcode" 
                                   name="customer_zipcode"
                                   placeholder="Código Postal"
                                   required>
                        </div>
                        
                        <div class="form-group">
                            <label for="customer_city">Distrito *</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="customer_district" 
                                   name="customer_district"
                                   placeholder="Distrito"
                                   required>
                        </div>

                        <div class="form-group">
                            <label for="customer_country">País *</label>
                            <select class="form-control" 
                                    id="customer_country" 
                                    name="customer_country"
                                    required>
                                <option value="">Selecione o país...</option>
                                @foreach($countries as $code => $name)
                                <option value="{{ $code }}" {{ $code == 'PT' ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="order_notes">Notas da Encomenda</label>
                            <textarea class="form-control" 
                                      id="order_notes" 
                                      name="order_notes" 
                                      rows="3"
                                      placeholder="Notas especiais para a entrega..."></textarea>
                        </div>

                        <!-- Opções Adicionais -->
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" 
                                           id="create_invoice" 
                                           name="create_invoice" 
                                           value="1" class="js-switch">
                                    Criar Fatura
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" 
                                           id="zero_value_order" 
                                           name="zero_value_order" 
                                           value="1" class="js-switch">
                                    Encomenda sem valor (0.00€)
                                </label>
                            </div>
                        </div>

                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <button type="reset" class="btn btn-primary">
                                <i class="fa fa-eraser"></i> Limpar
                            </button>
                            <button type="submit" 
                                    class="btn btn-success float-right" 
                                    id="create-order-btn"
                                    {{ !session('cart') ? 'disabled' : '' }}>
                                <i class="fa fa-check"></i> Criar Encomenda
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">        
        <div class="col-md-12">
            <!-- Carrinho Atual -->
            <div class="x_panel" id="current-cart" style="display:none;">
                <div class="x_title">
                    <h3><i class="fa fa-shopping-cart"></i> Carrinho Atual <span id="cart-count"></span></h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="padding: 0;">
                    <div class="table-responsive" style="width: 100%; margin: 0;">
                        <table class="table table-striped" style="width: 100%; margin-bottom: 0;">
                            <colgroup>
                                <col style="width: 55%;"> <!-- Produto -->
                                <col style="width: 15%;"> <!-- Quantidade -->
                                <col style="width: 10%;"> <!-- Preço Unit. -->
                                <col style="width: 10%;"> <!-- Total -->
                                <col style="width: 10%;"> <!-- Ações -->
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style="padding-left: 20px;">Produto</th>
                                    <th class="text-center">Quantidade</th>
                                    <th class="text-center">Preço Unit.</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center">Ações</th>
                                </tr>
                            </thead>
                            <tbody id="cart-content">
                                <tr>
                                    <td colspan="5" class="text-center text-muted">Carrinho vazio</td>
                                </tr>
                            </tbody>

                            <tfoot id="cart-footer"></tfoot>
                        </table>
                    </div>
                    <div class="text-right" style="padding: 15px 20px; border-top: 1px solid #e5e5e5;">
                        <button id="clear-cart-btn"
                                type="button"
                                class="btn btn-warning btn-sm">
                            <i class="fa fa-trash-alt"></i> Limpar Carrinho
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Resumo da Encomenda -->
    <div class="modal fade" id="orderSummaryModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-receipt"></i> Resumo da Encomenda</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="order-summary-content">
                    <!-- Conteúdo será carregado via AJAX -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Voltar</button>
                    <button type="button" class="btn btn-primary" id="confirm-order">Confirmar Encomenda</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal para Opções do Pack -->
    <div class="modal fade" id="packOptionsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-cubes"></i> Pack Idêntico Encontrado</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="pack-options-content">
                    <!-- Conteúdo será carregado dinamicamente -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="confirm-pack-option">Continuar</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal de Confirmação Genérico -->
    <div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header" id="confirmationModalHeader">
                    <h5 class="modal-title" id="confirmationModalTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="confirmationModalBody">
                    <p id="confirmationMessage"></p>
                    <div id="confirmationDetails" class="mt-3" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" id="confirmationModalCancel">
                        <i class="fa fa-times"></i> Cancelar
                    </button>
                    <button type="button" class="btn" id="confirmationModalConfirm">
                        <!-- Ícone será definido dinamicamente -->
                    </button>
                </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;
    }
    
    .qty-input {
        text-align: center;
        max-width: 100px;
    }
    
    .dish-row {
        transition: background-color 0.3s;
    }
    
    .dish-row:hover {
        background-color: #f5f5f5;
    }
    
    #dish-counter-alert {
        margin-bottom: 0;
    }
    
    .list-group-item {
        cursor: pointer;
    }
    
    .list-group-item:hover {
        background-color: #f8f9fa;
    }
    
    /* Estilo para checkboxes flat */
    .flat {
        position: relative;
        cursor: pointer;
    }
    
    /* Destaque para linhas válidas/inválidas */
    .valid-selection {
        background-color: #d4edda !important;
    }
    
    .invalid-selection {
        background-color: #f8d7da !important;
    }
    
    /* Badges personalizados */
    .badge-info {
        background-color: #17a2b8;
        margin-left: 10px;
        margin-top: 3px;
    }
    
    /* Ajustes para tabelas */
    .table th {
        font-weight: 600;
        background-color: #f8f9fa;
    }
    
    /* Estilo para botões desabilitados */
    .btn:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }
    
    #dish-counter-alert {
    transition: all 0.3s ease;
    margin-bottom: 10px !important;
}

#selection-details {
    font-weight: 500;
}

#type-distribution {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 5px;
    margin-top: 5px;
}

/* Cores para diferentes estados */
.alert-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
    color: #000;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;    
    color: #000;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;    
    color: #000;
}

.text-green{
    color: #008001;
}    
    
    /* Em um arquivo CSS separado */
.order-create-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

.cart-item-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.customer-suggestion {
    transition: all 0.2s ease;
}

.customer-suggestion:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.qty-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Animações */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.x_panel {
    animation: slideIn 0.3s ease-out;
}

/* Responsividade */
@media (max-width: 768px) {
    .col-md-3, .col-md-6 {
        margin-bottom: 20px;
    }
    
    .qty-input {
        max-width: 60px;
    }
}

/* Estilo para as opções do modal */
.options-list .radio label {
    transition: all 0.2s ease;
    border: 2px solid #dee2e6 !important;
}

.options-list .radio label:hover {
    border-color: #007bff !important;
    background-color: #f8f9fa;
}

.options-list .radio input:checked + strong {
    color: #007bff;
}

.options-list .radio input:checked ~ label {
    border-color: #007bff !important;
    background-color: #e7f3ff;
}

/* Estilo específico para labels com input */
.options-list label {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}        
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Variáveis globais
    let selectedDishes = 0;
    let requiredDishes = parseInt($('#required_dishes').val());
    let dishQuantities = {};
    let normalCount = 0;
    let vegetarianCount = 0; 
    let currentCarpId = null;
    let cartItems = false;
    
    function handleAjaxError(xhr) {
        if (xhr.status === 422 && xhr.responseJSON?.errors) {
            const errors = xhr.responseJSON.errors;

            Object.values(errors).forEach(messages => {
                messages.forEach(msg => {
                    toast.error(msg, 'Erro de validação', 5000);
                });
            });

            return;
        }

        if (xhr.responseJSON?.message) {
            toast.error(xhr.responseJSON.message, 'Erro', 5000);
        } else {
            toast.error('Ocorreu um erro inesperado.', 'Erro', 5000);
        }
    }
    
    // Função atualizada para contar pratos
    function updateDishCounter() {
        $('#selected-count').text(selectedDishes);
        $('#required-count').text(requiredDishes);

        // Atualizar contagem por tipo
        $('#normal-count').text(normalCount);
        $('#vegetarian-count').text(vegetarianCount);

        // Mostrar/ocultar distribuição
        if (normalCount > 0 || vegetarianCount > 0) {
            $('#type-distribution').show();
        } else {
            $('#type-distribution').hide();
        }

        // Mensagem de validação
        let message = '';
        let alertClass = 'alert-warning';
        
        if (selectedDishes === 0) {
            message = 'Selecione os pratos para continuar';
            $('#selection-details').html('<span class="text-muted">Nenhum prato selecionado</span>');
        } else if (selectedDishes < requiredDishes) {
            message = `Faltam ${requiredDishes - selectedDishes} pratos`;
            $('#selection-details').html(`<span class="text-warning">✗ Precisa de mais ${requiredDishes - selectedDishes}</span>`);
        } else if (selectedDishes > requiredDishes) {
            message = `Excesso de ${selectedDishes - requiredDishes} pratos`;
            $('#selection-details').html(`<span class="text-danger">✗ ${selectedDishes - requiredDishes} a mais</span>`);
        } else {
            message = 'Seleção completa ✓';
            alertClass = 'alert-success';
            $('#selection-details').html('<span class="text-success">✓ Quantidade correta</span>');
        }

        $('#validation-message').text(message);
        $('#dish-counter-alert').removeClass('alert-warning alert-success alert-danger').addClass(alertClass);

        // Ativar/desativar botão
        $('#add-to-cart-btn').prop('disabled', selectedDishes !== requiredDishes);
    }
    
    // Atualizar seleção de pack
    $('.pack-select').on('change', function() {
        const packId = $(this).val();
        const qtMeals = $(this).data('qtmeals');

        $('#form_pack_id').val(packId);
        $('#required_dishes').val(qtMeals);
        requiredDishes = qtMeals;

        // Resetar todas as quantidades
        $('.dish-quantity').val(0);
        selectedDishes = 0;
        normalCount = 0;
        vegetarianCount = 0;
        dishQuantities = {};

        updateDishCounter();
    });
    
    // Controle de quantidades de pratos
    $('.dish-quantity').on('input', function() {
        const dishId = $(this).data('dish-id');
        const quantity = parseInt($(this).val()) || 0;
        const oldQuantity = dishQuantities[dishId] || 0;
        const dishType = $(this).closest('.dish-row').data('type');

        // Atualizar contador total
        selectedDishes += (quantity - oldQuantity);
        dishQuantities[dishId] = quantity;

        // Atualizar contador por tipo
        if (dishType === 0) {
            normalCount += (quantity - oldQuantity);
        } else {
            vegetarianCount += (quantity - oldQuantity);
        }

        // Atualizar interface
        updateDishCounter();
    });
    
    // Limpar seleção de pratos
    $('#clear-dishes').on('click', function(e) {
        e.preventDefault();
        resetDishSelection();
    });
    
    // Função para adicionar item ao carrinho (AJAX)
    $('#dishSelectionForm').on('submit', function(e) {
        e.preventDefault();

        if (selectedDishes !== requiredDishes) {
            toast.warning(`Por favor, selecione exatamente ${requiredDishes} pratos. Atualmente selecionou ${selectedDishes}.`, 'Atenção', 6000);
            return false;
        }

        // Coletar dados do form
        const formData = $(this).serializeArray();
        const packId = $('.pack-select:checked').val();
        const typeMealId = $('.type-meal-select:checked').val();
        
        if (!packId) {
            toast.error('Selecione um pack.', 'Erro', 3000);
            return;
        }

        if (!typeMealId) {
            toast.error('Selecione um tipo de refeição.', 'Erro', 3000);
            return;
        }

        // 🔥 INJETAR NO FORM DATA
        formData.push({ name: 'pack_id', value: packId });
        formData.push({ name: 'type_meal_id', value: typeMealId });

        // Verificar se já existe este pack idêntico no carrinho
        $.ajax({
            url: '{{ route("admin.orders.check-identical-cart-item") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                pack_id: packId,
                type_meal_id: typeMealId,
                dish_quantities: dishQuantities
            },
            success: function(response) {
                if (response.exists) {
                    // Perguntar se quer adicionar mais um ou modificar
                    showPackOptionsModal(response.carp_id, packId, typeMealId, dishQuantities, formData);
                } else {
                    // Adicionar novo item ao carrinho
                    addNewCartItem(formData);
                }
                
            }
        });
    });

    // Variável global para armazenar dados do modal
    let packModalData = {};

    // Modal para escolher opção quando pack idêntico existe
    function showPackOptionsModal(cartIndex, packId, typeMealId, dishQuantities, formData) {
        // Armazenar dados para uso posterior
        packModalData = {
            cartIndex: cartIndex,
            formData: formData
        };
        
        currentCarpId = cartIndex;

        const modalContent = `
            <div class="alert alert-info mb-3">
                <p><i class="fa fa-info-circle"></i> Já tem este pack no carrinho com as mesmas refeições.</p>
            </div>

            <div class="form-group">
                <label><strong>O que pretende fazer?</strong></label>
                <div class="options-list">
                    <div class="radio mb-2">
                        <label class="d-block p-3 border rounded" style="cursor: pointer;">
                            <input type="radio" name="pack_option" value="add_another" checked>
                            <strong class="ml-2">Adicionar mais uma unidade</strong><br>
                            <small class="ml-4 text-muted">Mantém o pack existente e adiciona outro igual</small>
                        </label>
                    </div>
                    <div class="radio mb-2">
                        <label class="d-block p-3 border rounded" style="cursor: pointer;">
                            <input type="radio" name="pack_option" value="modify_existing">
                            <strong class="ml-2">Modificar o pack existente</strong><br>
                            <small class="ml-4 text-muted">Substitui a quantidade do pack existente</small>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group" id="pack-quantity-modify" style="display: none;">
                <label>Nova quantidade total:</label>
                <input type="number" id="new_quantity" class="form-control" min="1" max="99" value="2">
            </div>`;

        // Inserir conteúdo no modal
        $('#pack-options-content').html(modalContent);

        // Mostrar/esconder campo de quantidade
        $('input[name="pack_option"]').on('change', function() {
            if ($(this).val() === 'modify_existing') {
                $('#pack-quantity-modify').show();
            } else {
                $('#pack-quantity-modify').hide();
            }
        });

        // Clique em qualquer parte do label para selecionar radio
        $('.options-list label').on('click', function(e) {
            if (!$(e.target).is('input')) {
                $(this).find('input').prop('checked', true).trigger('change');
            }
        });

        // Mostrar modal
        $('#packOptionsModal').modal('show');
    }

    // Evento para botão do modal
    $(document).on('change', 'input[name="pack_option"]', function () {
        if ($(this).val() === 'modify_existing') {
            $('#pack-quantity-modify').slideDown(150);
        } else {
            $('#pack-quantity-modify').slideUp(150);
        }
    });

    // Funções para processar opção 
    $('#confirm-pack-option').on('click', function () { 
        const option = $('input[name="pack_option"]:checked').val();
        const newQuantity = parseInt($('#new_quantity').val() || 1);

        if (!option) {
            toast.warning('Selecione uma opção.');
            return;
        }
        
        switch (option) {

            case 'add_another':
                incrementCartItem(currentCarpId);
                break;

            case 'modify_existing':
                if (newQuantity < 1) {
                    toast.warning('Quantidade inválida.');
                    return;
                }
                setCartQuantity(currentCarpId, newQuantity);
                break;
        }
    });
    
    function incrementCartItem(carpId) {
        $.post({
            url: '{{ route("admin.orders.increment-cart-item") }}',
            data: {
                _token: '{{ csrf_token() }}',
                carp_id: carpId
            },
            success: function (res) {
                toast.success(res.message || 'Quantidade atualizada');
                loadCartSection();
                $('#packOptionsModal').modal('hide');
                resetDishSelection();
            }
        });
    }
    
    function setCartQuantity(carpId, quantity) {
        $.post({
            url: '{{ route("admin.orders.set-cart-quantity") }}',
            method: 'PATCH',
            data: {
                _token: '{{ csrf_token() }}',
                carp_id: carpId,
                quantity: quantity
            },
            success: function (res) {
                toast.success(res.message || 'Quantidade atualizada');
                loadCartSection();
                $('#packOptionsModal').modal('hide');
                resetDishSelection();
            }
        });
    }

    // Função para resetar seleção de pratos
    function resetDishSelection() {
        $('.dish-quantity').val(0);
        selectedDishes = 0;
        normalCount = 0;
        vegetarianCount = 0;
        dishQuantities = {};
        updateDishCounter();
    }

    // Processar a opção escolhida
    function processPackOption(option, cartIndex, newQuantity, formData) {
        switch(option) {
            case 'add_another':
                // Incrementar quantidade do item existente
                $.ajax({
                    url: '{{ route("admin.orders.increment-cart-item") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        cart_index: cartIndex
                    },
                    success: function(response) {
                        location.reload();
                    }
                });
                break;

            case 'modify_existing':
                // Modificar quantidade do item existente
                $.ajax({
                    url: '{{ route("admin.orders.update-cart-quantity") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        cart_index: cartIndex,
                        quantity: newQuantity
                    },
                    success: function(response) {
                        location.reload();
                    }
                });
                break;

            case 'add_new':
                // Adicionar como novo item (mesmo sendo idêntico)
                addNewCartItem(formData);
                break;
        }
    }

    // Função para adicionar novo item ao carrinho
    function addNewCartItem(formData) {
        $.ajax({
            url: '{{ route("admin.orders.add-to-cart") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },

            success: function (response) {
                if (response.success) {

                    // Reset UI
                    $('.dish-quantity').val(0);
                    selectedDishes = 0;
                    normalCount = 0;
                    vegetarianCount = 0;
                    dishQuantities = {};
                    updateDishCounter();

                    loadCartSection();
                    updateCreateOrderButton();

                    toast.success(response.message, 'Parabéns', 3000);

                } else {
                    toast.error(response.message, 'Erro!', 3000);
                }
            },

            error: function (xhr) {
                handleAjaxError(xhr);
            }
        });
    }
    
    // Remover produto do carrinho
    // Variável para armazenar callback
    let confirmationCallback = null;
    let confirmationData = null;
    // Configuração global para o modal de confirmação
    let confirmationConfig = {
        type: 'danger', // danger, warning, success, info
        title: '',
        message: '',
        details: '',
        confirmText: 'Confirmar',
        confirmIcon: 'fa-check',
        confirmClass: 'btn-primary',
        onConfirm: null,
        onCancel: null,
        data: null
    };

    // Função para mostrar modal de confirmação
    function showConfirmation(config) {
        // Mesclar com configurações padrão
        confirmationConfig = { ...confirmationConfig, ...config };

        // Configurar modal
        $('#confirmationModalTitle').html(confirmationConfig.title);
        $('#confirmationMessage').text(confirmationConfig.message);

        // Detalhes (se houver)
        if (confirmationConfig.details) {
            $('#confirmationDetails').html(confirmationConfig.details).show();
        } else {
            $('#confirmationDetails').hide();
        }

        // Configurar cabeçalho com base no tipo
        let headerClass = '';
        switch(confirmationConfig.type) {
            case 'danger':
                headerClass = 'bg-danger text-white';
                break;
            case 'warning':
                headerClass = 'bg-warning text-dark';
                break;
            case 'success':
                headerClass = 'bg-success text-white';
                break;
            case 'info':
                headerClass = 'bg-info text-white';
                break;
            default:
                headerClass = 'bg-primary text-white';
        }
        $('#confirmationModalHeader').removeClass().addClass(`modal-header ${headerClass}`);

        // Configurar botão de confirmação
        const $confirmBtn = $('#confirmationModalConfirm');
        $confirmBtn
            .removeClass()
            .addClass(`btn ${confirmationConfig.confirmClass}`)
            .html(`<i class="fa ${confirmationConfig.confirmIcon}"></i> ${confirmationConfig.confirmText}`);

        // Mostrar modal
        $('#confirmationModal').modal('show');
    }

    // Handler do botão confirmar
    $('#confirmationModalConfirm').on('click', function() {
        if (confirmationConfig.onConfirm) {
            confirmationConfig.onConfirm(confirmationConfig.data);
        }
        $('#confirmationModal').modal('hide');
    });

    // Handler do botão cancelar
    $('#confirmationModalCancel').on('click', function() {
        if (confirmationConfig.onCancel) {
            confirmationConfig.onCancel();
        }
    });

    // Reset quando modal fecha
    $('#confirmationModal').on('hidden.bs.modal', function() {
        confirmationConfig = {
            type: 'danger',
            title: '',
            message: '',
            details: '',
            confirmText: 'Confirmar',
            confirmIcon: 'fa-check',
            confirmClass: 'btn-primary',
            onConfirm: null,
            onCancel: null,
            data: null
        };
    });
    
    $(document).on('click', '#clear-cart-btn', function() {
        // Obter informações do carrinho
        const cartItems = {{ session('cart') ? count(session('cart')) : 0 }};
        const cartTotal = {{ session('cart_total') ?? 0 }};

        showConfirmation({
            type: 'danger',
            title: '<i class="fa fa-trash-alt"></i> Limpar Carrinho',
            message: 'Tem a certeza que deseja limpar todo o carrinho?',
            details: cartItems > 0 ? 
                `<div class="alert alert-warning small">
                    <i class="fa fa-exclamation-triangle"></i>
                    Esta ação irá remover <strong>${cartItems} item(s)</strong> 
                    no valor total de <strong>${cartTotal.toFixed(2)}€</strong>.
                </div>` : '',
            confirmText: 'Limpar Tudo',
            confirmIcon: 'fa-trash-alt',
            confirmClass: 'btn-danger',
            onConfirm: function() {
                $.ajax({
                    url: '{{ route("admin.orders.clear-cart") }}',
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // Mostrar mensagem de sucesso
                        if (window.toast && typeof toast.success === 'function') { 
                            toast.success(response.message || 'Carrinho limpo com sucesso', "Sucesso", 3000);
                        } 

                        // Atualizar UI
                        loadCartSection();
                        updateCreateOrderButton(false);
                    },
                    error: function() {
                        if (window.toast && typeof toast.error === 'function') {
                            toast.error('Erro ao limpar o carrinho.', 'Erro!', 3000);
                        } 
                    }
                });
            },
            onCancel: function() {
                // Opcional: alguma ação ao cancelar
                console.log('Limpeza do carrinho cancelada.');
            }
        });
    });
    
    $(document).on('click', '.btn-remove-item', function() {
        const carpId = $(this).data('carp-id');
        const itemName = $(this).data('item-name') || 'este item';

        if (!carpId) return;

        showConfirmation({
            type: 'danger',
            title: '<i class="fa fa-trash"></i> Remover Item',
            message: `Tem a certeza que deseja remover ${itemName} do carrinho?`,
            confirmText: 'Remover',
            confirmIcon: 'fa-trash',
            confirmClass: 'btn-danger',
            data: { carpId: carpId },
            onConfirm: function(data) {
                $.ajax({
                    url: '{{ route("admin.orders.remove-cart-item") }}',
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}',
                        carp_id: data.carpId
                    },
                    success: function(res) {
                        if (res.success) {
                            if (window.toast && typeof toast.success === 'function') {
                                toast.success(res.message, 'Sucesso', 4000);
                            } 
                            loadCartSection();
                        } else {
                            if (window.toast && typeof toast.error === 'function') {
                                toast.error('Não foi possível remover o item.', 'Erro', 5000);
                            } 
                        }
                    },
                    error: function() {
                        if (window.toast && typeof toast.error === 'function') {
                            toast.error('Erro ao remover item do carrinho.', 'Erro', 5000);
                        } 
                    }
                });
            }
        });
    });
    
    // Controlos de quantidade no carrinho
    $(document).on('click', '.btn-plus', function() {
        const index = $(this).data('index');
        updateCartQuantity(index, 1);
    });

    $(document).on('click', '.btn-minus', function() {
        const index = $(this).data('index');
        updateCartQuantity(index, -1);
    });

    // Atualizar quantidade via input
    $(document).on('change', '.cart-quantity', function() {
        const index = $(this).data('index');
        const quantity = parseInt($(this).val()) || 1;

        if (quantity < 1) {
            $(this).val(1);
            return;
        }

        $.ajax({
            url: '{{ route("admin.orders.set-cart-quantity") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                index: index,
                quantity: quantity
            },
            success: function() {
                location.reload();
            }
        });
    });

    // Duplicar item
    $(document).on('click', '.btn-duplicate', function() {
        const index = $(this).data('index');

        if (confirm('Duplicar este item no carrinho?')) {
            $.ajax({
                url: '{{ route("admin.orders.duplicate-cart-item") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    index: index
                },
                success: function() {
                    location.reload();
                }
            });
        }
    });

    function updateCartQuantity(index, change) {
        const $input = $(`.cart-quantity[data-index="${index}"]`);
        let quantity = parseInt($input.val()) || 1;
        quantity += change;

        if (quantity < 1) quantity = 1;
        if (quantity > 99) quantity = 99;

        $input.val(quantity).trigger('change');
    }

    // Função para verificar se item idêntico já existe
    function loadCartSection() { 
        $.ajax({
            url: '{{ route("admin.orders.cart-section") }}',
            method: 'GET',
            success: function (res) {
                $('#cart-content').html(res.rows_html);
                $('#cart-footer').html(res.footer_html);

                $('#current-cart').toggle(res.has_items);
                $('#create-order-btn').prop('disabled', !res.has_items);
            },
            error: function () {
                toast.error('Erro', 'Falha ao atualizar o carrinho.', 6000);
            }
        });
    }
    
    // Autocomplete para telefone
    $('#customer_phone').on('input', debounce(function (e) {

        const phone = e.target.value;

        if (typeof phone !== 'string' || phone.trim() === '') {
            $('#phone-suggestions').hide();
            return;
        }

        const search = phone.toLowerCase();

        if (search.length < 3) {
            $('#phone-suggestions').hide();
            return;
        }

        $.ajax({
            url: '{{ route("admin.orders.search-customer-by-phone") }}',
            method: 'GET',
            data: { phone: search },
            success: function (response) {
                const suggestions = $('#phone-suggestions');
                suggestions.empty();

                if (response.customers && response.customers.length > 0) {
                    response.customers.forEach(function (customer) {
                        suggestions.append(`
                            <a href="#" class="list-group-item list-group-item-action customer-suggestion"
                               data-id="${customer.id}"
                               data-firstname="${customer.firstname}"
                               data-lastname="${customer.lastname}"
                               data-email="${customer.email}"
                               data-company="${customer.company ?? ''}"
                               data-nif="${customer.nif ?? ''}"
                               data-phone="${customer.phone ?? ''}"
                               data-address1="${customer.address1 ?? ''}"
                               data-address2="${customer.address2 ?? ''}"
                               data-city="${customer.city ?? ''}"
                               data-zipcode="${customer.zipcode ?? ''}"
                               data-country="${customer.country ?? ''}"
                               data-district="${customer.district ?? ''}">
                                <strong>${customer.firstname} ${customer.lastname}</strong><br>
                                <small>${customer.phone} | ${customer.email}</small>
                            </a>
                        `);
                    });

                    suggestions.show();
                } else {
                    suggestions.hide();
                }
            }
        });

    }, 500));
    
    // Autocomplete para email
    $('#customer_email').on('input', debounce(function() {
        const email = $(e.target).val()?.trim();

        if (!email) return;

        // exemplo
        if (!email.includes('@')) return;
    
        if (email.length >= 3) {
            $.ajax({
                url: '{{ route("admin.orders.search-customer-by-email") }}',
                method: 'GET',
                data: { email: email },
                success: function(response) {
                    const suggestions = $('#email-suggestions');
                    suggestions.empty();
                    
                    if (response.customers && response.customers.length > 0) {
                        response.customers.forEach(function(customer) {
                            suggestions.append(`
                                <a href="#" class="list-group-item list-group-item-action customer-suggestion"
                                   data-id="${customer.id}"
                                   data-firstname="${customer.firstname}"
                                   data-lastname="${customer.lastname}"
                                   data-phone="${customer.phone}"
                                   data-company="${customer.company}"
                                   data-nif="${customer.nif}"
                                   data-address1="${customer.address1}"
                                   data-address2="${customer.address2}"
                                   data-city="${customer.city}"
                                   data-zipcode="${customer.zipcode}"
                                   data-country="${customer.country}">
                                   data-district="${customer.district}">
                                    <strong>${customer.firstname} ${customer.lastname}</strong><br>
                                    <small>${customer.phone} | ${customer.email}</small>
                                </a>
                            `);
                        });
                        suggestions.hide();
                    } else {
                        suggestions.hide();
                    }
                }
            });
        } else {
            $('#email-suggestions').hide();
        }
    }, 500));
    
    // Preencher formulário com dados do cliente
    $(document).on('click', '.customer-suggestion', function(e) {
        e.preventDefault();
        
        const $this = $(this);
        $('#customer_id').val($this.data('id'));
        $('#customer_firstname').val($this.data('firstname'));
        $('#customer_lastname').val($this.data('lastname'));
        $('#customer_email').val($this.data('email') || $('#customer_email').val());
        $('#customer_phone').val($this.data('phone') || $('#customer_phone').val());
        $('#customer_nif').val($this.data('nif'));
        $('#customer_company').val($this.data('company'));
        $('#customer_address1').val($this.data('address1'));
        $('#customer_address2').val($this.data('address2'));
        $('#customer_city').val($this.data('city'));
        $('#customer_district').val($this.data('district'));
        $('#customer_zipcode').val($this.data('zipcode'));
        $('#customer_country').val($this.data('country'));
        
        $('#phone-suggestions').hide();
        $('#email-suggestions').hide();
    });
    
    // Habilitar botão de criar encomenda se houver items no carrinho
    function updateCreateOrderButton() {
        $.ajax({
            url: '{{ route("admin.orders.cart-status") }}',
            method: 'GET',
            success: function (response) {
                $('#create-order-btn').prop('disabled', !response.has_items);

                if (response.has_items) {
                    $('#create-order-btn').prop('disabled', false);
                    $('#current-cart').show();
                } else {
                    $('#create-order-btn').prop('disabled', true);
                    $('#current-cart').hide();
                }
                
                cartItems = true;
            }
        });
    }
    
    // Inicializar
    updateCreateOrderButton();
    updateDishCounter();
    loadCartSection();
    
    // Mostrar resumo antes de criar encomenda
    // No botão de criar encomenda no formulário do cliente
    $('#customerForm').on('submit', function(e) {
        e.preventDefault();

        // 1. Validar formulário
        if (!validateCustomerForm()) {
            return;
        }

        // 2. Verificar se há items no carrinho
        if (!hasItemsInCart()) {
            showConfirmation({
                type: 'warning',
                title: '<i class="fa fa-shopping-cart"></i> Carrinho Vazio',
                message: 'Adicione pelo menos um item ao carrinho antes de criar a encomenda.',
                confirmText: 'OK',
                confirmIcon: 'fa-check',
                confirmClass: 'btn-primary',
                onConfirm: function() {
                    // Focar na seleção de pratos
                    $('html, body').animate({
                        scrollTop: $('#dishSelectionForm').offset().top - 100
                    }, 500);
                }
            });
            return;
        }

        // 3. Mostrar modal de resumo
        showOrderSummary();
    });

    // Função para mostrar resumo da encomenda
    function showOrderSummary() {
        // Mostrar loading no modal
        $('#order-summary-content').html(`
            <div class="text-center py-5">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="sr-only">A carregar...</span>
                </div>
                <p>A carregar resumo da encomenda...</p>
            </div>
        `);

        $('#orderSummaryModal').modal('show');

        // Carregar resumo via AJAX
        $.ajax({
            url: '{{ route("admin.orders.summary") }}',
            method: 'POST',
            data: $('#customerForm').serialize(),
            success: function(response) {
                $('#order-summary-content').html(response.html);

                // Configurar botão de confirmação
                $('#confirm-order').off('click').on('click', function() {
                    $('#orderSummaryModal').modal('hide');

                    // Mostrar confirmação final
                    showConfirmation({
                        type: 'success',
                        title: '<i class="fa fa-check-circle"></i> Confirmar Encomenda',
                        message: 'Tem a certeza que deseja criar esta encomenda?',
                        details: 'Esta ação não pode ser desfeita.',
                        confirmText: 'Sim, Criar Encomenda',
                        confirmIcon: 'fa-check-circle',
                        confirmClass: 'btn-success',
                        onConfirm: function() {
                            // Remover event listener que previne submit
                            $('#customerForm').off('submit');

                            // Enviar formulário real
                            $('#customerForm').submit();
                        },
                        onCancel: function() {
                            // Reabrir modal de resumo
                            setTimeout(() => {
                                $('#orderSummaryModal').modal('show');
                            }, 300);
                        }
                    });
                });
            },
            error: function(xhr) {
                $('#order-summary-content').html(`
                    <div class="alert alert-danger">
                        <h5><i class="fa fa-exclamation-triangle"></i> Erro</h5>
                        <p>Não foi possível carregar o resumo da encomenda.</p>
                        <pre class="small">${xhr.responseText}</pre>
                        <button class="btn btn-secondary" onclick="showOrderSummary()">
                            <i class="fa fa-refresh"></i> Tentar Novamente
                        </button>
                    </div>
                `);
            }
        });
    }

    // Funções auxiliares
    function validateCustomerForm() {
        let isValid = true;
        const requiredFields = [
            'customer_firstname',
            'customer_lastname',
            'customer_email',
            'customer_phone',
            'customer_address1',
            'customer_city',
            'customer_district',
            'customer_zipcode',
            'customer_country'
        ];

        requiredFields.forEach(fieldId => {
            const field = document.getElementById(fieldId);
            if (!field || !field.value.trim()) {
                field.classList.add('is-invalid');
                isValid = false;
            } else {
                field.classList.remove('is-invalid');
            }
        });

        return isValid;
    }

    function hasItemsInCart() {
        return cartItems;
    }
    
    // Confirmar encomenda
    $('#confirm-order').on('click', function() {
        $('#orderSummaryModal').modal('hide');
        
        // Enviar formulário real
        $('#customerForm').off('submit').submit();
    });
    
    // Helper: debounce function
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
    
    // Atualizar página quando items são adicionados ao carrinho
    if ({{ session('cart') ? 'true' : 'false' }}) {
        window.addEventListener('storage', function(e) {
            if (e.key === 'cartUpdated') {
                location.reload();
            }
        });
    }
    
    // Esconder sugestões quando clicar fora
    $(document).on('click', function(e) {
        if (!$(e.target).closest('#phone-suggestions, #customer_phone').length) {
            $('#phone-suggestions').hide();
        }
        if (!$(e.target).closest('#email-suggestions, #customer_email').length) {
            $('#email-suggestions').hide();
        }
    });

    $(document).on('ifChecked', '.pack-select', function () {

        const packId   = $(this).val();
        const qtMeals  = parseInt($(this).data('qtmeals'));

        // Atualizar hidden inputs
        $('#form_pack_id').val(packId);
        $('#required_dishes').val(qtMeals);
        requiredDishes = qtMeals;
        $('#required-count').text(qtMeals);

        // Reset contador
        $('#selected-count').text(0);
        $('.dish-quantity').val(0);
        $('#add-to-cart-btn').prop('disabled', true);

        $.ajax({
            url: '{{ route("admin.orders.pack-type-meals") }}',
            method: 'GET',
            data: { pack_id: packId },
            success: function (response) {

                const container = $('#type-meals-container');
                container.empty();

                if (!response.typeMeals || response.typeMeals.length === 0) {
                    container.append(
                        '<div class="text-danger">Este pack não tem tipos de refeição ativos.</div>'
                    );
                    return;
                }

                response.typeMeals.forEach(function (typeMeal, index) {
                    container.append(`
                        <div class="radio">
                            <label>
                                <input type="radio"
                                       class="flat type-meal-select"
                                       name="type_meal_id"
                                       value="${typeMeal.id}"
                                       ${index === 0 ? 'checked' : ''}>
                                &nbsp;&nbsp;&nbsp;${typeMeal.description}
                            </label>
                        </div>
                    `);
                      
                    // Reativar iCheck nos novos inputs
                    container.find('input.flat').iCheck({
                        checkboxClass: 'icheckbox_flat-green',
                        radioClass: 'iradio_flat-green'
                    });
  
                });

                // Atualizar hidden type meal (primeiro)
                $('#form_type_meal_id').val(response.typeMeals[0].id);
            }
        });
    });

    // Sempre que muda o tipo de refeição
    $(document).on('change', '.type-meal-select', function () {
        $('#form_type_meal_id').val($(this).val());
    });

});

</script>
@endpush

<script>
// Função para buscar cliente por telefone (Controller)
async function searchCustomerByPhone(phone) {
    try {
        const response = await fetch(`/admin/orders/search-customer-by-phone?phone=${encodeURIComponent(phone)}`);
        return await response.json();
    } catch (error) {
        console.error('Erro ao buscar cliente:', error);
        return { customers: [] };
    }
}

// Função para buscar cliente por email (Controller)
async function searchCustomerByEmail(email) {
    try {
        const response = await fetch(`/admin/orders/search-customer-by-email?email=${encodeURIComponent(email)}`);
        return await response.json();
    } catch (error) {
        console.error('Erro ao buscar cliente:', error);
        return { customers: [] };
    }
}

// Validação em tempo real do formulário
function validateOrderForm() {
    const requiredFields = [
        'customer_phone',
        'customer_email',
        'customer_firstname',
        'customer_lastname',
        'customer_address1',
        'customer_city',
        'customer_zipcode',
        'customer_country'
    ];
    
    let isValid = true;
    
    requiredFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (!field.value.trim()) {
            field.classList.add('is-invalid');
            isValid = false;
        } else {
            field.classList.remove('is-invalid');
        }
    });
    
    return isValid;
}

// Formatação de números de telefone
function formatPhoneNumber(phone) {
    const cleaned = phone.replace(/\D/g, '');
    if (cleaned.length === 9) {
        return cleaned.replace(/(\d{3})(\d{3})(\d{3})/, '$1 $2 $3');
    }
    return phone;
}

// Formatação de código postal
function formatZipCode(zipCode) {
    const cleaned = zipCode.replace(/\D/g, '');
    if (cleaned.length === 7) {
        return cleaned.replace(/(\d{4})(\d{3})/, '$1-$2');
    }
    return zipCode;
}

// Event listeners para formatação
document.getElementById('customer_phone')?.addEventListener('blur', function() {
    this.value = formatPhoneNumber(this.value);
});

document.getElementById('customer_zipcode')?.addEventListener('blur', function() {
    this.value = formatZipCode(this.value);
});

// Calculadora de total do carrinho
function calculateCartTotal(cartItems) {
    return cartItems.reduce((total, item) => {
        return total + (item.quantity * item.unit_price);
    }, 0);
}

// Atualizar contador do carrinho no menu
function updateCartCounter(count) {
    const cartCounter = document.getElementById('cart-counter');
    if (cartCounter) {
        cartCounter.textContent = count;
        cartCounter.style.display = count > 0 ? 'inline' : 'none';
    }
}
</script>