@extends('donamarmita-admin')
@section('title', 'Packs 60 - Segundo Envio - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fas fa-truck-double text-info"></i> Packs 60 - Segundo Envio</h1>
            <p class="text-muted">Gestão dos packs que necessitam de segundo envio programado</p>
        </div>
        <div class="title_right text-right">
            <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-info btn-sm">
                <i class="fas fa-external-link-alt"></i> Voltar às Encomendas
            </a>
        </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">Packs 60 - Segundo Envio</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row tile_count">
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-clock text-warning"></i> Aguardam 2º Envio</span>
            <div class="count text-warning">{{ number_format($pendingSecondShipment, 0) }}</div>
            <span class="count_bottom">
                <a href="javascript:void(0)" 
                    class="text-warning filter-btn" 
                    data-filter="pending">
                    <i class="fa fa-filter"></i> Filtrar pendentes
                </a>
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-check-circle" style="color: #27ae60;"></i> 2º Envio Concluído</span>
            <div class="count" style="color: #27ae60;">{{ number_format($completedSecondShipment, 0) }}</div>
            <span class="count_bottom">
                <span class="count_bottom">
                    <i class="fa fa-calendar-check"></i> {{ $avgDaysBetweenShipments }} dias (intervalo médio)
                </span>
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-calendar-alt" style="color: #3498db;"></i> Este Mês</span>
            <div class="count" style="color: #3498db;">{{ number_format($thisMonthPack60, 0) }}</div>
            <span class="count_bottom">
                <span class="count_bottom">
                    <i class="fa fa-arrow-up"></i> {{ number_format($monthlyGrowth, 1) }}% vs mês anterior
                </span>
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> Atrasados</span>
            <div class="count" style="color: #e74c3c;">{{ number_format($overdueShipments, 0) }}</div>
            <span class="count_bottom">
                <a href="javascript:void(0)" 
                    class="text-danger view-overdue-btn">
                    <i class="fa fa-eye"></i> Ver detalhes
                </a>
            </span>
        </div>
    </div>

    <!-- Alert Section -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="alert alert-info alert-dismissible fade show information" role="alert">
                <h4 class="alert-heading"><i class="fa fa-info-circle"></i> Informação sobre Packs 60</h4>
                <p class="mb-2">Os <strong>Packs 60</strong> são enviados em duas fases: <strong>primeiro envio automático</strong> e <strong>segundo envio programado</strong>.</p>
                <p class="mb-0">
                    <strong>Fluxo de trabalho:</strong> Registar o segundo envio quando for realizado. Os atrasados ficam destacados em vermelho.
                </p>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <strong><i class="fa fa-lightbulb"></i> Dica:</strong> 
                        <small>Use os filtros rápidos para organizar o trabalho diário.</small>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="javascript:void(0)" class="btn btn-sm btn-outline-info" id="exportPack60">
                            <i class="fa fa-file-excel"></i> Exportar para Excel
                        </a>
                        <button type="button" class="btn btn-sm btn-primary ml-2" id="bulkRegisterBtn">
                            <i class="fa fa-plus-circle"></i> Registar Vários
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Analysis Cards -->
    <div class="row mb-3">
        <div class="col-md-6">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-chart-bar"></i> Distribuição por Estado</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="chart-container">
                        <canvas id="statusDistributionChart"></canvas>
                    </div>

                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="fa fa-info-circle"></i> 
                            {{ $pendingSecondShipment }} packs aguardam segundo envio ({{ number_format($pendingPercentage, 1) }}%)
                        </small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-calendar"></i> Intervalo Entre Envios</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="chart-container">
                        <canvas id="intervalDistributionChart"></canvas>
                    </div>

                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="fa fa-info-circle"></i> 
                            {{ $overdueShipments }} packs com intervalo superior a 30 dias
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Clients with Pack 60 -->
    @if(isset($frequentClients) && $frequentClients->count() > 0)
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-users"></i> Clientes Frequentes de Pack 60</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        @foreach($frequentClients as $index => $client)
                        <div class="col-md-3 col-sm-6 col-xs-6">
                            <div class="card border-info">
                                <div class="card-body p-3">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle mr-3" 
                                             style="width: 50px; height: 50px; background-color: {{ ['#3498DB', '#2980B9', '#1F618D', '#154360'][$index] }};">
                                            <span class="text-white font-weight-bold">
                                                {{ substr($client->first_name, 0, 1) }}{{ substr($client->last_name, 0, 1) }}
                                            </span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1 font-weight-bold">
                                                {{ Str::limit($client->first_name . ' ' . $client->last_name, 20) }}
                                            </h6>
                                            <div class="small">
                                                <span class="badge badge-info">
                                                    <i class="fa fa-box"></i> {{ $client->pack_count }} packs
                                                </span>
                                                <span class="badge badge-light ml-1">
                                                    <i class="fa fa-history"></i> {{ $client->total_days }} dias total
                                                </span>
                                            </div>
                                            <div class="small text-muted mt-1">
                                                <i class="fa fa-phone"></i> {{ $client->phone }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Delivery Day Distribution -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-calendar-day"></i> Dias de Entrega Preferidos</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        @foreach($deliveryDayDistribution as $day)
                        <div class="col-md-3 col-sm-4 col-xs-6 text-center">
                            <div class="card border-0">
                                <div class="card-body">
                                    <div class="h4 mb-2 {{ $day['count'] > 20 ? 'text-primary' : 'text-secondary' }}">
                                        {{ $day['count'] }}
                                    </div>
                                    <div class="small text-muted mb-1">
                                        <i class="fa {{ $day['icon'] }}"></i> {{ $day['name'] }}
                                    </div>
                                    <div class="progress" style="height: 6px;">
                                        <div class="progress-bar bg-{{ $day['count'] > 20 ? 'primary' : 'info' }}" 
                                             role="progressbar" 
                                             style="width: {{ $day['percentage'] }}%"
                                             aria-valuenow="{{ $day['percentage'] }}" 
                                             aria-valuemin="0" 
                                             aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">{{ number_format($day['percentage'], 1) }}%</small>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Filters -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="btn-group btn-group-justified" role="group">    
                <a href="#" class="btn btn-outline-warning filter-status active" data-status="pending">
                    <i class="fa fa-clock"></i> Pendentes ({{ $pendingSecondShipment }})
                </a>
                <a href="#" class="btn btn-outline-success filter-status" data-status="completed">
                    <i class="fa fa-check-circle"></i> Concluídos ({{ $completedSecondShipment }})
                </a>
                <a href="#" class="btn btn-outline-danger filter-status" data-status="overdue">
                    <i class="fa fa-exclamation-triangle"></i> Atrasados ({{ $overdueShipments }})
                </a>
                <a href="#" class="btn btn-outline-info filter-days" data-days="7">
                    <i class="fa fa-calendar-week"></i> Últimos 7 dias ({{ $last7DaysCount }})
                </a>            
                <a href="#" class="btn btn-outline-dark" id="showAllPacksBtn">
                    <i class="fa fa-list"></i> Ver Todos ({{ $totalPack60Orders }})
                </a>
            </div>
        </div>
    </div>

    <!-- Main Table -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-boxes"></i> Packs 60 - Gestão de Segundo Envio</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <button type="button" class="btn btn-success btn-sm" id="quickRegisterBtn">
                                <i class="fa fa-truck"></i> Registar Envio Rápido
                            </button>
                        </li>
                        <li>
                            <a href="{{ route('admin.orders.index') }}" 
                               class="btn btn-outline-secondary btn-sm" style="color: #333 !important;">
                                <i class="fa fa-arrow-left"></i> Voltar às Encomendas
                            </a>
                        </li>
                        <li>
                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    @if($orders->isEmpty())
                    <div class="text-center py-5">
                        <i class="fa fa-check-circle fa-4x text-success mb-3"></i>
                        <h4 class="text-success">Tudo em dia!</h4>
                        <p class="text-muted">Não existem Packs 60 pendentes de segundo envio.</p>
                        <p class="text-muted small">Todos os segundos envios foram registados.</p>
                    </div>
                    @else
                    
                    <!-- Summary Info -->
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <div class="alert alert-info information">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fa fa-info-circle"></i>
                                        <strong>Gestão de Segundo Envio:</strong> 
                                        <span id="pack60-summary"
                                              data-total="{{ $pendingSecondShipment }}">
                                            {{ $pendingSecondShipment }} packs aguardam segundo envio
                                        </span>
                                    </div>
                                    <div class="text-right">
                                        <small class="text-muted">
                                            <i class="fa fa-lightbulb"></i> 
                                            Dica: Clique no ícone <i class="fas fa-truck text-primary"></i> para registar o segundo envio
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Responsive Table -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover jambo_table" id="pack60Table">
                            <thead class="thead-dark">
                                <tr class="headings">
                                    <th class="column-title text-center" style="width: 8%;">
                                        <i class="fa fa-hashtag"></i> ID
                                    </th>
                                    <th class="column-title" style="width: 25%;">
                                        <i class="fa fa-user"></i> Cliente
                                    </th>
                                    <th class="column-title text-center" style="width: 12%;">
                                        <i class="fa fa-calendar"></i> 1º Envio
                                    </th>
                                    <th class="column-title text-center" style="width: 12%;">
                                        <i class="fa fa-truck"></i> 2º Envio
                                    </th>
                                    <th class="column-title text-center" style="width: 8%;">
                                        <i class="fa fa-clock"></i> Intervalo
                                    </th>
                                    <th class="column-title text-center" style="width: 8%;">
                                        <i class="fa fa-box"></i> Estado
                                    </th>
                                    <th class="column-title text-center" style="width: 12%;">
                                        <i class="fa fa-map-marker-alt"></i> Entrega
                                    </th>
                                    <th class="column-title text-center" style="width: 15%;">
                                        <i class="fa fa-cog"></i> Ações
                                    </th>
                                </tr>
                            </thead>                            
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
<div class="modal fade" id="registerShipmentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-truck"></i> Registar Segundo Envio
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="shipmentForm">
                    @csrf
                    <input type="hidden" name="order_id" id="modalOrderId">
                    
                    <div class="form-group">
                        <label for="shipment_date">
                            <i class="fa fa-calendar"></i> Data do Segundo Envio
                        </label>
                        <input type="date" 
                               class="form-control" 
                               id="shipment_date" 
                               name="shipment_date"
                               value="{{ date('Y-m-d') }}"
                               required>
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="notes">
                            <i class="fa fa-sticky-note"></i> Observações (opcional)
                        </label>
                        <textarea class="form-control" 
                                  id="notes" 
                                  name="notes" 
                                  rows="3"
                                  placeholder="Ex: Entregue ao porteiro, cliente ausente, etc."></textarea>
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="tracking_number">
                            <i class="fa fa-barcode"></i> Número de Rastreio (opcional)
                        </label>
                        <input type="text" 
                               class="form-control" 
                               id="tracking_number" 
                               name="tracking_number"
                               placeholder="Código de acompanhamento da transportadora">
                        <div class="invalid-feedback"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="saveShipmentBtn">
                    <i class="fa fa-save"></i> Guardar Registo
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="bulkRegisterModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fa fa-truck-loading"></i> Registar Vários Envios
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fa fa-info-circle"></i> Selecione as encomendas para registar o segundo envio em lote.
                </div>
                
                <div class="table-responsive">
                    <table class="table table-sm" id="bulkSelectionTable">
                        <thead>
                            <tr>
                                <th style="width: 5%;">
                                    <input type="checkbox" id="selectAllBulk">
                                </th>
                                <th style="width: 10%;">ID</th>
                                <th style="width: 25%;">Cliente</th>
                                <th style="width: 20%;">1º Envio</th>
                                <th style="width: 15%;">Dias</th>
                                <th style="width: 25%;">Data 2º Envio</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($orders->where('second_shipment_date', null) as $order)
                            <tr>
                                <td>
                                    <input type="checkbox" 
                                           class="bulk-order-select" 
                                           value="{{ $order->id }}"
                                           data-customer="{{ $order->customer_name }}">
                                </td>
                                <td>#{{ $order->id }}</td>
                                <td>{{ Str::limit($order->customer_name, 25) }}</td>
                                <td>{{ \Carbon\Carbon::parse($order->first_shipment_date)->format('d/m/Y') }}</td>
                                <td>
                                    <span class="badge {{ $order->days_since_first > 30 ? 'badge-danger' : 'badge-warning' }}">
                                        {{ $order->days_since_first }} dias
                                    </span>
                                </td>
                                <td>
                                    <input type="date" 
                                           class="form-control form-control-sm bulk-shipment-date" 
                                           data-order-id="{{ $order->id }}"
                                           value="{{ date('Y-m-d') }}">
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="sendNotificationsManual" checked>
                    <label class="custom-control-label" for="sendNotificationsManual">
                        <i class="fas fa-bell"></i> Enviar notificação aos clientes
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" id="saveBulkShipmentBtn">
                    <i class="fa fa-save"></i> Registar Selecionados
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="overdueShipmentsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fa fa-exclamation-triangle"></i> Packs 60 Atrasados
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fa fa-exclamation-circle"></i> Estes packs têm o segundo envio atrasado há mais de 30 dias.
                </div>
                
                <div class="list-group">
                    @foreach($overdueOrders as $overdue)
                    <div class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">
                                #{{ $overdue->id }} - {{ $overdue->customer_name }}
                            </h6>
                            <span class="badge badge-danger">
                                {{ $overdue->days_since_first }} dias
                            </span>
                        </div>
                        <p class="mb-1">
                            <strong>1º Envio:</strong> {{ \Carbon\Carbon::parse($overdue->first_shipment_date)->format('d/m/Y') }}
                        </p>
                        <small class="text-muted">
                            <i class="fa fa-phone"></i> {{ $overdue->phone }}
                        </small>
                        <div class="mt-2">
                            <button type="button" 
                                    class="btn btn-sm btn-danger register-overdue-btn"
                                    data-order-id="{{ $overdue->id }}">
                                <i class="fas fa-truck"></i> Registar Agora
                            </button>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="quickRegisterModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-truck-loading"></i> Registar Envios em Lote
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <div class="display-4 text-success mb-3">
                        <i class="fas fa-shipping-fast"></i>
                    </div>
                    <h4>Confirmar Registo Rápido</h4>
                </div>
                
                <div class="alert alert-info">
                    <div class="d-flex">
                        <div class="mr-3">
                            <i class="fas fa-info-circle fa-2x"></i>
                        </div>
                        <div>
                            <strong>Atenção:</strong> Esta ação irá registar o <strong>2º envio</strong> 
                            para todas as encomendas pendentes visíveis na tabela.
                        </div>
                    </div>
                </div>
                
                <div class="card border-success mb-3">
                    <div class="card-header bg-light">
                        <i class="fas fa-list-ol"></i> Detalhes da Operação
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-5">
                                <div class="display-4 text-primary" id="orderCountDisplay">0</div>
                                <small class="text-muted">Encomendas</small>
                            </div>
                            <div class="col-md-7">
                                <div class="display-4 text-success" id="currentDateDisplay">{{ date('d/m/Y') }}</div>
                                <small class="text-muted">Data do Envio</small>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="customShipmentDate">
                        <i class="fas fa-calendar-alt"></i> Data do Envio (opcional)
                    </label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-calendar-day"></i>
                            </span>
                        </div>
                        <input type="date" 
                               class="form-control" 
                               id="customShipmentDate" 
                               value="{{ date('Y-m-d') }}">
                    </div>
                    <small class="form-text text-muted">
                        Deixe em branco para usar a data de hoje.
                    </small>
                </div>
                
                <div class="custom-control custom-checkbox mb-3">
                    <input type="checkbox" class="custom-control-input" id="sendNotificationsQuick" checked>
                    <label class="custom-control-label" for="sendNotificationsQuick">
                        <i class="fas fa-bell"></i> Enviar notificação aos clientes
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Cancelar
                </button>
                <button type="button" class="btn btn-success" id="confirmQuickRegister">
                    <i class="fas fa-check-circle"></i> Confirmar e Registar
                </button>
            </div>
        </div>
    </div>
</div>

<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>
@endsection

@push('styles')
<style>
    .tile_stats_count .count {
        font-size: 28px;
        font-weight: bold;
    }
    
    .table-danger {
        background-color: #ffe6e6 !important;
    }
    
    .table-warning {
        background-color: #fff3cd !important;
    }
    
    .badge-danger {
        background-color: #dc3545;
    }
    
    .badge-warning {
        background-color: #ffc107;
        color: #212529;
    }
    
    .badge-info {
        background-color: #17a2b8;
    }
    
    .badge-success {
        background-color: #28a745;
    }
    
    .avatar-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        font-weight: bold;
    }
    
    .card.border-info {
        border: 2px solid #17a2b8 !important;
    }
    
    .progress-bar {
        transition: width 0.6s ease;
    }
    
    .btn-group .btn {
        border-radius: 4px !important;
    }
    
    .information {
        background-color: #e3f2fd;
        border-color: #bbdefb;
        color: #1565c0;
    }
    
    .chart-container {
        position: relative;
        height: 300px;
    }
    
    .register-shipment-btn:hover {
        transform: scale(1.05);
        transition: transform 0.2s;
    }
    
    #bulkSelectionTable tbody tr:hover {
        background-color: #f8f9fa;
    }
    
/* Estilos para o modal de confirmação rápida */
#quickRegisterModal .modal-header {
    border-bottom: 2px solid #28a745;
}

#quickRegisterModal .alert-info {
    background-color: #e8f4fd;
    border-color: #b6e0fe;
}

#quickRegisterModal .card.border-success {
    border: 2px solid #28a745 !important;
}

#quickRegisterModal .display-4 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

/* Animação para o botão de confirmação */
#confirmQuickRegister {
    transition: all 0.3s ease;
    min-width: 150px;
}

#confirmQuickRegister:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* Estilo para a data customizada */
#customShipmentDate {
    border-color: #28a745;
}

#customShipmentDate:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // ====================
    // 1. GRÁFICO DE ESTADO
    // ====================
    const statusCtx = document.getElementById('statusDistributionChart').getContext('2d');
    const statusChart = new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: ['Pendentes', 'Concluídos', 'Atrasados'],
            datasets: [{
                data: [
                    {{ $pendingSecondShipment }},
                    {{ $completedSecondShipment }},
                    {{ $overdueShipments }}
                ],
                backgroundColor: [
                    '#ffc107', // Amarelo - Pendentes
                    '#28a745', // Verde - Concluídos
                    '#dc3545'  // Vermelho - Atrasados
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = {{ $totalPack60Orders }};
                            const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });

    // ===========================
    // 2. GRÁFICO DE INTERVALO
    // ===========================
    let intervalChart = null;
    
    const intervalCtx = document.getElementById('intervalDistributionChart').getContext('2d');
    
    // Dados de exemplo - deverás substituir pelos dados reais do controller
    const intervalData = {
        labels: ['0-7 dias', '8-14 dias', '15-21 dias', '22-30 dias', '+30 dias'],
        datasets: [{
            label: 'Número de Packs',
            data: {!! json_encode($intervalData ?? [15,12,8,5,3]) !!},
            backgroundColor: [
                '#2ecc71', // Verde claro
                '#3498db', // Azul
                '#9b59b6', // Roxo
                '#f39c12', // Laranja
                '#e74c3c'  // Vermelho
            ],
            borderColor: '#fff',
            borderWidth: 1
        }]
    };
    
    intervalChart = new Chart(intervalCtx, {
        type: 'bar',
        data: intervalData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `Packs: ${context.raw}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Número de Packs'
                    },
                    ticks: {
                        stepSize: 1
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Intervalo Entre Envios'
                    }
                }
            }
        }
    });

    // ===========================
    // 3. GRÁFICO DE DISTRIBUIÇÃO MENSAL (Modal)
    // ===========================
    $('#withoutInvoiceChartModal').on('shown.bs.modal', function() {
        const monthlyCtx = document.getElementById('monthlyDistributionChart').getContext('2d');
        
        // Dados de exemplo - substituir por dados do controller
        const monthlyData = {
            labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],
            datasets: [{
                label: 'Packs 60',
                data: [12, 19, 8, 15, 22, 18],
                backgroundColor: 'rgba(52, 152, 219, 0.5)',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                tension: 0.4
            }]
        };
        
        new Chart(monthlyCtx, {
            type: 'line',
            data: monthlyData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Número de Packs'
                        }
                    }
                }
            }
        });
    });

    // ===========================
    // 4. ATUALIZAÇÃO DINÂMICA DOS GRÁFICOS COM FILTROS
    // ===========================
    function refreshPack60Stats() {
        $.ajax({
            url: '{{ route("admin.orders.pack60.filtered-stats") }}',
            method: 'GET',
            data: {
                status: pack60StatusFilter,
                days: pack60DaysFilter
            },
            success: function (response) {

                // 1. Gráfico de estado
                if (statusChart) {
                    statusChart.data.datasets[0].data = [
                        response.pending ?? 0,
                        response.completed ?? 0,
                        response.overdue ?? 0
                    ];
                    statusChart.update();
                }

                // 2. Gráfico de intervalos (MAPA 👀)
                if (intervalChart && response.intervals) {
                    intervalChart.data.datasets[0].data = response.intervals;
                    intervalChart.update();
                }

                // 3. Contadores / UI
                updateCounters(response);
            }
        });
    }
    
    $('.filter-status').on('click', function (e) {
        e.preventDefault();

        $('.filter-status').removeClass('active');
        $(this).addClass('active');

        pack60StatusFilter = $(this).data('status'); // pending | completed | overdue
        pack60DaysFilter   = null;

        pack60Table.ajax.reload();
        refreshPack60Stats();
    });

    $('.filter-days').on('click', function (e) {
        e.preventDefault();

        $('.filter-status').removeClass('active');
        $(this).addClass('active');

        pack60StatusFilter = null;
        pack60DaysFilter   = $(this).data('days'); // 7

        pack60Table.ajax.reload();
        refreshPack60Stats();
    });

    $('#showAllPacksBtn').on('click', function (e) {
        e.preventDefault();

        $('.filter-status').removeClass('active');

        pack60StatusFilter = 'all';
        pack60DaysFilter   = null;

        pack60Table.ajax.reload();
        refreshPack60Stats();
    });

    // ===========================
    // 5. FUNÇÕES AUXILIARES
    // ===========================
    function showLoading() {
        $('#statusDistributionChart, #intervalDistributionChart').fadeTo(200, 0.3);
        $('.chart-container').append('<div class="chart-loading"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
    }
    
    function hideLoading() {
        $('#statusDistributionChart, #intervalDistributionChart').fadeTo(200, 1);
        $('.chart-loading').remove();
    }
    
    function updateCounters(data) {
        // Atualizar os counters do topo
        $('.tile_stats_count .count').eq(0).text(data.pending).fadeOut(100).fadeIn(100);
        $('.tile_stats_count .count').eq(1).text(data.completed).fadeOut(100).fadeIn(100);
        $('.tile_stats_count .count').eq(3).text(data.overdue).fadeOut(100).fadeIn(100);
        
        // Atualizar botões de filtro
        $('.filter-status[data-status="pending"]').html(`<i class="fa fa-clock"></i> Pendentes (${data.pending})`);
        $('.filter-status[data-status="completed"]').html(`<i class="fa fa-check-circle"></i> Concluídos (${data.completed})`);
        $('.filter-status[data-status="overdue"]').html(`<i class="fa fa-exclamation-triangle"></i> Atrasados (${data.overdue})`);
    
        // 🔥 Badge do layout
        $('#pack60-pending-count')
            .text(data.pending)
            .fadeOut(100)
            .fadeIn(100);
    }

    // ===========================
    // 6. ESTILOS PARA LOADING
    // ===========================
    const style = document.createElement('style');
    style.innerHTML = `
        .chart-loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.8);
            z-index: 1000;
        }
        .chart-loading i {
            color: #3498db;
        }
    `;
    document.head.appendChild(style);
    
    // ====================
    // 7. DATA TABLE
    // ====================
    let pack60StatusFilter = 'pending'; // default ativo
    let pack60DaysFilter   = null;      

    const pack60Table = $('#pack60Table')
        .on('processing.dt', function (e, settings, processing) {
            $('#dm-loader').toggle(processing);
        })
        .DataTable({
            processing: true,
            serverSide: true,
            pageLength: 20,
            lengthMenu: [[20,50,100],[20,50,100]],
            order: [[0, 'desc']],
            dom: '<"datatable-toolbar d-flex justify-content-between align-items-center mb-2"lf>rtip',
            ajax: {
                url: '{{ route("admin.orders.pack60.data") }}',
                type: 'GET',
                data: function (d) {
                    d.status = pack60StatusFilter; // pending | completed | overdue | all
                    d.days   = pack60DaysFilter;   // 7 | null
                }
            },
            language: {
                url: '/vendor/datatables/Portuguese.json',
                search: '',
                processing: ''
            },
            columns: [
                { data: 'order' },
                { data: 'client' },
                { data: 'first' },
                { data: 'second' },
                { data: 'interval' },
                { data: 'status' },
                { data: 'delivery' },
                { data: 'actions', orderable: false }
            ],
            columnDefs: [
                { targets: [0,2,3,4,5,6,7], className: 'text-center align-middle' },
                { targets: [1], className: 'align-middle' }
            ],
            initComplete: function () {
                const $filter = $('#pack60Table_filter');
                const $input  = $filter.find('input');

                $input
                    .attr('placeholder', 'Pesquisar encomenda, cliente ou telefone...')
                    .on('input', function () {
                        $filter.toggleClass('has-value', this.value.length > 0);
                    });
                    
                // 🔁 Atualizar contadores e gráficos
                refreshPack60Stats();
            }
        });
    
    refreshPack60Stats();

    $(document).on('click', '.register-shipment-btn', function () {
        const orderId = $(this).data('order-id');
        const orderNumber = $(this).data('order-number');
        const customer = $(this).data('customer');

        $('#modalOrderId').val(orderId);
        $('#registerShipmentModal .modal-title')
            .html(`<i class="fas fa-truck"></i> Registar 2º Envio - #${orderNumber}`);

        $('#registerShipmentModal').modal('show');
    });
    
    // Guardar registo de envio
    $('#saveShipmentBtn').on('click', function () {
        const $modal = $('#registerShipmentModal');
        const mode   = $modal.data('mode') ?? 'create';
        const orderId = $('#modalOrderId').val();

        const url = mode === 'edit'
            ? `/donamarmita-admin/orders/pack60/shipment/${orderId}`
            : `{{ route("admin.orders.pack60.store") }}`;

        const method = mode === 'edit' ? 'PUT' : 'POST';

        const formData = $('#shipmentForm').serialize();

        $.ajax({
            url: url,
            method: method,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {

                showNotification(
                    'success',
                    'Sucesso',
                    mode === 'edit'
                        ? 'Segundo envio atualizado com sucesso!'
                        : 'Segundo envio registado com sucesso!'
                );

                $modal.modal('hide');

                // Limpar formulário
                $('#shipmentForm')[0].reset();
                $modal.removeData('mode');

                // 🔁 Recarregar DataTable mantendo filtros/página
                pack60Table.ajax.reload(null, false);

                // 🔁 Atualizar contadores e gráficos
                refreshPack60Stats();
            },
            error: function (xhr) {

                // Limpar erros antigos
                $('#shipmentForm .is-invalid').removeClass('is-invalid');
                $('#shipmentForm .invalid-feedback').text('');

                // ❗ Validação Laravel (422)
                if (xhr.status === 422 && xhr.responseJSON?.errors) {

                    const errors = xhr.responseJSON.errors;

                    Object.keys(errors).forEach(function (field) {
                        const input = $(`#shipmentForm [name="${field}"]`);

                        input.addClass('is-invalid');

                        // garantir feedback logo a seguir ao campo
                        let feedback = input.next('.invalid-feedback');
                        if (!feedback.length) {
                            input.after('<div class="invalid-feedback"></div>');
                            feedback = input.next('.invalid-feedback');
                        }

                        feedback.text(errors[field][0]);
                    });

                    return;
                }

                showNotification(
                    'error',
                    'Erro!',
                    xhr.responseJSON?.message ?? 'Erro ao guardar envio'
                );
            }
        });
    });
    
    $(document).on('click', '.edit-shipment-btn', function () {
        const orderId     = $(this).data('order-id');
        const orderNumber = $(this).data('order-number');
        const customer    = $(this).data('customer');
        const date        = $(this).data('shipment-date');
        const notes       = $(this).data('notes');
        const tracking    = $(this).data('tracking');

        // Preencher campos
        $('#modalOrderId').val(orderId);
        $('#shipment_date').val(date ?? '');
        $('#notes').val(notes ?? '');
        $('#tracking_number').val(tracking ?? '');

        // Ajustar título
        $('#registerShipmentModal .modal-title')
            .html(`<i class="fa fa-edit"></i> Editar 2º Envio - #${orderNumber}`);

        // Marcar modo edição
        $('#registerShipmentModal').data('mode', 'edit');

        $('#registerShipmentModal').modal('show');
    });
    
    $('#registerShipmentModal').on('hidden.bs.modal', function () {
        $('#shipmentForm')[0].reset();
        $(this).removeData('mode');
        $('#shipmentForm .is-invalid').removeClass('is-invalid');
        $('#shipmentForm .invalid-feedback').text('');
    });
    
    $('#quickRegisterBtn').on('click', function () {
        const orderIds = [];

        // Percorrer linhas visíveis da DataTable
        pack60Table.rows({ search: 'applied' }).every(function () {
            const row = this.node();
            const btn = $(row).find('.register-shipment-btn');

            if (btn.length) {
                orderIds.push(btn.data('order-id'));
            }
        });

        if (orderIds.length === 0) {
            showNotification('warning', 'Atenção', 'Não existem envios pendentes visíveis.');
            return;
        }

        // Guardar IDs no botão de confirmação
        $('#confirmQuickRegister')
            .data('order-ids', orderIds);

        // Atualizar UI do modal
        $('#orderCountDisplay').text(orderIds.length);

        $('#quickRegisterModal').modal('show');
    });

    // Quando confirmar no modal
    $('#confirmQuickRegister').on('click', function () {
        const orderIds = $(this).data('order-ids');
        const shipmentDate = $('#customShipmentDate').val();
        const sendNotifications = $('#sendNotificationsQuick').is(':checked');
        
        if (!orderIds || orderIds.length === 0) {
            showNotification('error', 'Erro', 'Nenhuma encomenda selecionada.');
            return;
        }

        // Fechar modal de confirmação
        $('#quickRegisterModal').modal('hide');

        // Mostrar o teu loader
        $('#dm-loader').fadeIn(200);

        // Pedido AJAX
        $.ajax({
            url: '{{ route("admin.orders.pack60.bulk.store") }}',
            method: 'POST',
            data: {
                order_ids: orderIds,
                shipment_date: shipmentDate,
                send_notifications: sendNotifications
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                const stats = response.stats || {};

                const registered = stats.registered ?? 0;
                const skipped    = stats.skipped ?? 0;
                const notified   = stats.notified ?? 0;

                // Esconder loader
                $('#dm-loader').fadeOut(200);
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

                // Criar modal de sucesso (HTML string)
                const successModalHtml = createResultModal(
                    'success',
                    'Sucesso!',
                    `
                    <i class="fas fa-check-circle fa-4x text-success mb-3"></i>
                    <h4 class="mb-3">${response.message}</h4>

                    <div class="alert alert-light border mt-3">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="h3 text-primary">${registered}</div>
                                <small class="text-muted">Registados</small>
                            </div>
                            <div class="col-4">
                                <div class="h3 text-warning">${skipped}</div>
                                <small class="text-muted">Ignorados</small>
                            </div>
                            <div class="col-4">
                                <div class="h3 text-info">${notified}</div>
                                <small class="text-muted">Notificados</small>
                            </div>
                        </div>
                    </div>
                    `,
                    'Concluir',
                    'btn-success',
                    'fas fa-check'
                );

                // Converter para jQuery object (FIX CRÍTICO)
                const $successModal = $(successModalHtml);

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

                // Ao fechar o modal → reload
                $successModal.on('hidden.bs.modal', function () {
                    $(this).remove();

                    if (typeof pack60Table !== 'undefined') {
                        pack60Table.ajax.reload(function () {

                            // Atualizar contadores + gráficos APÓS reload
                            if (typeof refreshPack60Stats !== 'undefined') {
                                refreshPack60Stats();
                            }

                        }, false);
                    }
                });
            },
            error: function (xhr) {
                // Esconder loader
                $('#dm-loader').fadeOut(200);
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

                let errorMessage = xhr.responseJSON?.message ?? 'Erro ao registar envios.';

                // Criar e mostrar modal de erro
                const errorModal = createResultModal(
                    'error',
                    'Erro!',
                    `
                    <i class="fas fa-exclamation-triangle fa-4x text-danger mb-3"></i>
                    <h4 class="mb-3">Ocorreu um erro</h4>
                    <p class="text-muted">${errorMessage}</p>
                    `,
                    'Fechar',
                    'btn-danger',
                    'fas fa-times'
                );

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

                // Remover do DOM quando fechar
                $(errorModal).on('hidden.bs.modal', function () {
                    $(this).remove();
                });
            }
        });
    });

    // Função auxiliar para criar modais de resultado
    function createResultModal(type, title, bodyHtml, btnText, btnClass, btnIcon) {
        const headerClass = type === 'success' ? 'bg-success' : 'bg-danger';
        const borderClass = type === 'success' ? 'border-success' : 'border-danger';

        const modalId = 'resultModal_' + Date.now();

        const modalHtml = `
            <div class="modal fade" id="${modalId}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content ${borderClass}">
                        <div class="modal-header ${headerClass} text-white">
                            <h5 class="modal-title">
                                <i class="${btnIcon}"></i> ${title}
                            </h5>
                            <button type="button" class="close text-white" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body text-center py-4">
                            ${bodyHtml}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn ${btnClass}" data-dismiss="modal">
                                <i class="${btnIcon}"></i> ${btnText}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Remover modal anterior se existir
        $('.modal').not('.show').remove();

        // Adicionar ao DOM
        $('body').append(modalHtml);

        return modalHtml;
    }

    // Função para formatar data (se ainda não tiveres)
    function formatDate(date) {
        return date.toLocaleDateString('pt-PT', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
        });
    }

    // Reset do modal quando fechar
    $('#quickRegisterModal').on('hidden.bs.modal', function () {
        $('#customShipmentDate').val('{{ date("Y-m-d") }}');
        $('#sendNotificationsQuick').prop('checked', true);
        $('#orderCountDisplay').text('0');
        $('#confirmQuickRegister').removeData('order-ids');
//        $('#confirmQuickRegister').removeData('order-details');
    });

    
    // Filtros rápidos
    $('.filter-status').click(function(e) {
        e.preventDefault();
        $('.filter-status').removeClass('active');
        $(this).addClass('active');
        
        const status = $(this).data('status');
        filterTableByStatus(status);
    });
    
    // Botão de registo em massa
    $('#bulkRegisterBtn').click(function() {
        $('#bulkRegisterModal').modal('show');
    });
    
    // Selecionar todos no modal de massa
    $('#selectAllBulk').change(function() {
        $('.bulk-order-select').prop('checked', $(this).prop('checked'));
    });
    
    $('#saveBulkShipmentBtn').on('click', function () {

        const shipments = [];

        $('#bulkSelectionTable tbody tr').each(function () {

            const $row = $(this);
            const checkbox = $row.find('.bulk-order-select');

            if (!checkbox.is(':checked')) {
                return;
            }

            const orderId = checkbox.val();
            const shipmentDate = $row.find('.bulk-shipment-date').val();

            if (!shipmentDate) {
                return;
            }

            shipments.push({
                order_id: orderId,
                shipment_date: shipmentDate
            });
        });

        if (shipments.length === 0) {
            showNotification('warning', 'Atenção', 'Nenhuma encomenda selecionada.');
            return;
        }

        const sendNotifications = $('#sendNotificationsManual').is(':checked');

        // Fechar modal
        $('#bulkRegisterModal').modal('hide');
        $('#dm-loader').fadeIn(200);

        $.ajax({
            url: '{{ route("admin.orders.pack60.bulk.manual.store") }}',
            method: 'POST',
            data: {
                shipments: shipments,
                send_notifications: sendNotifications
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {

                $('#dm-loader').fadeOut(200);

                showNotification('success', 'Sucesso', response.message);

                if (typeof pack60Table !== 'undefined') {
                    pack60Table.ajax.reload(function () {
                        if (typeof refreshPack60Stats !== 'undefined') {
                            refreshPack60Stats();
                        }
                    }, false);
                }
            },
            error: function (xhr) {

                $('#dm-loader').fadeOut(200);

                const msg = xhr.responseJSON?.message ?? 'Erro ao registar envios.';
                showNotification('error', 'Erro', msg);
            }
        });
    });
    
    // ===========================
    // TOP TILES → FILTER SHORTCUTS
    // ===========================

    // Pendentes (tile)
    $(document).on('click', '.filter-btn[data-filter="pending"]', function () {
        activateStatusFilter('pending');
    });

    // Atrasados (tile)
    $(document).on('click', '.view-overdue-btn', function () {
        activateStatusFilter('overdue');
    });

    // ===========================
    // Helper: ativa filtro + scroll
    // ===========================
    function activateStatusFilter(status) {

        // Reset estados ativos
        $('.filter-status').removeClass('active');

        // Ativar botão correspondente
        const $btn = $('.filter-status[data-status="' + status + '"]');

        if ($btn.length) {
            $btn.addClass('active');

            // Atualizar variáveis globais (as que já usas)
            pack60StatusFilter = status;
            pack60DaysFilter = null;

            // Reload DataTable mantendo página
            if (typeof pack60Table !== 'undefined') {
                pack60Table.ajax.reload(function () {

                    // Atualizar stats + gráficos após reload
                    if (typeof refreshPack60Stats !== 'undefined') {
                        refreshPack60Stats();
                    }

                }, false);
            }

            // Scroll suave até à tabela
            scrollToPack60Table();
        }
    }

    // ===========================
    // Scroll suave até à tabela
    // ===========================
    function scrollToPack60Table() {
        const $table = $('#pack60Table');

        if ($table.length) {
            $('html, body').animate({
                scrollTop: $table.offset().top - 100
            }, 600);
        }
    }

    
    // Exportar para Excel
    $('#exportPack60').click(function() {
        const status = $('.filter-status.active').data('status') || 'all';
        const days = $('.filter-days.active').data('days') || null;

        const params = new URLSearchParams();
        params.set('status', status);

        if (days) {
            params.set('days', days);
        }

        window.location.href = `{{ route("admin.orders.pack60.export") }}?${params.toString()}`;
    });
    
    // Função de filtro
    function filterTableByStatus(status) {
        $('#pack60Table tbody tr').each(function() {
            const row = $(this);
            let show = false;
            
            if(status === 'all') {
                show = true;
            } else if(status === 'pending') {
                show = row.find('.badge-warning').length > 0;
            } else if(status === 'completed') {
                show = row.find('.badge-success').length > 0;
            } else if(status === 'overdue') {
                show = row.find('.badge-danger').length > 0;
            }
            
            show ? row.show() : row.hide();
        });
        
        // Atualizar contador
        const visibleCount = $('#pack60Table tbody tr:visible').length;
        $('#pack60-summary').text(`${visibleCount} packs ${getStatusText(status)}`);
    }
    
    $('.filter-days').click(function(e) {
        e.preventDefault();
        $('.filter-days').removeClass('active');
        $(this).addClass('active');

        const days = $(this).data('days');
    });
    
    $('#showAllPacksBtn').click(function(e) {
        e.preventDefault();
        $('.filter-status').removeClass('active');
        $('.filter-days').removeClass('active');
    });


    function getStatusText(status) {
        const texts = {
            'all': 'totais',
            'pending': 'pendentes',
            'completed': 'concluídos',
            'overdue': 'atrasados'
        };
        return texts[status] || '';
    }
    
    function showNotification(type, title, message) {
        const timeout = 3000;

        switch (type) {
            case 'success':
                toast.success(message, title, timeout);
                break;

            case 'warning':
                toast.warning(message, title, timeout);
                break;

            case 'info':
                toast.info(message, title, timeout);
                break;

            case 'error':
            default:
                toast.error(message, title, timeout);
                break;
        }
    }
});
</script>
@endpush