@extends('donamarmita-admin')
@section('title', 'Encomenda #' . $order->ord_id . ' - 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> Encomenda 
                <span class="text-success" style="font-weight: bold;">#{{ $order->ord_id }}</span>
            </h1>
            <p class="text-muted">Detalhes completos da encomenda</p>
        </div>
        <div class="title_right">
            <div class="pull-right">
                <a href="{{ request('return', route('admin.orders.index')) }}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> Voltar à Lista
                </a>
                @if($order->ord_invoice_pdf)
                <a href="{{ $order->ord_invoice_pdf }}" 
                   target="_blank" 
                   class="btn btn-success ml-2">
                    <i class="fa fa-file-pdf"></i> Ver Fatura
                </a>
                @endif
            </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">#{{ $order->ord_id }}</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

    <!-- Seção 1: Informações Gerais -->
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-info-circle"></i> Informações da Encomenda</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form id="orderStatusForm" action="{{ route('admin.orders.update-status', $order->ord_id) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <table class="table table-striped">
                            <tr>
                                <th width="200">Número da Encomenda</th>
                                <td>
                                    <strong>#{{ $order->ord_id }}</strong>
                                </td>
                            </tr>
                            <tr>
                                <th>Data da Encomenda</th>
                                <td>
                                    {{ $order->created_at->format('d/m/Y H:i') }}
                                    <small class="text-muted">({{ $order->created_at->diffForHumans() }})</small>
                                </td>
                            </tr>
                            <tr>
                                <th>Última atualização</th>
                                <td>
                                    {{ $order->updated_at->format('d/m/Y H:i') }}
                                    <small class="text-muted">({{ $order->updated_at->diffForHumans() }})</small>
                                </td>
                            </tr>
                            <!-- Na seção de Informações da Encomenda -->
                            <tr>
                                <th>Estado da Encomenda</th>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="mr-3">
                                            @php
                                                $statusColors = [
                                                    'Nova' => 'primary',
                                                    'Confirmada' => 'info',
                                                    'Paga' => 'success',
                                                    'Cancelada' => 'danger',
                                                    'Em Processamento' => 'warning',
                                                    'Enviada' => 'secondary',
                                                    'Entregue' => 'dark',
                                                ];
                                                $statusColor = $statusColors[$order->ord_status] ?? 'secondary';
                                            @endphp
                                            <span class="badge badge-{{ $statusColor }} px-3 py-2" style="font-size: 14px;">
                                                <i class="fa fa-circle mr-1"></i> {{ $order->ord_status }}
                                            </span>
                                        </div>
                                        
                                        <div class="d-flex">
                                            <select name="status" id="orderStatusSelect" class="form-control form-control-sm mr-2" style="width: 200px;">
                                                @foreach($statusOptions as $key => $label)
                                                <option value="{{ $key }}" {{ $order->ord_status == $key ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                                @endforeach
                                            </select>
                                            <button type="button" 
                                                    class="btn btn-success btn-sm" 
                                                    id="changeStatusBtn">
                                                <i class="fa fa-check"></i> Atualizar
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Seção 2: Produtos da Encomenda -->
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-boxes"></i> Produtos da Encomenda</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr class="table-active">
                                    <th style="width: 80px; color: #000;">Imagem</th>
                                    <th style="color: #000;">Descrição</th>
                                    <th class="text-center" style="width: 100px; color: #000;">Quantidade</th>
                                    <th class="text-center" style="width: 120px; color: #000;">Preço Unit.</th>
                                    <th class="text-center" style="width: 120px; color: #000;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $totalDishes = 0;
                                @endphp

                                @foreach($order->items as $item)
                                    @php
                                        $packName = $item->pack
                                            ? $item->pack->cat_description_pt
                                            : 'Pack #' . $item->oi_pack_id;

                                        $typeMeal = $item->typeMeal?->typeMeal;

                                        $typeMealName = $typeMeal?->typ_description_pt
                                            ?? 'Tipo #' . $item->oi_typemeal_id;

                                        $typeMealImg = $typeMeal?->typ_img;

                                        $itemDishes = $item->dishes->sum('oid_quantity');
                                        $totalDishes += $itemDishes;
                                    @endphp

                                    <tr>
                                        {{-- Imagem --}}
                                        <td class="text-center align-middle">
                                            @if($typeMealImg)
                                                <img src="{{ asset('images/typemeal/' . $typeMealImg) }}"
                                                     alt="{{ $typeMealName }}"
                                                     class="img-thumbnail"
                                                     style="width:70px;height:70px;object-fit:cover;">
                                            @else
                                                <i class="fa fa-utensils fa-2x text-muted"></i>
                                            @endif
                                        </td>

                                        {{-- Descrição --}}
                                        <td>
                                            <strong>{{ $packName }}</strong>

                                            <div class="text-muted small">
                                                <i class="fa fa-utensils"></i>
                                                {{ $typeMealName }}
                                            </div>

                                            @if($itemDishes > 0)
                                                <div class="mt-2">
                                                    <strong class="small">Marmitas ({{ $itemDishes }}):</strong>
                                                    <ul class="mb-0 pl-3" style="list-style:none;">
                                                        @foreach($item->dishes as $dishItem)
                                                            @if($dishItem->dish && $dishItem->oid_quantity > 0)
                                                                <li>
                                                                    <i class="fa fa-utensil-spoon"></i>
                                                                    {{ $dishItem->oid_quantity }}x
                                                                    {{ $dishItem->dish->dsh_name_pt }}
                                                                </li>
                                                            @endif
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                        </td>

                                        {{-- Quantidade --}}
                                        <td class="text-center align-middle">
                                            <span class="badge badge-secondary" style="font-size:16px;">
                                                {{ $item->oi_quantity }}
                                            </span>
                                        </td>

                                        {{-- Preço unitário --}}
                                        <td class="text-center align-middle">
                                            <strong>{{ number_format($item->oi_unit_price, 2) }} €</strong>
                                        </td>

                                        {{-- Total --}}
                                        <td class="text-center align-middle">
                                            <strong class="text-success">
                                                {{ number_format($item->oi_total, 2) }} €
                                            </strong>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>

                            <tfoot class="table-light">
                                <tr>
                                    <td colspan="2" class="text-right">
                                        <strong>Total de Marmitas:</strong>
                                    </td>
                                    <td class="text-center">
                                        <strong>{{ $totalDishes }}</strong>
                                    </td>
                                    <td colspan="2" class="text-center">
                                        <small class="text-muted">
                                            Distribuídas por {{ $order->items->count() }} packs
                                        </small>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Seção 3: Resumo Financeiro -->
    <div class="row">
        <div class="col-md-8">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-euro-sign"></i> Resumo Financeiro</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table">
                        <tr>
                            <td width="70%" class="text-right"><strong>Subtotal dos Produtos:</strong></td>
                            <td class="text-right">{{ number_format($subtotal, 2) }}€</td>
                        </tr>
                        
                        @if($order->ord_discount > 0)
                        <tr>
                            <td class="text-right">
                                <strong>Desconto Cupão:</strong>
                                @php
                                    $couponCode = optional(
                                        $order->couponRedemptions->first()?->coupon
                                    )->coup_code;
                                @endphp

                                @if($couponCode)
                                <br><small class="text-muted">Código: {{ $couponCode }}</small>
                                @endif
                            </td>
                            <td class="text-right text-danger">-{{ number_format($order->ord_discount, 2) }}€</td>
                        </tr>
                        @endif
                        
                        @if($order->ord_clientdiscount > 0)
                        <tr>
                            <td class="text-right"><strong>Desconto Cliente:</strong></td>
                            <td class="text-right text-danger">-{{ number_format($order->ord_clientdiscount, 2) }}€</td>
                        </tr>
                        @endif
                        
                        @if($shipping > 0)
                        <tr>
                            <td class="text-right"><strong>Despesas de Transporte:</strong></td>
                            <td class="text-right">{{ number_format($shipping, 2) }}€</td>
                        </tr>
                        @endif
                        
                        @if($order->ord_payrate > 0)
                        <tr>
                            <td class="text-right"><strong>Custos de Pagamento:</strong></td>
                            <td class="text-right">{{ number_format($order->ord_payrate, 2) }}€</td>
                        </tr>
                        @endif
                        
                        <tr class="table-active">
                            <td class="text-right"><strong style="font-size: 16px;">TOTAL DA ENCOMENDA:</strong></td>
                            <td class="text-right">
                                <strong class="text-success" style="font-size: 18px;">
                                    {{ number_format($total, 2) }}€
                                </strong>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-credit-card"></i> Pagamento</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table">
                        <tr>
                            <td><strong>Método:</strong></td>
                            <td class="text-right">
                                <span class="badge badge-success">{{ $paymentMethod }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Estado:</strong></td>
                            <td class="text-right">
                                @if($order->ord_status == 'Nova' || $order->ord_status == 'Confirmada')
                                <span class="badge badge-warning">PENDENTE</span>
                                @elseif($order->ord_status == 'Cancelada')
                                <span class="badge badge-danger">---</span>
                                @else
                                <span class="badge badge-success">PAGA</span>
                                @endif
                            </td>
                        </tr>
                        @if($order->ord_pickup_in_store)
                        <tr>
                            <td colspan="2" class="text-center">
                                <span class="badge badge-info">
                                    <i class="fa fa-store"></i> Levantamento na Loja
                                </span>
                            </td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Seção 4: Dados do Cliente -->
    <div class="row">
        <div class="col-md-6">
            <div class="x_panel">
                <div class="x_title">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3><i class="fa fa-user"></i> Dados de Expedição</h3>
                        <div>
                            <button type="button" 
                                    class="btn btn-info btn-sm" 
                                    data-toggle="modal" 
                                    data-target="#editExpeditionModal">
                                <i class="fa fa-edit"></i> Editar
                            </button>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-striped">
                        <tr>
                            <th width="40%">Nome</th>
                            <td>{{ $order->ord_expedition_firstname }} {{ $order->ord_expedition_lastname }}</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>
                                {{ $order->ord_expedition_email }}
                                @if($order->client)
                                <br><small class="text-muted">Cliente #{{ $order->ord_client_id }}</small>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Telefone</th>
                            <td>{{ $order->ord_expedition_phone }}</td>
                        </tr>
                        @if($order->ord_expedition_nif)
                        <tr>
                            <th>NIF</th>
                            <td>{{ $order->ord_expedition_nif }}</td>
                        </tr>
                        @endif
                        <tr>
                            <th>Empresa</th>
                            <td>{{ $order->ord_expedition_company ?? '---' }}</td>
                        </tr>
                        <tr>
                            <th>Morada</th>
                            <td>
                                {{ $order->ord_expedition_address1 }}
                                @if($order->ord_expedition_address2)
                                <br>{{ $order->ord_expedition_address2 }}
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Cidade</th>
                            <td>{{ $order->ord_expedition_city }}</td>
                        </tr>
                        <tr>
                            <th>Distrito/Estado</th>
                            <td>{{ $order->ord_expedition_district ?? '---' }}</td>
                        </tr>
                        <tr>
                            <th>Código Postal</th>
                            <td>{{ $order->ord_expedition_zipcode }}</td>
                        </tr>
                        <tr>
                            <th>País</th>
                            <td>{{ $countries[$order->ord_country_code] ?? $order->ord_country_code }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- Na seção de Informações Adicionais -->
        <div class="col-md-6">
            <div class="x_panel">
                <div class="x_title">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3><i class="fa fa-info-circle"></i> Informações Adicionais</h3>
                        <div>
                            <button type="button" 
                                    class="btn btn-info btn-sm" 
                                    data-toggle="modal" 
                                    data-target="#editNotesModal">
                                <i class="fa fa-edit"></i> Editar Notas
                            </button>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <table class="table table-striped">
                        @if($order->ord_notes)
                        <tr>
                            <th width="40%">Notas da Encomenda</th>
                            <td>
                                {!! nl2br(e($order->notes)) !!}
                            </td>
                        </tr>
                        @else
                        <tr>
                            <th width="40%">Notas da Encomenda</th>
                            <td>
                                <span class="text-muted">Sem notas</span>
                                <div class="mt-2">
                                    <button type="button" 
                                            class="btn btn-outline-info btn-sm" 
                                            data-toggle="modal" 
                                            data-target="#editNotesModal">
                                        <i class="fa fa-plus"></i> Adicionar Notas
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endif
                        <!-- resto das linhas da tabela -->
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Seção 5: Ações -->
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-cogs"></i> Ações</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <!-- Botão voltar -->
                        <div class="mb-2 mb-md-0">
                            <a href="{{ request('return', route('admin.orders.index')) }}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i> Voltar à Lista
                            </a>
                        </div>

                        <!-- Ações da encomenda -->
                        <div class="btn-group" role="group">
                            @if($order->ord_status != 'Cancelada')
                                <!-- Enviar recibo (só se não estiver cancelada) -->
                                @if(!empty($order->ord_invoice_pdf))
                                <button type="button" 
                                        class="btn btn-warning btn-send-receipt"
                                        data-id="{{ $order->ord_id }}"
                                        data-order-number="{{ $order->ord_id }}"
                                        data-customer-email="{{ $order->ord_expedition_email }}"
                                        data-customer-name="{{ $order->ord_expedition_firstname }} {{ $order->ord_expedition_lastname }}"
                                        data-document-type="recibo"
                                        data-toggle="tooltip" 
                                        title="Enviar recibo por email">
                                    <i class="fa fa-envelope"></i> Enviar Fatura
                                </button>
                                @endif

                                <!-- Gerar/Ver fatura -->
                                @if(empty($order->ord_invoice_pdf))
                                <a href="{{ route('admin.orders.create-invoice', $order->ord_id) }}" 
                                   target="_blank" 
                                   class="btn btn-success"
                                   title="Gerar fatura para esta encomenda">
                                    <i class="fa fa-file-invoice"></i> Gerar Fatura
                                </a>
                                @else
                                <a href="{{ $order->ord_invoice_pdf }}" 
                                   target="_blank" 
                                   class="btn btn-outline-success"
                                   title="Ver fatura gerada">
                                    <i class="fa fa-file-pdf"></i> Ver Fatura
                                </a>
                                @endif

                                <!-- Guia DPD (só se existir) -->
                                @if($order->ord_guidedpd)
                                <a href="{{ asset('storage/dpd-guides/' . $order->ord_guidedpd) }}" 
                                   target="_blank" 
                                   class="btn btn-info"
                                   title="Ver guia de expedição DPD">
                                    <i class="fa fa-truck"></i> Guia DPD
                                </a>
                                @endif

                                <!-- Reenviar confirmação (opcional) -->
                                @if(in_array($order->ord_status, ['Nova', 'Confirmada']))
                                <button type="button" 
                                        class="btn btn-primary btn-resend-confirmation"
                                        data-toggle="modal" 
                                        data-target="#resendConfirmationModal"
                                        data-order-id="{{ $order->ord_id }}"
                                        data-order-number="{{ $order->ord_id }}"
                                        data-customer-name="{{ $order->payment_full_name ?? 'Cliente' }}"
                                        data-customer-email="{{ $order->ord_expedition_email }}"
                                        title="Reenviar email com dados de pagamento">
                                    <i class="fa fa-paper-plane me-1"></i> Reenviar
                                </button>
                                @endif

                                <!-- Cancelar (só se não estiver cancelada e puder ser alterada) -->
                                @if($order->ord_cannotchange != 1)
                                <button type="button" 
                                        class="btn btn-danger btn-cancel-order"
                                        data-order-id="{{ $order->ord_id }}"
                                        data-order-number="{{ $order->ord_id }}"
                                        data-customer-name="{{ $order->ord_expedition_firstname }} {{ $order->ord_expedition_lastname }}"
                                        data-order-total="{{ number_format($order->ord_total, 2) }}€"
                                        data-order-date="{{ $order->created_at->format('d/m/Y') }}"
                                        title="Cancelar esta encomenda">
                                    <i class="fa fa-times"></i> Cancelar
                                </button>
                                @endif
                            @else
                                <!-- Ações específicas para encomendas canceladas -->
                                <span class="badge badge-danger mr-2 align-self-center">
                                    <i class="fa fa-ban"></i> ENCOMENDA CANCELADA
                                </span>

                                <!-- Ver fatura (se existir) mesmo cancelada -->
                                @if(!empty($order->ord_invoice_pdf))
                                <a href="{{ $order->ord_invoice_pdf }}" 
                                   target="_blank" 
                                   class="btn btn-outline-secondary"
                                   title="Ver fatura gerada">
                                    <i class="fa fa-file-pdf"></i> Ver Fatura
                                </a>
                                @endif

                                <!-- Ver histórico de cancelamento -->
                                <button type="button" 
                                        class="btn btn-outline-info btn-cancel-details"
                                        data-order-id="{{ $order->ord_id }}"
                                        title="Ver detalhes do cancelamento">
                                    <i class="fa fa-info-circle"></i> Detalhes Cancelamento
                                </button>
                            @endif

                            <!-- Duplicar encomenda (sempre disponível) -->
<!--                            <button type="button" 
                                    class="btn btn-outline-primary btn-duplicate-order"
                                    data-order-id="{{ $order->ord_id }}"
                                    title="Duplicar esta encomenda">
                                <i class="fa fa-copy"></i> Duplicar
                            </button>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Seção 6: Histórico e Logs -->
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h3><i class="fa fa-history"></i> Histórico da Encomenda</h3>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <!-- Abas para diferentes tipos de histórico -->
                    <ul class="nav nav-tabs" id="historyTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="timeline-tab" data-toggle="tab" href="#timeline" role="tab">
                                <i class="fa fa-stream"></i> Timeline
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="status-tab" data-toggle="tab" href="#statusHistory" role="tab">
                                <i class="fa fa-exchange-alt"></i> Estados
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="payment-tab" data-toggle="tab" href="#paymentHistory" role="tab">
                                <i class="fa fa-credit-card"></i> Pagamentos
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="client-tab" data-toggle="tab" href="#clientHistory" role="tab">
                                <i class="fa fa-user"></i> Histórico do Cliente
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="emails-tab" data-toggle="tab" href="#emailHistory" role="tab">
                                <i class="fa fa-envelope"></i> Emails Enviados
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="invoice-tab" data-toggle="tab" href="#invoiceHistory" role="tab">
                                <i class="fa fa-file-invoice"></i> Faturação
                            </a>
                        </li>
                    </ul>

                    <!-- Conteúdo das abas -->
                    <div class="tab-content p-3 border border-top-0" id="historyTabsContent">

                        <!-- Tab 1: Timeline Geral -->
                        <div class="tab-pane fade show active" id="timeline" role="tabpanel">
                            <div class="timeline">
                                <!-- Exemplo de eventos na timeline -->
                                @if($timelineEvents->count())
                                    @foreach($timelineEvents as $log)
                                        <div class="timeline-item {{ $loop->iteration % 2 == 0 ? 'timeline-item-right' : '' }}">
                                            <div class="timeline-point
                                                {{ $log['type'] == 'info' ? 'bg-info' : ($log['type'] == 'success' ? 'bg-success' : ($log['type'] == 'warning' ? 'bg-warning' : 'bg-danger')) }}">
                                                <i class="fa fa-{{ $log['icon'] ?? 'circle' }}"></i>
                                            </div>

                                            <div class="timeline-event">
                                                <div class="timeline-header">
                                                    <strong>{{ $log['title'] }}</strong>
                                                    <small class="text-muted ml-2">
                                                        {{ $log['created_at']->format('d/m/Y H:i') }}
                                                        ({{ $log['created_at']->diffForHumans() }})
                                                    </small>
                                                </div>

                                                <div class="timeline-body">
                                                    <p class="mb-0">{{ $log['description'] }}</p>

                                                    @if(!empty($log['user']))
                                                        <small class="text-muted">
                                                            Por: {{ $log['user']->name }}
                                                        </small>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="alert alert-info information">
                                        <i class="fa fa-info-circle"></i> Nenhum registro encontrado no histórico.
                                    </div>
                                @endif

                            </div>
                        </div>

                        <!-- Tab 2: Histórico de Estados -->
                        <div class="tab-pane fade" id="statusHistory" role="tabpanel">

                            <table class="table table-sm align-middle">
                                <thead>
                                    <tr>
                                        <th>Estado</th>
                                        <th>Data</th>
                                        <th>Alterado por</th>
                                        <th>Notas</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($statusHistory as $history)
                                        <tr>
                                            <td>
                                                <span class="badge badge-{{ $history->color }}">
                                                    {{ $history->status }}
                                                </span>
                                            </td>

                                            <td>
                                                {{ $history->created_at->format('d/m/Y H:i') }}
                                                <br>
                                                <small class="text-muted">
                                                    {{ $history->created_at->diffForHumans() }}
                                                </small>
                                            </td>

                                            <td>
                                                {{ $history->user->name ?? 'Sistema' }}
                                            </td>

                                            <td>
                                                {{ $history->notes ?? '—' }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted">
                                                Nenhum histórico de estados disponível.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Tab 3: Histórico de Pagamentos -->
                        <div class="tab-pane fade" id="paymentHistory" role="tabpanel">

                            <table class="table table-sm align-middle">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Valor</th>
                                        <th>Estado</th>
                                        <th>Data</th>
                                        <th>Referência</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($paymentHistory as $payment)
                                        <tr>
                                            <td>
                                                {{ $payment->type }}
                                                <br>
                                                <small class="text-muted">
                                                    {{ ucfirst(str_replace('_', ' ', $payment->event)) }}
                                                </small>
                                            </td>

                                            <td>
                                                @if($payment->amount !== null)
                                                    {{ number_format($payment->amount, 2, ',', '.') }} €
                                                @else
                                                    —
                                                @endif
                                            </td>

                                            <td>
                                                <span class="badge badge-{{ $payment->status_badge }}">
                                                    {{ ucfirst($payment->status) }}
                                                </span>
                                            </td>

                                            <td>
                                                {{ $payment->created_at->format('d/m/Y H:i') }}
                                                <br>
                                                <small class="text-muted">
                                                    {{ $payment->created_at->diffForHumans() }}
                                                </small>
                                            </td>

                                            <td>
                                                {{ $payment->reference ?? '—' }}
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">
                                                Nenhum histórico de pagamentos disponível.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Tab 4: Histórico do Cliente -->
                        <div class="tab-pane fade" id="clientHistory" role="tabpanel">

                            @if($clientHistory)

                                <div class="alert alert-{{ $clientHistory->level === 'authenticated' ? 'info' : 'warning' }} information">
                                    <i class="fa fa-user"></i>
                                    {{ $clientHistory->label }}
                                    <br>
                                    <small>
                                        Grau de confiança:
                                        <strong>{{ $clientHistory->confidence }}</strong>
                                        <br>
                                        <em>Este histórico é apresentado apenas para análise interna.</em>
                                    </small>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm table-striped align-middle">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Data</th>
                                                <th>Estado</th>
                                                <th>Total</th>
                                                <th>Origem do histórico
                                                    <i class="fa fa-info-circle text-muted"
                                                       title="Indica como esta encomenda foi associada ao histórico do cliente. Informação usada apenas para análise interna.">
                                                    </i>
                                                </th>
                                                <th></th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach($clientHistory->orders as $item)
                                                @php
                                                    $orderItem = $item->order;

                                                    $rowClass = match($item->confidence) {
                                                        'high'  => 'confidence-high',
                                                        'email' => 'confidence-email',
                                                        'phone' => 'confidence-phone',
                                                        default => '',
                                                    };

                                                    $badgeText = match($item->confidence) {
                                                        'high'  => 'Cliente registado',
                                                        'email' => 'Associado por email',
                                                        'phone' => 'Associado por telefone',
                                                        default => 'Origem desconhecida',
                                                    };

                                                    $badgeColor = match($item->confidence) {
                                                        'high'  => 'success',
                                                        'email' => 'warning',
                                                        'phone' => 'info',
                                                        default => 'secondary',
                                                    };
                                                @endphp

                                                <tr class="{{ $rowClass }} {{ $orderItem->ord_id === $order->ord_id ? 'table-active' : '' }}">
                                                    <td>#{{ $orderItem->ord_id }}</td>

                                                    <td>
                                                        {{ $orderItem->created_at->format('d/m/Y') }}
                                                        <br>
                                                        <small class="text-muted">
                                                            {{ $orderItem->created_at->diffForHumans() }}
                                                        </small>
                                                    </td>

                                                    <td>
                                                        <span class="badge badge-{{ $statusColors[$orderItem->ord_status] ?? 'secondary' }}">
                                                            {{ $orderItem->ord_status }}
                                                        </span>
                                                    </td>

                                                    <td>
                                                        {{ number_format($orderItem->ord_total, 2, ',', '.') }} €
                                                    </td>

                                                    <td>
                                                        <span class="badge badge-{{ $badgeColor }} confidence-badge">
                                                            {{ $badgeText }}
                                                        </span>
                                                    </td>

                                                    <td class="text-end">
                                                        <a href="{{ route('admin.orders.show', $orderItem->ord_id) }}"
                                                           class="btn btn-sm btn-outline-primary">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>

                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                            @else
                                <div class="alert alert-secondary">
                                    <i class="fa fa-info-circle"></i>
                                    Não foi possível associar histórico a este cliente.
                                </div>
                            @endif

                        </div>

                        <!-- Tab 5: Histórico de Emails -->
                        <div class="tab-pane fade" id="emailHistory" role="tabpanel">

                            <table class="table table-sm align-middle">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Destinatário</th>
                                        <th>Assunto</th>
                                        <th>Data</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($emailHistory as $email)
                                        <tr>
                                            <td>
                                                <span class="badge badge-info">
                                                    {{ $email->type }}
                                                </span>
                                            </td>

                                            <td>{{ $email->recipient }}</td>

                                            <td>{{ $email->subject }}</td>

                                            <td>
                                                {{ $email->created_at->format('d/m/Y H:i') }}
                                                <br>
                                                <small class="text-muted">
                                                    {{ $email->created_at->diffForHumans() }}
                                                </small>
                                            </td>

                                            <td>
                                                <span class="badge badge-{{ $email->status_badge }}">
                                                    {{ ucfirst($email->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">
                                                Nenhum email registado para esta encomenda.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>

                        </div>
                        
                        <!-- Tab 6: Histórico de Faturação -->
                        <div class="tab-pane fade" id="invoiceHistory" role="tabpanel">
                            <table class="table table-sm align-middle">
                                <thead>
                                    <tr>
                                        <th>Estado</th>
                                        <th>Documento</th>
                                        <th>Cliente Moloni</th>
                                        <th>Mensagem</th>
                                        <th>Data</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($order->moloniInvoiceLogs as $log)
                                        <tr>
                                            <td>
                                                <span class="badge badge-{{ 
                                                    match($log->status) {
                                                        'success' => 'success',
                                                        'partial' => 'warning',
                                                        'failed'  => 'danger',
                                                        'skipped' => 'secondary',
                                                        default   => 'info'
                                                    }
                                                }}">
                                                    {{ strtoupper($log->status) }}
                                                </span>
                                            </td>

                                            <td>
                                                {{ $log->moloni_document_id ?? '—' }}
                                            </td>

                                            <td>
                                                {{ $log->moloni_customer_id ?? '—' }}
                                            </td>

                                            <td>
                                                {{ $log->error_description ?? '—' }}
                                            </td>

                                            <td>
                                                {{ $log->created_at->format('d/m/Y H:i') }}
                                                <br>
                                                <small class="text-muted">
                                                    {{ $log->created_at->diffForHumans() }}
                                                </small>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">
                                                Nenhum registo de faturação disponível.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>

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

    <!-- Modais de Edição (opcionais, seguindo o exemplo antigo) -->
    @include('admin.orders.partials.cancel-details')
    @include('admin.orders.partials.confirmation-modal')
    @include('admin.orders.partials.edit-expedition-modal')
    @include('admin.orders.partials.edit-notes-modal')
    @include('admin.orders.partials.resend-payment-details')    
    @include('admin.orders.partials.send-receipt-modal')  
    
    <div id="dm-loader"
         style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
        <img src="{{ asset('images/loader/dm-loader.svg') }}" width="60">
    </div>
</div>

@endsection

@push('styles')
<style>
    .x_panel {
        margin-bottom: 20px;
    }
    
    table.table th {
        background-color: #f8f9fa;
        font-weight: 600;
    }
    
    .table-active th {
        background-color: #2A3F54;
        color: white;
    }
    
    .img-thumbnail {
        border-radius: 8px;
        border: 2px solid #dee2e6;
        padding: 2px;
    }
    
    .badge {
        font-size: 12px;
        padding: 5px 10px;
    }
    
    /* Estilo para botão desabilitado */
    .btn.disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

    /* Animação de fade para mensagens */
    .alert {
        transition: all 0.3s ease;
    }

    /* Garantir que o spinner está acima do modal */
    .modal-backdrop.show + #dm-loader {
        z-index: 10000;
    }

    /* Spinner dentro do botão */
    .fa-spin {
        animation: fa-spin 1s infinite linear;
    }

    @keyframes fa-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Estilos específicos para os modais de ação */
    #confirmationModal .modal-header.bg-danger {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    }

    #confirmationModal .modal-header.bg-warning {
        background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    }

    #confirmationModal .btn-danger {
        background: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
        border: none;
    }

    #confirmationModal .btn-warning {
        background: linear-gradient(135deg, #ffc107 0%, #d39e00 100%);
        border: none;
        color: #212529;
    }

    #confirmationModal .btn-danger:hover {
        background: linear-gradient(135deg, #c82333 0%, #a71d2a 100%);
    }

    #confirmationModal .btn-warning:hover {
        background: linear-gradient(135deg, #e0a800 0%, #c69500 100%);
    }

    /* Cards dentro do modal */
    #confirmationModal .card {
        border: 1px solid #dee2e6;
        border-radius: 4px;
    }

    #confirmationModal .table-sm td {
        padding: 4px 8px;
    }

    /* Textarea do motivo */
    #cancelReason {
        font-size: 14px;
        resize: vertical;
    }

    .text-white{
        color: #ffffff !important;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        #confirmationModal .modal-dialog {
            margin: 10px;
        }

        #confirmationModal .btn {
            padding: 8px 16px;
            font-size: 14px;
        }
    }

    .btn-resend-confirmation {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .btn-resend-confirmation:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
    }

    .btn-resend-confirmation:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .btn-loading-spinner {
        z-index: 1;
    }
    
    /* Estilos para a Timeline */
.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-point {
    position: absolute;
    left: -25px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
}

.timeline-event {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    margin-left: 20px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.timeline-body {
    font-size: 14px;
}

/* Tabs personalizadas */
.nav-tabs .nav-link.active {
    background-color: #2A3F54;
    color: white;
    border-color: #2A3F54;
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: #dee2e6;
}

/* Grau de confiança – linhas da tabela */
.confidence-high {
    background-color: #e9f7ef; /* verde suave */
}

.confidence-email {
    background-color: #fff8e1; /* amarelo suave */
}

.confidence-phone {
    background-color: #e3f2fd; /* azul suave */
}

/* Pequeno badge explicativo */
.confidence-badge {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 6px;
}

</style>
@endpush

@push('scripts')

@if(session()->has('toast'))
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const t = @json(session('toast'));

            // Fallbacks seguros
            const type    = t.type ?? 'info';
            const message = t.message ?? '';
            const title   = t.title ?? '';
            const timeout = Number(t.timeout ?? 3000);

            if (window.toast && typeof window.toast[type] === 'function') {
                window.toast[type](message, title, timeout);
            }
        });
    </script>
@endif

@if(request('tab') === 'invoice')
<script>
    $(function () {
        $('#invoice-tab').tab('show');
    });
</script>
@endif

@if(request('tab') === 'invoice')
<script>
    $(function () {

        const $invoiceTab = $('#invoice-tab');
        const $tabsAnchor = $('#historyTabs');

        if ($invoiceTab.length) {
            // Ativar a tab
            $invoiceTab.tab('show');

            // Scroll suave até aos tabs
            if ($tabsAnchor.length) {
                $('html, body').animate({
                    scrollTop: $tabsAnchor.offset().top - 80
                }, 1000);
            }
        }
    });
</script>
@endif

<script type="text/javascript" src="{{ asset('js/admin/orders/send-receipt.js') }}"></script>

<script>
$(document).ready(function() {
    // ============================================
    // FUNÇÃO PRINCIPAL showConfirmation
    // ============================================
    function showConfirmation(config) {
        const defaultConfig = {
            type: 'danger',
            title: '',
            message: '',
            details: '',
            confirmText: 'Confirmar',
            confirmIcon: 'fa-check',
            confirmClass: 'btn-primary',
            onConfirm: null,
            onCancel: null,
            data: null
        };

        // Mesclar configurações
        const mergedConfig = { ...defaultConfig, ...config };

        // Construir conteúdo do modal-body
        let modalBodyContent = `<p>${mergedConfig.message}</p>`;

        if (mergedConfig.details) {
            modalBodyContent += `
                <div class="alert alert-${mergedConfig.type} small mt-3">
                    <i class="fa fa-info-circle"></i>
                    ${mergedConfig.details}
                </div>
            `;
        }

        // Configurar modal
        $('#confirmationModalTitle').html(mergedConfig.title);
        $('#confirmationModalBody').html(modalBodyContent);

        // Configurar cabeçalho com base no tipo
        const headerClasses = {
            danger: 'bg-danger text-white',
            warning: 'bg-warning text-dark',
            success: 'bg-success text-white',
            info: 'bg-info text-white',
            primary: 'bg-primary text-white'
        };

        $('#confirmationModalHeader')
            .removeClass()
            .addClass(`modal-header ${headerClasses[mergedConfig.type] || headerClasses.primary}`);

        // Configurar botão de confirmação
        const $confirmBtn = $('#confirmationModalConfirm');
        $confirmBtn
            .off('click') // Remover event listeners anteriores
            .removeClass()
            .addClass(`btn ${mergedConfig.confirmClass}`)
            .html(`<i class="fa ${mergedConfig.confirmIcon}"></i> ${mergedConfig.confirmText}`)
            .on('click', function() {
                if (mergedConfig.onConfirm) {
                    mergedConfig.onConfirm(mergedConfig.data);
                }
                $('#confirmationModal').modal('hide');
            });

        // Configurar botão de cancelar
        $('#confirmationModalCancel').off('click').on('click', function() {
            if (mergedConfig.onCancel) {
                mergedConfig.onCancel();
            }
        });

        // Mostrar modal
        $('#confirmationModal').modal('show');
    }
    // Atualizar estado da encomenda com modal
    $('#changeStatusBtn').on('click', function(e) {
        e.preventDefault();
        const currentStatus = '{{ $order->ord_status }}';
        const newStatus = $('#orderStatusSelect').val();

        // Se não houve alteração
        if (currentStatus === newStatus) {
            showConfirmation({
                type: 'info',
                title: '<i class="fa fa-info-circle"></i> Estado Iguais',
                message: 'O estado selecionado é o mesmo que o atual. Deseja manter?',
                confirmText: 'Manter',
                confirmIcon: 'fa-check',
                confirmClass: 'btn-primary',
                onConfirm: function() {
                    console.log('Estado mantido');
                }
            });
            return;
        }

        // Mensagens personalizadas por estado
        const statusMessages = {
            'Nova': 'Estado inicial da encomenda',
            'Confirmada': 'Encomenda confirmada e em preparação',
            'Paga': 'Pagamento confirmado',
            'Em Processamento': 'Em processamento para envio',
            'Enviada': 'Encomenda enviada ao cliente',
            'Entregue': 'Encomenda entregue com sucesso',
            'Cancelada': 'ENCOMENDA CANCELADA - ação irreversível'
        };

        // Cores por estado
        const statusColors = {
            'Nova': 'primary',
            'Confirmada': 'info',
            'Paga': 'success',
            'Em Processamento': 'warning',
            'Enviada': 'secondary',
            'Entregue': 'dark',
            'Cancelada': 'danger'
        };

        const statusColor = statusColors[newStatus] || 'primary';
        const statusMessage = statusMessages[newStatus] || '';

        // Configurar modal de confirmação
        showConfirmation({
            type: statusColor,
            title: `<i class="fa fa-exchange-alt"></i> Alterar Estado da Encomenda`,
            message: `Tem a certeza que deseja alterar o estado da encomenda de 
                      <strong class="text-${statusColors[currentStatus]}">${currentStatus}</strong> 
                      para <strong class="text-${statusColor}">${newStatus}</strong>?`,
            details: statusMessage ? 
                `<div class="alert alert-${statusColor} small mt-2">
                    <i class="fa fa-info-circle"></i> ${statusMessage}
                </div>` : '',
            confirmText: `Sim, Alterar para ${newStatus}`,
            confirmIcon: 'fa-exchange-alt',
            confirmClass: `btn-${statusColor}`,
            onConfirm: function() {
                // Mostrar spinner
                $('#dm-loader').show();

                // Desabilitar botão de confirmação
                const $btn = $('#confirmationModalConfirm');
                $btn.prop('disabled', true).addClass('disabled');

                // Enviar AJAX
                $.ajax({
                    url: '{{ route("admin.orders.update-status", $order->ord_id) }}',
                    method: 'PATCH',
                    data: {
                        _token: '{{ csrf_token() }}',
                        status: newStatus
                    },
                    success: function(response) {
                        $('#dm-loader').hide();
                        $btn.prop('disabled', false).removeClass('disabled');

                        if (response.success) {
                            toast.success(response.message, 'Sucesso', 3000);
                            setTimeout(() => {
                                $('#confirmationModal').modal('hide');
                                setTimeout(() => location.reload(), 500);
                            }, 1000);
                        } else {
                            toast.error(response.message || 'Erro ao alterar estado', 'Erro!', 5000);
                        }
                    },
                    error: function(xhr) {
                        $('#dm-loader').hide();
                        $btn.prop('disabled', false).removeClass('disabled');

                        const message = xhr.responseJSON?.message || 'Erro ao alterar estado da encomenda';
                        toast.error(message, 'Erro!', 5000);
                    }
                });
            },
            onCancel: function() {
                // Reverter para estado anterior no select
                $('#orderStatusSelect').val(currentStatus);
                console.log('Alteração de estado cancelada');
            }
        });
    });    
    
    // Contador de caracteres para as notas
    const $notesTextarea = $('#ord_notes');
    const $charCount = $('#charCount');
    
    function updateCharCount() {
        const length = $notesTextarea.val().length;
        $charCount.text(length);
        
        // Adicionar classe de aviso se passar de 1000 caracteres
        if (length > 1000) {
            $charCount.addClass('text-danger').removeClass('text-warning');
        } else if (length > 800) {
            $charCount.addClass('text-warning').removeClass('text-danger');
        } else {
            $charCount.removeClass('text-warning text-danger');
        }
    }
    
    // Atualizar contador quando o modal é aberto
    $('#editNotesModal').on('shown.bs.modal', function() {
        updateCharCount();
        $notesTextarea.focus();
    });
    
    // Atualizar contador enquanto digita
    $notesTextarea.on('input', updateCharCount);
    
    // Formatação básica de texto (opcional)
    $('#editNotesForm').on('submit', function(e) {
        // Validação básica
        const notes = $notesTextarea.val().trim();
        const charCount = notes.length;
        
        if (charCount > 255) {
            e.preventDefault();
            toast.warning('As notas não podem exceder 255 caracteres. Atualmente: ' + charCount + ' caracteres.', 'Atenção!', 4000);
            return false;
        }
        
        // Pode adicionar mais validações aqui
        return true;
    });
    
    // Botões de formatação (opcional)
    $('#editNotesModal').on('click', '.format-btn', function() {
        const format = $(this).data('format');
        const $textarea = $notesTextarea;
        const start = $textarea[0].selectionStart;
        const end = $textarea[0].selectionEnd;
        const text = $textarea.val();
        const selectedText = text.substring(start, end);
        
        let newText = '';
        switch(format) {
            case 'bold':
                newText = `**${selectedText}**`;
                break;
            case 'italic':
                newText = `*${selectedText}*`;
                break;
            case 'bullet':
                newText = selectedText.split('\n').map(line => `• ${line}`).join('\n');
                break;
            case 'number':
                newText = selectedText.split('\n').map((line, i) => `${i+1}. ${line}`).join('\n');
                break;
        }
        
        $textarea.val(text.substring(0, start) + newText + text.substring(end));
        $textarea.focus();
        updateCharCount();
    });
    
    // ============================================
    // CANCELAR ENCOMENDA 
    // ============================================
    $(document).on('click', '.btn-cancel-order', function(e) {
        e.preventDefault();

        const orderId = $(this).data('order-id');
        const orderNumber = $(this).data('order-number');
        const customerName = $(this).data('customer-name') || '{{ $order->ord_expedition_firstname }} {{ $order->ord_expedition_lastname }}';
        const orderTotal = $(this).data('order-total') || '{{ number_format($order->ord_total, 2) }}€';
        const orderDate = $(this).data('order-date') || '{{ $order->created_at->format("d/m/Y") }}';

        // Cores por estado (usar as mesmas que já tens definidas)
        const statusColors = {
            'Nova': 'primary',
            'Confirmada': 'info',
            'Paga': 'success',
            'Cancelada': 'danger',
            'Em Processamento': 'warning',
            'Enviada': 'secondary',
            'Entregue': 'dark'
        };

        const currentStatus = '{{ $order->ord_status }}';
        const currentStatusColor = statusColors[currentStatus] || 'secondary';

        showConfirmation({
            type: 'danger',
            title: '<i class="fa fa-ban"></i> Cancelar Encomenda',
            message: `Tem a certeza que deseja <strong class="text-danger">CANCELAR</strong> a encomenda #${orderNumber}?`,
            details: `
                <div class="alert alert-danger small">
                    <i class="fa fa-exclamation-triangle"></i>
                    <strong>ATENÇÃO:</strong> Esta ação é irreversível!
                </div>
                <div class="card mb-3">
                    <div class="card-body p-2">
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <td width="30%"><strong>Encomenda:</strong></td>
                                <td>#${orderNumber}</td>
                            </tr>
                            <tr>
                                <td><strong>Data:</strong></td>
                                <td>${orderDate}</td>
                            </tr>
                            <tr>
                                <td><strong>Valor:</strong></td>
                                <td>${orderTotal}</td>
                            </tr>
                            <tr>
                                <td><strong>Cliente:</strong></td>
                                <td>${customerName}</td>
                            </tr>
                            <tr>
                                <td><strong>Estado atual:</strong></td>
                                <td><span class="badge badge-${currentStatusColor}">${currentStatus}</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <label for="cancelReason"><strong>Motivo do cancelamento (opcional):</strong></label>
                    <textarea id="cancelReason" 
                              class="form-control" 
                              rows="3" 
                              placeholder="Descreva o motivo do cancelamento (será guardado no histórico)..."></textarea>
                    <small class="text-muted text-white">Esta informação será visível no histórico da encomenda.</small>
                </div>
            `,
            confirmText: 'Confirmar Cancelamento',
            confirmIcon: 'fa-ban',
            confirmClass: 'btn-danger',
            onConfirm: function() {
                const cancelReason = $('#cancelReason').val();

                // Mostrar spinner
                $('#dm-loader').show();

                // Desabilitar botões no modal
                const $confirmBtn = $('#confirmationModalConfirm');
                const $cancelBtn = $('#confirmationModalCancel');

                $confirmBtn.prop('disabled', true);
                $cancelBtn.prop('disabled', true);

                $.ajax({
                    url: '{{ route("admin.orders.cancel", $order->ord_id) }}',
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}',
                        reason: cancelReason
                    },
                    success: function(response) {
                        // Esconder spinner
                        $('#dm-loader').hide();

                        if (response.success) {
                            // Mostrar mensagem de sucesso no modal
                            $('#confirmationModalBody').html(`
                                <div class="text-center py-4">
                                    <i class="fa fa-check-circle fa-3x text-success mb-3"></i>
                                    <h4>Encomenda Cancelada</h4>
                                    <p class="mb-3">${response.message}</p>
                                    <div class="alert alert-info">
                                        <i class="fa fa-info-circle"></i> 
                                        A página será recarregada automaticamente.
                                    </div>
                                </div>
                            `);

                            // Atualizar botões do modal
                            $confirmBtn.hide();
                            $cancelBtn
                                .prop('disabled', false)
                                .html('<i class="fa fa-times"></i> Fechar');

                            toast.success(response.message, 'Sucesso', 4000);

                            // Fechar modal e recarregar página
                            setTimeout(() => {
                                $('#confirmationModal').modal('hide');
                                setTimeout(() => location.reload(), 500);
                            }, 2000);
                        } else {
                            // Restaurar botões
                            $confirmBtn.prop('disabled', false);
                            $cancelBtn.prop('disabled', false);

                            toast.error(response.message || 'Erro ao cancelar encomenda', 'Erro!', 5000);
                        }
                    },
                    error: function(xhr) {
                        // Esconder spinner
                        $('#dm-loader').hide();

                        // Restaurar botões
                        $confirmBtn.prop('disabled', false);
                        $cancelBtn.prop('disabled', false);

                        const message = xhr.responseJSON?.message || 'Erro ao cancelar encomenda';
                        toast.error(message, 'Erro!', 5000);
                    }
                });
            },
            onCancel: function() {
                // Limpar textarea se cancelar
                $('#cancelReason').val('');
                console.log('Cancelamento da encomenda cancelado');
            }
        });
    });
    
    // ============================================
    // DETALHES DO CANCELAMENTO - VERSÃO COMPLETA
    // ============================================
    $(document).on('click', '.btn-cancel-details', function(e) {
        e.preventDefault();

        const orderId = $(this).data('order-id');
        const $modal = $('#cancelDetailsModal');
        const $content = $('#cancelDetailsContent');

        // Mostrar loading no modal
        $content.html(`
            <div class="text-center py-5">
                <div class="spinner-border text-info" role="status">
                    <span class="sr-only">A carregar...</span>
                </div>
                <p class="mt-2">A carregar informações do cancelamento...</p>
            </div>
        `);

        // Mostrar o modal
        $modal.modal('show');

        // Carregar detalhes via AJAX
        $.ajax({
            url: '{{ route("admin.orders.cancel-details", $order->ord_id) }}',
            method: 'GET',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    // Construir conteúdo do modal
                    let html = '';

                    if (response.data) {
                        const data = response.data;
                        const cancelledAt = data.cancelled_at ? new Date(data.cancelled_at).toLocaleString('pt-PT') : 'N/A';
                        const cancelledBy = data.cancelled_by_name || 'Sistema';

                        html = `
                            <div class="cancel-details-container">
                                <!-- Informações básicas -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fa fa-file-invoice"></i> Informações da Encomenda</h6>
                                    </div>
                                    <div class="card-body">
                                        <table class="table table-sm table-borderless">
                                            <tr>
                                                <td width="30%"><strong>Nº Encomenda:</strong></td>
                                                <td>#${data.order_id}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Data Cancelamento:</strong></td>
                                                <td>${cancelledAt}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Cancelado por:</strong></td>
                                                <td>${cancelledBy}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Valor da Encomenda:</strong></td>
                                                <td class="text-danger">${data.order_total || '0.00'}€</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                                <!-- Motivo do cancelamento -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fa fa-comment"></i> Motivo do Cancelamento</h6>
                                    </div>
                                    <div class="card-body">
                                        ${data.reason ? `
                                            <div class="alert alert-light border">
                                                <p class="mb-0">${data.reason}</p>
                                            </div>
                                        ` : `
                                            <div class="text-center text-muted py-3">
                                                <i class="fa fa-comment-slash fa-2x mb-2"></i>
                                                <p>Nenhum motivo especificado</p>
                                            </div>
                                        `}
                                    </div>
                                </div>

                                <!-- Histórico relacionado -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fa fa-history"></i> Histórico do Cancelamento</h6>
                                    </div>
                                    <div class="card-body">
                                        ${data.history && data.history.length > 0 ? `
                                            <div class="timeline">
                                                ${data.history.map(item => `
                                                    <div class="timeline-item mb-3">
                                                        <div class="timeline-marker bg-${item.type || 'info'}"></div>
                                                        <div class="timeline-content">
                                                            <div class="d-flex justify-content-between">
                                                                <strong>${item.action || 'Ação'}</strong>
                                                                <small class="text-muted">${item.date || ''}</small>
                                                            </div>
                                                            <p class="mb-1 small">${item.description || ''}</p>
                                                            <small class="text-muted">Por: ${item.user || 'Sistema'}</small>
                                                        </div>
                                                    </div>
                                                `).join('')}
                                            </div>
                                        ` : `
                                            <div class="text-center text-muted py-3">
                                                <i class="fa fa-history fa-2x mb-2"></i>
                                                <p>Nenhum histórico disponível</p>
                                            </div>
                                        `}
                                    </div>
                                </div>

                                <!-- Ações tomadas após cancelamento -->
                                <div class="card">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0"><i class="fa fa-cogs"></i> Ações Automáticas</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" 
                                                           ${data.stock_restored ? 'checked' : ''} disabled>
                                                    <label class="form-check-label">
                                                        <i class="fa fa-boxes"></i> Stock reposto
                                                    </label>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" 
                                                           ${data.client_notified ? 'checked' : ''} disabled>
                                                    <label class="form-check-label">
                                                        <i class="fa fa-envelope"></i> Cliente notificado
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" 
                                                           ${data.invoice_cancelled ? 'checked' : ''} disabled>
                                                    <label class="form-check-label">
                                                        <i class="fa fa-file-invoice"></i> Fatura anulada
                                                    </label>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" 
                                                           ${data.payment_refunded ? 'checked' : ''} disabled>
                                                    <label class="form-check-label">
                                                        <i class="fa fa-money-bill-wave"></i> Reembolso processado
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    } else {
                        html = `
                            <div class="text-center py-5">
                                <i class="fa fa-exclamation-circle fa-3x text-warning mb-3"></i>
                                <h4>Informações não disponíveis</h4>
                                <p class="text-muted">Não foram encontrados detalhes específicos deste cancelamento.</p>
                            </div>
                        `;
                    }

                    $content.html(html);
                } else {
                    // Erro ao carregar
                    $content.html(`
                        <div class="alert alert-danger">
                            <h5><i class="fa fa-exclamation-triangle"></i> Erro</h5>
                            <p>${response.message || 'Não foi possível carregar os detalhes do cancelamento.'}</p>
                            <button class="btn btn-sm btn-outline-danger" onclick="location.reload()">
                                <i class="fa fa-redo"></i> Tentar Novamente
                            </button>
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                $content.html(`
                    <div class="alert alert-danger">
                        <h5><i class="fa fa-exclamation-triangle"></i> Erro de Comunicação</h5>
                        <p>Não foi possível conectar ao servidor.</p>
                        <pre class="small mt-2">${xhr.status} - ${xhr.statusText}</pre>
                    </div>
                `);
            }
        });
    });

    // ============================================
    // REMOVER DETALHES DO CANCELAMENTO
    // ============================================
    $('#btnRemoveCancelDetails').on('click', function() {
        const orderId = {{ $order->ord_id }};

        showConfirmation({
            type: 'danger',
            title: '<i class="fa fa-trash"></i> Remover Detalhes',
            message: 'Tem a certeza que deseja remover os detalhes do cancelamento?',
            details: `
                <div class="alert alert-warning">
                    <i class="fa fa-exclamation-triangle"></i>
                    <strong>Atenção:</strong> Esta ação irá:
                    <ul class="mb-0 mt-1">
                        <li>Remover o motivo do cancelamento</li>
                        <li>Manter o estado "Cancelada"</li>
                        <li>Esta ação não pode ser desfeita</li>
                    </ul>
                </div>
            `,
            confirmText: 'Remover Detalhes',
            confirmIcon: 'fa-trash',
            confirmClass: 'btn-danger',
            onConfirm: function() {
                // Mostrar spinner
                $('#dm-loader').show();

                $.ajax({
                    url: '/admin/orders/' + orderId + '/remove-cancel-details',
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // Esconder spinner
                        $('#dm-loader').hide();

                        if (response.success) {
                            // Fechar modais
                            $('#cancelDetailsModal').modal('hide');

                            toast.success(response.message, 'Sucesso', 3000);

                            // Recarregar página após 1 segundo
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            toast.error(response.message || 'Erro ao remover detalhes', 'Erro!', 5000);
                        }
                    },
                    error: function() {
                        // Esconder spinner
                        $('#dm-loader').hide();

                        toast.error('Erro ao remover detalhes do cancelamento.', 'Erro!', 5000);
                    }
                });
            }
        });
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const resendModal = document.getElementById('resendConfirmationModal');
    
    if (!resendModal) {
        console.error('❌ Modal de reenvio não encontrado');
        return;
    }
    
    // Criar instância do modal Bootstrap
    const modalInstance = new bootstrap.Modal(resendModal);
    
    // Configurar todos os botões de reenvio
    document.querySelectorAll('.btn-resend-confirmation').forEach(btn => {
        // Remover atributos que podem causar conflito
        btn.removeAttribute('data-toggle');
        btn.removeAttribute('data-target');
        btn.removeAttribute('data-bs-toggle');
        btn.removeAttribute('data-bs-target');
        
        // Adicionar evento de clique
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Extrair dados do botão
            const customerName = this.dataset.customerName || 'Cliente';
            const customerEmail = this.dataset.customerEmail || 'Não definido';
            const orderNumber = this.dataset.orderNumber || 'N/A';
            const orderId = this.dataset.orderId;
            
            // Validar dados essenciais
            if (!orderId) {
                toast.error('ID do pedido não encontrado', 'Erro!', 5000);
                return;
            }
            
            // Preencher dados no modal
            document.getElementById('customerName').textContent = customerName;
            document.getElementById('customerEmail').textContent = customerEmail;
            document.getElementById('orderNumber').textContent = orderNumber;
            
            // Armazenar ID do pedido no botão de confirmação
            const confirmBtn = document.getElementById('confirmResend');
            confirmBtn.dataset.orderId = orderId;
            
            // Resetar estado do botão de confirmação (caso tenha sido usado antes)
            resetConfirmButton();
            
            // Abrir modal
            modalInstance.show();
        });
    });
    
    // Configurar botão de confirmação dentro do modal
    const confirmBtn = document.getElementById('confirmResend');
    if (confirmBtn) {
        confirmBtn.addEventListener('click', async function() {
            const orderId = this.dataset.orderId;
            
            if (!orderId) {
                toast.error('ID do pedido não encontrado', 'Erro!', 5000);
                return;
            }
            
            // Obter checkbox de cópia para admin (se existir)
            const sendCopyCheckbox = document.getElementById('send_copy_to_admin');
            const sendCopy = sendCopyCheckbox ? sendCopyCheckbox.checked : false;
            
            // Mostrar estado de loading
            showLoadingState(this, true);
            
            try {
                const response = await fetch(`/donamarmita-admin/orders/${orderId}/resend-payment-details`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        send_copy_to_admin: sendCopy ? 1 : 0
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // Fechar modal
                    modalInstance.hide();
                    
                    // Toast de sucesso
                    toast.success(result.message || 'E-mail enviado com sucesso!', 'Sucesso', 3000);
                } else {
                    throw new Error(result.message || 'Erro ao enviar e-mail');
                }
            } catch (error) {
                // Toast de erro
                toast.error(error.message || 'Erro ao reenviar e-mail', 'Erro!', 5000);
                
                // Mudar botão para estado de erro
                showErrorState(this);
                
                // Restaurar após 3 segundos
                setTimeout(() => resetConfirmButton(), 3000);
            } finally {
                // Em caso de sucesso, resetar depois de fechar o modal
                setTimeout(() => resetConfirmButton(), 500);
            }
        });
    }
    
    // Funções auxiliares
    function showLoadingState(button, isLoading) {
        const btnText = button.querySelector('.btn-text');
        const spinner = button.querySelector('.spinner-border');
        const icon = button.querySelector('.fa');
        
        button.disabled = isLoading;
        
        if (isLoading) {
            if (btnText) btnText.textContent = 'Enviando...';
            if (icon) icon.classList.add('d-none');
            if (spinner) spinner.classList.remove('d-none');
            button.classList.remove('btn-danger');
            button.classList.add('btn-primary');
        }
    }
    
    function showErrorState(button) {
        const btnText = button.querySelector('.btn-text');
        const spinner = button.querySelector('.spinner-border');
        const icon = button.querySelector('.fa');
        
        button.disabled = false;
        if (btnText) btnText.textContent = 'Tentar novamente';
        if (icon) icon.classList.remove('d-none');
        if (spinner) spinner.classList.add('d-none');
        button.classList.remove('btn-primary');
        button.classList.add('btn-danger');
    }
    
    function resetConfirmButton() {
        const confirmBtn = document.getElementById('confirmResend');
        if (!confirmBtn) return;
        
        const btnText = confirmBtn.querySelector('.btn-text');
        const spinner = confirmBtn.querySelector('.spinner-border');
        const icon = confirmBtn.querySelector('.fa');
        
        confirmBtn.disabled = false;
        if (btnText) btnText.textContent = 'Confirmar Reenvio';
        if (icon) icon.classList.remove('d-none');
        if (spinner) spinner.classList.add('d-none');
        confirmBtn.classList.remove('btn-danger');
        confirmBtn.classList.add('btn-primary');
    }
    
    console.log('✅ Sistema de reenvio configurado com sucesso!');
});

</script>
@endpush