@extends('donamarmita-admin')
@section('title', 'Resumo de Encomendas - Donamarmita')
@section('content')

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1>
                <i class="fas fa-clipboard-list text-primary"></i> 
                Resumo de Encomendas
            </h1>
            <p class="text-muted">
                Visualize e exporte os resumos detalhados de todas as encomendas
            </p>
        </div>
        <div class="title_right">
            <div class="btn-group pull-right" role="group">
<!--                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exportSummaryModal">
                    <i class="fas fa-file-excel mr-2"></i>
                    Exportar Resumo
                </button>-->
                <button type="button" class="btn btn-info" id="printSelectedOrders">
                    <i class="fas fa-print mr-2"></i>
                    Imprimir Selecionadas
                </button>
            </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') }}">
                            <i class="fas fa-home mr-1"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-clipboard-list mr-1"></i> Resumo de Encomendas
                    </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-shopping-cart text-primary"></i> Total Encomendas
            </span>
            <div class="count green" id="card-totalOrders">0</div>
            <span class="count_bottom">
                <i class="fas fa-calendar mr-1"></i> Período selecionado
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-euro-sign text-success"></i> Valor Total
            </span>
            <div class="count" id="card-totalAmount">0€</div>
            <span class="count_bottom">
                <i class="fas fa-chart-line mr-1"></i> Ticket médio: <span id="card-averageTicket">0€</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-users text-info"></i> Clientes
            </span>
            <div class="count" id="card-uniqueCustomers">0</div>
            <span class="count_bottom">
                <i class="fas fa-user-plus mr-1"></i> <span id="card-newCustomers">0</span> novos
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top">
                <i class="fas fa-tags text-warning"></i> Descontos Aplicados
            </span>
            <div class="count" id="card-totalDiscounts">0€</div>
            <span class="count_bottom">
                <i class="fas fa-percent mr-1"></i> <span id="card-averageDiscount">0%</span> média
            </span>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        <i class="fas fa-filter mr-2"></i>
                        Filtrar Encomendas
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div class="row">
                        <!-- Período Principal -->
                        <div class="col-md-5 col-sm-12">
                            <div class="form-group">
                                <label class="font-weight-bold text-primary">
                                    <i class="fas fa-calendar-alt mr-1"></i>
                                    Período
                                </label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-light border-0">
                                            <i class="fas fa-calendar text-muted"></i>
                                        </span>
                                    </div>
                                    <input type="text" 
                                           class="form-control" 
                                           id="daterange" 
                                           name="daterange"
                                           value="{{ date('d/m/Y', strtotime('-7 days')) }} - {{ date('d/m/Y') }}"
                                           readonly
                                           style="background-color: white; cursor: pointer;">
                                    <div class="input-group-append">
                                        <span class="input-group-text bg-light border-0 text-muted">
                                            <i class="fas fa-chevron-down"></i>
                                        </span>
                                    </div>
                                </div>
                                <small class="text-muted d-block mt-1">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Clique no campo para selecionar um período
                                </small>
                            </div>
                        </div>

                        <!-- Filtros Rápidos -->
                        <div class="col-md-7 col-sm-12">
                            <div class="form-group">
                                <label class="font-weight-bold text-primary d-block">
                                    <i class="fas fa-clock mr-1"></i>
                                    Períodos Rápidos
                                </label>
                                <div class="btn-group flex-wrap" role="group">
                                    <button type="button" class="btn btn-outline-secondary btn-sm quick-period" data-days="1">
                                        <i class="fas fa-calendar-day mr-1"></i>
                                        Ontem
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm quick-period active" data-days="7">
                                        <i class="fas fa-calendar-week mr-1"></i>
                                        Últimos 7 dias
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm quick-period" data-days="15">
                                        <i class="fas fa-calendar-alt mr-1"></i>
                                        Últimos 15 dias
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm quick-period" data-days="30">
                                        <i class="fas fa-calendar mr-1"></i>
                                        Últimos 30 dias
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm quick-period" data-month="current">
                                        <i class="fas fa-calendar-check mr-1"></i>
                                        Este mês
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm quick-period" data-month="last">
                                        <i class="fas fa-calendar-minus mr-1"></i>
                                        Mês passado
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <!-- Botões de Ação Esquerda -->
                                <div>
                                    <button type="button" class="btn btn-outline-secondary" id="resetFilters">
                                        <i class="fas fa-undo-alt mr-1"></i>
                                        Limpar Filtros
                                    </button>
                                    <button type="button" class="btn btn-outline-info" id="applyFilters">
                                        <i class="fas fa-search mr-1"></i>
                                        Aplicar Filtros
                                    </button>
                                </div>

                                <!-- Botões de Ação Direita -->
                                <div>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-success" id="printSelected">
                                            <i class="fas fa-print mr-1"></i>
                                            Imprimir Selecionados
                                            <span class="badge badge-light ml-2" id="selectedCount">0</span>
                                        </button>
                                        <button type="button" class="btn btn-info" id="generateAllLabels">
                                            <span class="btn-wrapper">
                                                <span class="btn-icon">
                                                    <i class="fas fa-print fa-fw"></i>
                                                    <i class="fas fa-tag fa-fw tag-icon"></i>
                                                </span>
                                                <span class="btn-text">
                                                    Imprimir Período
                                                    <small class="d-block text-light-50">
                                                        Todas as 
                                                        <span class="badge badge-info ml-2" id="orderCount01">0</span> encomendas
                                                    </small>
                                                </span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filtros Ativos (aparece quando há filtros aplicados) -->
                    <div class="row mt-3" id="activeFilters" style="display: none;">
                        <div class="col-md-12">
                            <div class="alert alert-info mb-0 py-2">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-filter mr-2"></i>
                                    <strong class="mr-2">Filtros ativos:</strong>
                                    <span id="activeFiltersList"></span>
                                    <button type="button" class="btn btn-sm btn-link text-danger ml-auto" id="clearAllFilters">
                                        <i class="fas fa-times mr-1"></i>
                                        Limpar todos
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Orders Table -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        <i class="fas fa-list-ul mr-2"></i>
                        Lista de Encomendas
                        <span class="badge badge-info ml-2" id="orderCount02">
                            0 encomendas
                        </span>
                    </h2>
                    <div class="clearfix"></div>
                </div>
                
                <div class="x_content">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="selectAll">
                                    <i class="fas fa-check-double mr-1"></i>
                                    Selecionar Todos
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAll">
                                    <i class="fas fa-times mr-1"></i>
                                    Desmarcar Todos
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-hover jambo_table bulk_action" id="orderSummaryTable">
                            <thead class="thead-dark">
                                <tr>
                                    <th style="width: 40px; text-align: center;">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="checkAll">
                                            <label class="custom-control-label" for="checkAll"></label>
                                        </div>
                                    </th>
                                    <th style="width: 100px; text-align: center;"># Encomenda</th>
                                    <th style="width: 200px;">Cliente</th>
                                    <th style="width: 150px; text-align: center;">Data</th>
                                    <th style="width: 150px; text-align: right;">Valor Total</th>
                                    <th style="width: 120px; text-align: center;">Estado</th>
                                    <th style="width: 150px; text-align: center;">Ações</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </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>

@include('admin.reports.order-summary.partial.export-summary-modal')
@include('admin.reports.order-summary.partial.order-details-modal')

<!-- Modal de Progresso -->
<div class="modal fade" id="progressModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="fas fa-cog fa-spin mr-2"></i>
                    A processar...
                </h5>
            </div>
            <div class="modal-body text-center py-4">
                <div class="progress" style="height: 20px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                         role="progressbar" 
                         style="width: 0%;" 
                         id="progressBar">
                        0%
                    </div>
                </div>
                <p class="mt-3 text-muted" id="progressMessage">
                    A gerar relatório, por favor aguarde...
                </p>
            </div>
        </div>
    </div>
</div>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    /* Avatar Circle */
    .avatar-circle {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 14px;
    }
    
    /* Table Improvements */
    .table-hover tbody tr:hover {
        background-color: rgba(52, 152, 219, 0.05);
    }
    
    .jambo_table tbody td {
        padding: 12px 8px;
    }
    
    /* Badge Improvements */
    .badge {
        font-weight: 500;
        letter-spacing: 0.3px;
    }
    
    /* Daterangepicker Custom */
    .daterangepicker {
        border: none;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        border-radius: 8px;
    }
    
    .daterangepicker td.active, 
    .daterangepicker td.active:hover {
        background-color: #26B99A;
    }
    
    /* Button Group Toggle */
    .btn-group-toggle .btn {
        padding: 0.375rem 0.75rem;
    }
    
    .btn-group-toggle .btn.active {
        background-color: #28a745;
        color: white;
        border-color: #28a745;
    }
    
    /* Custom Scrollbar */
    .table-responsive::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    /* Quick Period Buttons - Estilo consistente com o layout anterior */
    .btn-group .btn-outline-secondary {
        border-color: #e0e0e0;
        color: #6c757d;
        transition: all 0.2s ease;
    }
    
    .btn-group .btn-outline-secondary:hover {
        background-color: #f8f9fa;
        border-color: #17a2b8;
        color: #17a2b8;
    }
    
    .btn-group .btn-outline-secondary.active {
        background-color: #17a2b8;
        border-color: #17a2b8;
        color: white;
    }
    
    /* Input Group - Consistente com o daterangepicker */
    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #e0e0e0;
    }
    
    #daterange {
        border: 1px solid #e0e0e0;
        border-left: none;
        border-right: none;
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
    }
    
    #daterange:focus {
        border-color: #17a2b8;
        box-shadow: none;
    }
    
    /* Badge de contagem */
    .badge.badge-light {
        background-color: white;
        color: #28a745;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        border-radius: 20px;
    }
    
    /* Botões principais */
    .btn-success {
        background: linear-gradient(135deg, #28a745 0%, #218838 100%);
        border: none;
        padding: 0.5rem 1.25rem;
    }
    
    .btn-info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        border: none;
        padding: 0.5rem 1.25rem;
    }
    
    .btn-outline-secondary {
        border: 1px solid #e0e0e0;
        padding: 0.5rem 1.25rem;
    }
    
    /* Alert de filtros ativos */
    .alert-info {
        background-color: #e3f2fd;
        border: none;
        color: #0c5460;
        border-radius: 8px;
    }
    
    /* Responsividade */
    @media (max-width: 768px) {
        .btn-group {
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
        }
        
        .btn-group .btn {
            margin-bottom: 0.25rem;
        }
        
        .d-flex.justify-content-between {
            flex-direction: column;
            align-items: flex-start !important;
        }
        
        .d-flex.justify-content-between > div {
            margin-bottom: 0.5rem;
            width: 100%;
        }
        
        .d-flex.justify-content-between .btn-group {
            width: 100%;
            display: flex;
        }
        
        .d-flex.justify-content-between .btn-group .btn {
            flex: 1;
        }
    }
    
    /* Toolbox - Consistente com x_panel */
    .panel_toolbox {
        min-width: 30px;
    }
    
    .panel_toolbox > li {
        float: left;
        cursor: pointer;
    }
    
    .panel_toolbox > li > a {
        padding: 5px;
        color: #C5D7DE;
        font-size: 14px;
    }
    
    .panel_toolbox > li > a:hover {
        background: #F5F7FA;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script>
$(document).ready(function() {   
    
    // ============================================
    // GLOBAL SELECTION STATE (SERVER-SIDE SAFE)
    // ============================================
    let selectedOrders = new Set();     // IDs selecionados manualmente
    let selectAllFiltered = false;      // Modo "Selecionar todas filtradas"
    
    // ============================================
    // DEFAULT DATE RANGE 
    // ============================================
    window.startDate = moment().subtract(7, 'days').format('YYYY-MM-DD');
    window.endDate   = moment().format('YYYY-MM-DD');

    // ============================================
    // DATERANGEPICKER CONFIGURATION
    // ============================================
    $('#daterange').daterangepicker({
        locale: {
            format: 'DD/MM/YYYY',
            separator: ' - ',
            applyLabel: 'Aplicar',
            cancelLabel: 'Cancelar',
            fromLabel: 'De',
            toLabel: 'Até',
            customRangeLabel: 'Personalizado',
            weekLabel: 'S',
            daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 
                        'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            firstDay: 1
        },
        ranges: {
            'Hoje': [moment(), moment()],
            'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Últimos 7 dias': [moment().subtract(6, 'days'), moment()],
            'Últimos 30 dias': [moment().subtract(29, 'days'), moment()],
            'Este mês': [moment().startOf('month'), moment().endOf('month')],
            'Mês passado': [moment().subtract(1, 'month').startOf('month'), 
                           moment().subtract(1, 'month').endOf('month')]
        },
        startDate: moment().subtract(7, 'days'),
        endDate: moment(),
        alwaysShowCalendars: true,
        showCustomRangeLabel: true,
        autoApply: false,
        linkedCalendars: false
    }, function(start, end) {
        window.startDate = start.format('YYYY-MM-DD');
        window.endDate   = end.format('YYYY-MM-DD');

        orderTable.ajax.reload();
        refreshOrderStats();
    });
    
    // ============================================
    // CARDS CONFIGURATION
    // ============================================
    function refreshOrderStats() {
        $.ajax({
            url: '{{ route("admin.reports.orders-summary.stats") }}',
            type: 'GET',
            data: {
                start_date: window.startDate,
                end_date: window.endDate
            },
            success: function (response) {

                $('#card-totalOrders').text(response.totalOrders);

                $('#card-totalAmount').text(response.totalAmount + '€');
                $('#card-averageTicket').text(response.averageTicket + '€');

                $('#card-uniqueCustomers').text(response.uniqueCustomers);
                $('#card-newCustomers').text(response.newCustomers);

                $('#card-totalDiscounts').text(response.totalDiscounts + '€');
                $('#card-averageDiscount').text(response.averageDiscount + '%');
            }
        });
    }
    
    // ============================================
    // DATETABLE CONFIGURATION
    // ============================================
    const orderTable = $('#orderSummaryTable')
        .on('processing.dt', function (e, settings, processing) {
            $('#dm-loader').toggle(processing);
        })
        .DataTable({
                processing: true,
                serverSide: true,
                paging: true,  
                pageLength: 25,
                searching: true,
                ordering: true,
            ajax: {
                url: '{{ route("admin.reports.orders-summary.data") }}',
                type: 'GET',
                data: function (d) {
                    d.start_date = window.startDate;
                    d.end_date   = window.endDate;
                }
            },
            language: {
                url: '/vendor/datatables/Portuguese.json',
                search: '',
                processing: ''
            },
            columns: [
                { data: 'checkbox', orderable: false },
                { data: 'order' },
                { data: 'client' },
                { data: 'date' },
                { data: 'value' },
                { data: 'status' },
                { data: 'actions', orderable: false }
            ],
            columnDefs: [
                { targets: [0,1,3,5,6], className: 'text-center align-middle' },
                { targets: [4], className: 'text-right align-middle' },
                { targets: [2], className: 'align-middle' }
            ]
        })        
        .on('draw.dt', function () {
            refreshOrderStats();
    
            $('.order-checkbox').each(function () {

                const id = $(this).val();

                if (selectAllFiltered) {
                    $(this).prop('checked', true);
                } else if (selectedOrders.has(id)) {
                    $(this).prop('checked', true);
                } else {
                    $(this).prop('checked', false);
                }
            });
        })
        .on('xhr.dt', function (e, settings, json) {
            if (json) {
                $('#orderCount01').text(json.recordsFiltered);
                $('#orderCount02').text(json.recordsFiltered + ' encomendas');
            }
        });
    
    // ============================================
    // INDIVIDUAL CHECKBOX CHANGE
    // ============================================

    $(document).on('change', '.order-checkbox', function () {

        const id = $(this).val();

        if ($(this).is(':checked')) {
            selectedOrders.add(id);
        } else {
            selectedOrders.delete(id);
            selectAllFiltered = false;
            $('#checkAll').prop('checked', false);
        }

        updateSelectedCount();
    });


    // ============================================
    // HEADER CHECKBOX (SELECT PAGE)
    // ============================================

    $('#checkAll').on('change', function () {

        const isChecked = $(this).is(':checked');

        $('.order-checkbox').each(function () {

            const id = $(this).val();

            if (isChecked) {
                selectedOrders.add(id);
            } else {
                selectedOrders.delete(id);
            }

            $(this).prop('checked', isChecked);
        });

        selectAllFiltered = false;

        updateSelectedCount();
    });


    // ============================================
    // SELECT ALL FILTERED (GLOBAL MODE)
    // ============================================

    $('#selectAll').on('click', function () {

        selectAllFiltered = true;
        selectedOrders.clear();

        $('#checkAll').prop('checked', true);
        $('.order-checkbox').prop('checked', true);

        updateSelectedCount(true);

        showNotification(
            'info',
            'Seleção Global',
            'Todas as encomendas filtradas foram selecionadas'
        );
    });


    // ============================================
    // DESELECT ALL
    // ============================================

    $('#deselectAll').on('click', function () {

        selectAllFiltered = false;
        selectedOrders.clear();

        $('#checkAll').prop('checked', false);
        $('.order-checkbox').prop('checked', false);

        updateSelectedCount();

        showNotification(
            'info',
            'Seleção',
            'Todas as encomendas foram desmarcadas'
        );
    });
    
    // Atualizar contador de selecionados
    $(document).on('change', '.order-checkbox', function() {
        updateSelectedCount();
        
        const allChecked = $('.order-checkbox:checked').length === $('.order-checkbox').length;
        $('#checkAll').prop('checked', allChecked);
    });
    
    function updateSelectedCount(forceGlobal = false) {

        let count;

        if (selectAllFiltered || forceGlobal) {
            count = $('#orderCount01').text().match(/\d+/);
            count = count ? parseInt(count[0]) : 0;
        } else {
            count = selectedOrders.size;
        }

        $('#selectedCount').text(
            count + ' encomenda' + (count !== 1 ? 's selecionadas' : ' selecionada')
        );
    }
    
    // ============================================
    // QUICK PERIOD BUTTONS (UPDATED)
    // ============================================

    $(document).on('click', '.quick-period', function () {

        $('.quick-period').removeClass('active');
        $(this).addClass('active');

        let start, end = moment();

        const days  = $(this).data('days');
        const month = $(this).data('month');

        if (days) {
            const d = parseInt(days);

            if (d === 1) {
                start = moment().subtract(1, 'days');
                end   = moment().subtract(1, 'days');
            } else {
                start = moment().subtract(d - 1, 'days');
                end   = moment();
            }
        }

        if (month === 'current') {
            start = moment().startOf('month');
            end   = moment().endOf('month');
        }

        if (month === 'last') {
            start = moment().subtract(1, 'month').startOf('month');
            end   = moment().subtract(1, 'month').endOf('month');
        }

        window.startDate = start.format('YYYY-MM-DD');
        window.endDate   = end.format('YYYY-MM-DD');

        const picker = $('#daterange').data('daterangepicker');
        picker.setStartDate(start);
        picker.setEndDate(end);

        orderTable.ajax.reload();
        refreshOrderStats();
    });
    
    // ============================================
    // RESET FILTERS
    // ============================================
    $('#resetFilters').on('click', function () {

        const start = moment().subtract(7, 'days');
        const end   = moment();

        window.startDate = start.format('YYYY-MM-DD');
        window.endDate   = end.format('YYYY-MM-DD');

        $('#daterange').data('daterangepicker').setStartDate(start);
        $('#daterange').data('daterangepicker').setEndDate(end);

        orderTable.search('').draw();
    });
    
    // ============================================
    // PRINT ORDERS
    // ============================================
    $(document).on('click', '.print-order', function () { 

        const id = $(this).data('id');

        $('#dm-loader').show();

        $.ajax({
            url: '{{ route("admin.reports.orders-summary.print") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                order_id: id
            },
            success: function(response) {

                $('#dm-loader').hide();

                if (response.file) {

                    const iframe = document.createElement('iframe');
                    iframe.style.display = 'none';
                    iframe.src = response.file + '?v=' + new Date().getTime();

                    iframe.onload = function () {
                        setTimeout(function () {
                            iframe.contentWindow.focus();
                            iframe.contentWindow.print();
                        }, 800);
                    };

                    document.body.appendChild(iframe);

                } else {
                    showNotification('error','Erro','Não foi possível gerar o PDF');
                }
            },
            error: function() {
                $('#dm-loader').hide();
                showNotification('error','Erro','Falha ao comunicar com o servidor');
            }
        });
    });
    
    function executeBulkPrint() {
        const payload = {
            _token: '{{ csrf_token() }}',
            selectAll: selectAllFiltered ? 1 : 0,
            start_date: window.startDate,
            end_date: window.endDate,
            search: orderTable.search(),
            order_ids: Array.from(selectedOrders)
        };

        if (!selectAllFiltered && selectedOrders.size === 0) {
            showNotification('warning','Atenção','Nenhuma encomenda selecionada');
            return;
        }

        $('#dm-loader').show();

        $.ajax({
            url: '{{ route("admin.reports.orders-summary.print-bulk") }}',
            method: 'POST',
            data: payload,
            success: function(response) {
                $('#dm-loader').hide();

                if (response.file) {

                    const iframe = document.createElement('iframe');
                    iframe.style.display = 'none';
                    iframe.src = response.file + '?v=' + new Date().getTime();

                    iframe.onload = function () {

                        setTimeout(function () {

                            iframe.contentWindow.focus();
                            iframe.contentWindow.print();

                            // 🔥 Só limpar se for seleção global
                            if (selectAllFiltered) {

                                selectAllFiltered = false;
                                selectedOrders.clear();
                                $('#checkAll').prop('checked', false);
                                $('.order-checkbox').prop('checked', false);
                                updateSelectedCount(false);
                            }

                            // 🔥 Remover iframe da DOM (boa prática)
                            setTimeout(function () {
                                document.body.removeChild(iframe);
                            }, 2000);

                        }, 800);
                    };

                    document.body.appendChild(iframe);

                } else {
                    showNotification('error','Erro','Não foi possível gerar o PDF');
                }
            },
            error: function() {
                $('#dm-loader').hide();
                showNotification('error','Erro','Falha ao comunicar com o servidor');
            }
        });
    }
    
    // Imprimir encomendas selecionadas
    $('#printSelected, #printSelectedOrders').on('click', function () {
        executeBulkPrint();
    });
    
    // Imprimir TODAS as encomendas
    $('#generateAllLabels').on('click', function () {
        // Ativar seleção global
        selectAllFiltered = true;
        selectedOrders.clear();

        $('#checkAll').prop('checked', true);
        $('.order-checkbox').prop('checked', true);

        updateSelectedCount(true);

        showNotification(
            'info',
            'Impressão Período',
            'A gerar PDF para todas as encomendas filtradas...'
        );

        // Executar impressão
        executeBulkPrint();
    });
    
    // ============================================
    // VIEW ORDER DETAILS
    // ============================================
    $(document).on('click', '.view-order', function () { 
        const orderId = $(this).data('id');

        // Abrir modal
        $('#orderViewModal').modal('show');
        $('#modal-order-number').text('#' + orderId);

        // Mostrar loader
        $('#order-view-loader').show();
        $('#order-view-data').hide();

        // Guardar ID para o botão de imprimir
        $('#modal-print-btn').data('order-id', orderId);

        // Carregar dados via AJAX
        $.ajax({
            url: '{{ route("admin.reports.orders-summary.view") }}', // ← Nova rota
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                order_id: orderId
            },
            success: function(response) {
                if (response.success) {
                    populateOrderModal(response.order);
                } else {
                    showNotification('error', 'Erro', 'Não foi possível carregar os dados');
                    $('#orderViewModal').modal('hide');
                }
            },
            error: function() {
                showNotification('error', 'Erro', 'Falha ao comunicar com o servidor');
                $('#orderViewModal').modal('hide');
            }
        });
    });

    // IMPRIMIR PDF - Botão dentro da modal
    $(document).on('click', '#modal-print-btn', function () {
        const orderId = $(this).data('order-id');

        $('#orderViewModal').modal('hide');
        $('#dm-loader').show();

        $.ajax({
            url: '{{ route("admin.reports.orders-summary.print") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                order_id: orderId
            },
            success: function(response) {
                $('#dm-loader').hide();
                if (response.file) {
                    const iframe = document.createElement('iframe');
                    iframe.style.display = 'none';
                    iframe.src = response.file + '?v=' + new Date().getTime();
                    iframe.onload = function () {
                        setTimeout(function () {
                            iframe.contentWindow.focus();
                            iframe.contentWindow.print();
                        }, 800);
                    };
                    document.body.appendChild(iframe);
                } else {
                    showNotification('error','Erro','Não foi possível gerar o PDF');
                }
            },
            error: function() {
                $('#dm-loader').hide();
                showNotification('error','Erro','Falha ao comunicar com o servidor');
            }
        });
    });

    // POPULAR MODAL COM DADOS
    function populateOrderModal(order) {
        // Cliente
        $('#client-name').text(order.client_name);
        $('#client-email').text(order.client_email);
        $('#client-phone').text(order.client_phone);
        $('#client-address').text(order.client_address);
        $('#client-zipcode').text(order.client_zipcode);
        $('#client-city').text(order.client_city);

        // Encomenda
        $('#order-date').text(order.date);
        $('#order-total').text(order.total);
        $('#order-discount').text(order.discount);

        // Items
        let itemsHtml = '';
        order.items.forEach(function(item) {
            item.dishes.forEach(function(dish, index) {
                itemsHtml += '<tr>';

                if (index === 0) {
                    itemsHtml += `
                        <td rowspan="${item.dishes.length}" class="align-middle">
                            <strong>${item.quantity} x Pack ${item.pack_size}</strong><br>
                            <small class="text-muted">${item.type_meal}</small>
                        </td>
                    `;
                }

                itemsHtml += `
                    <td class=""><strong>${dish.ref}</strong></td>
                    <td class="text-center"><strong>${dish.quantity}</strong></td>
                </tr>`;
            });
        });
        $('#order-items-list').html(itemsHtml);

        // Notas
        if (order.notes && order.notes.trim() !== '') {
            $('#order-notes').text(order.notes);
            $('#order-notes-card').show();
        } else {
            $('#order-notes-card').hide();
        }

        // Esconder loader e mostrar dados
        $('#order-view-loader').hide();
        $('#order-view-data').show();
    }
    
    // ============================================
    // EXPORT MODAL
    // ============================================
    
    // Toggle datas personalizadas
    $('input[name="period_type"]').change(function() {
        if ($(this).val() === 'custom') {
            $('.custom-date-range').slideDown();
        } else {
            $('.custom-date-range').slideUp();
        }
    });
    
    // Submit export form
    $('#exportSummaryForm').submit(function(e) {
        e.preventDefault();
        
        // Fechar modal de exportação
        $('#exportSummaryModal').modal('hide');
        
        // Mostrar progresso
        $('#progressModal').modal('show');
        $('#progressBar').css('width', '10%').text('10%');
        $('#progressMessage').text('A preparar exportação...');
        
        // Simular progresso (ajustar conforme necessidade real)
        let progress = 10;
        const interval = setInterval(function() {
            progress += Math.random() * 15;
            if (progress > 90) {
                progress = 90;
                clearInterval(interval);
            }
            $('#progressBar').css('width', progress + '%').text(Math.round(progress) + '%');
        }, 500);
        
        // Enviar formulário
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            xhrFields: {
                responseType: 'blob'
            },
            success: function(data) {
                clearInterval(interval);
                $('#progressBar').css('width', '100%').text('100%');
                $('#progressMessage').text('Exportação concluída! A preparar download...');
                
                // Download do ficheiro
                setTimeout(function() {
                    const url = window.URL.createObjectURL(data);
                    const a = document.createElement('a');
                    a.href = url;
                    
                    // Determinar extensão
                    const format = $('input[name="format"]:checked').val();
                    const extension = format === 'excel' ? 'xlsx' : format;
                    a.download = `resumo_encomendas_${moment().format('YYYYMMDD_HHmm')}.${extension}`;
                    
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    
                    // Fechar modal de progresso
                    setTimeout(function() {
                        $('#progressModal').modal('hide');
                        showNotification('success', 'Sucesso', 'Relatório exportado com sucesso!');
                    }, 1000);
                }, 500);
            },
            error: function(xhr) {
                clearInterval(interval);
                $('#progressModal').modal('hide');
                
                let errorMessage = 'Ocorreu um erro durante a exportação';
                try {
                    const response = JSON.parse(xhr.responseText);
                    errorMessage = response.message || errorMessage;
                } catch(e) {}
                
                showNotification('error', 'Erro', errorMessage);
            }
        });
    });
    
    // ============================================
    // UTILITY FUNCTIONS
    // ============================================
    
    function showLoader() {
        $('#dm-loader').show();
    }

    function hideLoader() {
        $('#dm-loader').hide();
    }

    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;
        }
    }
    
    // Inicializar tooltips
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endpush

@endsection