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

<div class="right_col" role="main">
    <!-- Page Header -->
    <div class="page-title">
        <div class="title_left">
            <h1><i class="fas fa-users"></i> Encomendas de Clientes</h1>
            <p class="text-muted">Encomendas realizadas por clientes registados no sistema</p>
        </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') }}">Todas as Encomendas</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Clientes</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-user-check text-primary"></i> Clientes Registados</span>
            <div class="count text-primary">{{ number_format($registeredOrdersCount, 0) }}</div>
            <span class="count_bottom">
                <i class="{{ $registeredOrdersCount > 0 ? 'text-success' : 'text-muted' }}">
                    <i class="fa {{ $registeredOrdersCount > 0 ? 'fa-arrow-up' : 'fa-minus' }}"></i> 
                    {{ $registeredVsGuestPercentage ?? 0 }}% vs visitantes
                </i>
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-repeat" style="color: #1ABC9C;"></i> Clientes Recorrentes</span>
            <div class="count" style="color: #1ABC9C;">{{ number_format($recurringClientsCount, 0) }}</div>
            <span class="count_bottom">
                <i class="{{ $recurringClientsCount > 0 ? 'text-success' : 'text-muted' }}">
                    {{ $recurringPercentage ?? 0 }}% repetem compra
                </i>
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-shopping-basket" style="color: #3498DB;"></i> Valor Médio Cliente</span>
            <div class="count" style="color: #3498DB;">{{ number_format($avgClientOrderValue, 2) }}€</div>
            <span class="count_bottom">
                <i class="{{ $avgClientOrderValue > $avgGuestOrderValue ? 'text-success' : 'text-warning' }}">
                    <i class="fa {{ $avgClientOrderValue > $avgGuestOrderValue ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i> 
                    {{ number_format(abs($avgClientVsGuestPercentage ?? 0), 1) }}% vs visitantes
                </i>
            </span>
        </div>
        
        <div class="col-md-3 col-sm-6 col-xs-6 tile_stats_count">
            <span class="count_top"><i class="fas fa-money-bill-wave" style="color: #9B59B6;"></i> Faturado Clientes</span>
            <div class="count" style="color: #9B59B6;">{{ number_format($totalBilledClients, 2) }}€</div>
            <span class="count_bottom">
                <a href="javascript:void(0)" 
                    class="text-purple" 
                    data-toggle="modal" 
                    data-target="#clientRevenueChartModal">
                    <i class="fa fa-chart-pie"></i> Ver por segmento
                </a>
            </span>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong><i class="fa fa-check-circle"></i> Sucesso!</strong> {{ session('success') }}
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong><i class="fa fa-exclamation-circle"></i> Erro!</strong> {{ session('error') }}
            </div>
        </div>
    </div>
    @endif

    <!-- Quick Comparison -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-balance-scale"></i> Comparação Clientes vs Visitantes</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card border-primary">
                                <div class="card-body">
                                    <h5 class="card-title text-primary">
                                        <i class="fa fa-user-check"></i> Clientes Registados
                                    </h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="h2 text-primary">{{ number_format($registeredOrdersCount, 0) }}</div>
                                            <small class="text-muted">Encomendas</small>
                                        </div>
                                        <div class="col-6">
                                            <div class="h2 text-primary">{{ number_format($uniqueClientsCount, 0) }}</div>
                                            <small class="text-muted">Clientes Únicos</small>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-muted">Faturação: {{ number_format($totalBilledClients, 2) }}€</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-secondary">
                                <div class="card-body">
                                    <h5 class="card-title text-secondary">
                                        <i class="fa fa-user-clock"></i> Visitantes
                                    </h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="h2 text-secondary">{{ number_format($guestOrdersCount, 0) }}</div>
                                            <small class="text-muted">Encomendas</small>
                                        </div>
                                        <div class="col-6">
                                            <div class="h2 text-secondary">{{ number_format($uniqueGuestsCount, 0) }}</div>
                                            <small class="text-muted">Visitantes Únicos</small>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-muted">Faturação: {{ number_format($totalBilledGuests, 2) }}€</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h5><i class="fa fa-filter"></i> Filtros</h5>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <form method="GET" action="{{ route('admin.orders.newcustomers') }}" id="clientFilterForm">
                        <div class="row">
                            <!-- Date Range Filter -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="date_range">Intervalo de Datas:</label>
                                    <div class="input-group">
                                        <input type="text" 
                                               class="form-control" 
                                               id="date_range" 
                                               name="date_range"
                                               value="{{ request('date_range', $dateRange) }}"
                                               placeholder="Selecione um intervalo">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- Status Filter -->
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="status_filter">Estado:</label>
                                    <select name="status" id="status_filter" class="form-control">
                                        <option value="">Todos os Estados</option>
                                        @foreach($statusOptions as $option => $label)
                                            <option value="{{ $option }}" {{ request('status') == $option ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Client Type Filter -->
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="client_type">Tipo de Cliente:</label>
                                    <select name="client_type" id="client_type" class="form-control">
                                        <option value="">Todos</option>
                                        <option value="recurring" {{ request('client_type') == 'recurring' ? 'selected' : '' }}>
                                            Recorrentes (2+ compras)
                                        </option>
                                        <option value="new" {{ request('client_type') == 'new' ? 'selected' : '' }}>
                                            Novos Clientes
                                        </option>
                                        <option value="inactive" {{ request('client_type') == 'inactive' ? 'selected' : '' }}>
                                            Inativos (30+ dias)
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <!-- Search -->
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="search">Pesquisar:</label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="search" 
                                           name="search"
                                           value="{{ request('search') }}"
                                           placeholder="Nome, email, telefone...">
                                </div>
                            </div>

                            <!-- Actions -->
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div class="btn-group d-flex" role="group">
                                        <button type="submit" class="btn btn-primary btn-block">
                                            <i class="fa fa-filter"></i> Filtrar
                                        </button>
                                        <a href="{{ route('admin.orders.newcustomers') }}" class="btn btn-secondary" title="Limpar filtros">
                                            <i class="fa fa-eraser"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Card -->
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2><i class="fa fa-users"></i> Encomendas de Clientes Registados</h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-primary btn-sm">
                                <i class="fa fa-shopping-cart"></i> Ver Todas
                            </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">
                    <!-- 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 id="orders-summary-left">
                                        <i class="fa fa-info-circle"></i>
                                        A carregar encomendas…
                                    </div>
                                    <div>
                                        <strong>Clientes únicos:</strong> {{ $uniqueClientsCount }}
                                        | <strong>Retenção:</strong> {{ $retentionRate ?? 0 }}%
                                        @if(isset($avgOrdersPerClient))
                                            | <strong>Média/encomendas:</strong> {{ number_format($avgOrdersPerClient, 1) }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Table -->
                    <div class="table-responsive">
                        <table id="ordersTable" class="table table-striped table-hover jambo_table">
                            <thead class="thead-dark">
                                <tr class="headings">
                                    <th style="width: 10%;">Encomenda</th>
                                    <th style="width: 20%;">Cliente</th>
                                    <th class="text-center" style="width: 10%;">Contacto</th>
                                    <th class="text-center" style="width: 10%;">Fidelidade</th>
                                    <th class="text-center" style="width: 8%;">Valor</th>
                                    <th class="text-center" style="width: 12%;">Estado</th>
                                    <th class="text-center" style="width: 10%;">Histórico</th>
                                    <th class="text-center" style="width: 20%;">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.orders.partials.customer-historical-modal')
@include('admin.orders.partials.order-status-change')
@include('admin.orders.charts.client-revenue')
@endsection

@push('scripts')
<script>
$(document).ready(function() {    
    if (!$('#date_range').val()) {
        const start = moment().subtract(29, 'days').format('DD/MM/YYYY');
        const end   = moment().format('DD/MM/YYYY');

        $('#date_range').val(`${start} - ${end}`);
    }
    
    // Inicializar date range picker
    $('#date_range').daterangepicker({
        locale: {
            format: 'DD/MM/YYYY',
            separator: ' - ',
            applyLabel: 'Aplicar',
            cancelLabel: 'Cancelar',
            daysOfWeek: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
            monthNames: [
                'Janeiro','Fevereiro','Março','Abril','Maio','Junho',
                'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'
            ]
        }
    });
    
    // Quick filter by status
    $('.quick-status').on('click', function (e) {
        e.preventDefault();

        $('#status_filter').val($(this).data('status'));

        customersFilters.status = $(this).data('status');
        ordersTable.ajax.reload();
    });
    
    // Filter data
    let customersFilters = {
        date_range: $('#date_range').val(),
        status: $('#status_filter').val(),
        client_type: $('#client_type').val(),
        search: $('#search').val()
    };
    
    let showAllOrders = false;
    
    // Data Table
    const ordersTable = $('#ordersTable')
    .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.data-newcustomers") }}',
            type: 'GET',
            data: function (d) {
                d.date_range  = customersFilters.date_range;
                d.status      = customersFilters.status;
                d.client_type = customersFilters.client_type;
                d.search      = customersFilters.search;
                
                d.show_all    = showAllOrders ? 1 : 0;
            }
        },
        language: {
            url: '/vendor/datatables/Portuguese.json',
            emptyTable: `
                <div class="text-center py-5">
                    <i class="fa fa-users fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">Nenhuma encomenda de cliente encontrada</h4>
                    <p class="text-muted">
                        Todos os pedidos foram feitos por visitantes ou os filtros aplicados não retornam resultados
                    </p>
                    <a href="{{ route('admin.orders.index') }}" class="btn btn-primary">
                        <i class="fa fa-shopping-cart"></i> Ver Todas as Encomendas
                    </a>
                </div>
            `,
            search: '',
            processing: ''
        },
        columns: [
            { data: 'order' },
            { data: 'client' },
            { data: 'contact' },
            { data: 'loyalty' },
            { data: 'value' },
            { data: 'status' },
            { data: 'history' },
            { data: 'actions', orderable: false, searchable: false }
        ],
        columnDefs: [
            { targets: [0,2,3,4,5,6,7], className: 'text-center align-middle' },
            { targets: [1], className: 'align-middle' }
        ],
        initComplete: function () {
            const $filter = $('#ordersTable_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);
                });
        }
    })
    .on('draw', function () {
        const info = ordersTable.page.info();

        if (info.recordsDisplay === 0) {
            $('#orders-summary-left').html(`
                <i class="fa fa-info-circle"></i>
                Nenhuma encomenda de cliente encontrada
            `);
            return;
        }

        $('#orders-summary-left').html(`
            <i class="fa fa-info-circle"></i>
            Mostrando <strong>${info.start + 1} a ${info.end}</strong>
            de <strong>${info.recordsDisplay}</strong> encomendas de clientes
        `);
    });
    
    $('#clientFilterForm').on('submit', function (e) {
        e.preventDefault();

        customersFilters = {
            date_range: $('#date_range').val(),
            status: $('#status_filter').val(),
            client_type: $('#client_type').val(),
            search: $('#search').val()
        };

        showAllOrders = false; 
        ordersTable.ajax.reload();
    });
    
    $('#clientFilterForm a[href]').on('click', function (e) {
        e.preventDefault();

        $('#clientFilterForm')[0].reset();

        customersFilters = {
            date_range: '',
            status: '',
            client_type: '',
            search: ''
        };

        showAllOrders = true;
        ordersTable.ajax.reload();
    });
    
    // Customer info modal
    $(document).on('click', '.customer-info-btn', function() {
        var orderId = $(this).data('id');
        var customerName = $(this).data('title');
        
        $('#customerModal .modal-title').html('<i class="fa fa-user"></i> ' + customerName);
        
        // Show loading, hide content
        $('#customerLoading').show();
        $('#customerContent').hide();
        
        // Fetch customer data via AJAX
        $.ajax({
            url: '{{ route("admin.orders.customer-info") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                order_id: orderId
            },
            success: function(response) {
                if (response.success) {
                    $('#customerOrders').text(response.numOrders);
                    $('#customerTotal').text(response.total + '€');
                    $('#customerDishes').text(response.numDishes);
                    $('#customerAvg').text(response.avgValue + '€');
                    $('#customerProductType').text(response.preferences.product);
                    $('#customerTypeMeal').text(response.preferences.typeMeal);
                    $('#customerFrequency').text(response.behavior.frequency);
                    $('#customerRecency').text(response.behavior.recency);

                    let profileHtml = '';
                    response.profile.forEach(tag => {
                        profileHtml += `<span class="badge badge-info mr-1 mb-1">${tag}</span>`;
                    });
                    $('#customerProfile').html(profileHtml || '<span class="text-muted">N/A</span>');
                    
                    // Additional info
                    var additionalHtml = '';
                    if(response.lastOrder) {
                        additionalHtml += '<p class="mb-1"><i class="fa fa-calendar"></i> <strong>Última encomenda:</strong> ' + 
                                         response.lastOrder + '</p>';
                    }
                    if(response.avgValue && response.avgValue !== '0.00') {
                        additionalHtml += '<p class="mb-1"><i class="fa fa-chart-line"></i> <strong>Valor médio:</strong> ' + 
                                         response.avgValue + '€</p>';
                    }
                    if(response.favoriteDish && response.favoriteDish !== 'N/A') {
                        additionalHtml += '<p class="mb-1"><i class="fa fa-utensils"></i> <strong>Prato favorito:</strong> ' + 
                                         response.favoriteDish + '</p>';
                    }
                    
                    $('#customerAdditional').html(additionalHtml || '<p class="text-muted">Sem informações adicionais.</p>');
                    
                    // Hide loading, show content
                    $('#customerLoading').hide();
                    $('#customerContent').show();
                } else {
                    $('#customerLoading').html('<p class="text-danger">' + response.message + '</p>');
                }
            },
            error: function() {
                $('#customerLoading').html('<p class="text-danger">Erro ao carregar informações do cliente.</p>');
            }
        });
    });

});
</script>

@endpush