@extends('admin.layout.app')

@section('title', $pageTitle . ' | LVT ')

@section('content')
    <div class="container-fluid {{ Auth::check() && Auth::user()->is_layout_two == 1 ? 'mt-2 p-0' : '' }}">
        
        <!-- Header & Filters -->
        <div class="card shadow mb-4">
            <div class="card-body py-3">
                <div class="d-sm-flex align-items-center justify-content-between">
                    <h1 class="h4 mb-0 text-gray-800 font-weight-bold">
                        <i class="fas fa-chart-pie mr-2 text-primary"></i>{{ $pageTitle }}
                        <span class="badge badge-pill badge-primary ml-2" style="font-size: 0.8rem;">{{ Carbon\Carbon::parse($selectedDate)->format('d/m/Y') }}</span>
                    </h1>
                    @include('components.dashboard-filters', [
                        'dashboard' => 'statistics',
                        'action' => route('dashboard.index'),
                        'data' => []
                    ])
                </div>
            </div>
        </div>

        <!-- KPI Cards -->
        <div class="row">
            <!-- Revenue Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Doanh thu (Hôm nay)</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($statsToday['revenue']) }}</div>
                                <div class="text-xs mt-2">
                                    @php $revDiff = $statsToday['revenue'] - $statsYesterday['revenue']; @endphp
                                    <span class="{{ $revDiff >= 0 ? 'text-success' : 'text-danger' }} font-weight-bold">
                                        <i class="fas fa-arrow-{{ $revDiff >= 0 ? 'up' : 'down' }}"></i> {{ format_currency(abs($revDiff)) }}
                                    </span>
                                    <span class="text-muted ml-1">so với hôm qua</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-primary text-white">
                                    <i class="fas fa-calendar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cost Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-danger shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Chi phí (Hôm nay)</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($statsToday['cost']) }}</div>
                                <div class="text-xs mt-2">
                                    @php $costDiff = $statsToday['cost'] - $statsYesterday['cost']; @endphp
                                    <span class="{{ $costDiff <= 0 ? 'text-success' : 'text-danger' }} font-weight-bold">
                                        <i class="fas fa-arrow-{{ $costDiff <= 0 ? 'down' : 'up' }}"></i> {{ format_currency(abs($costDiff)) }}
                                    </span>
                                    <span class="text-muted ml-1">so với hôm qua</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-danger text-white">
                                    <i class="fas fa-dollar-sign"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Profit Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Lợi nhuận (Hôm nay)</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ format_currency($statsToday['profit']) }}</div>
                                <div class="text-xs mt-2">
                                    @php $profitDiff = $statsToday['profit'] - $statsYesterday['profit']; @endphp
                                    <span class="{{ $profitDiff >= 0 ? 'text-success' : 'text-danger' }} font-weight-bold">
                                        <i class="fas fa-arrow-{{ $profitDiff >= 0 ? 'up' : 'down' }}"></i> {{ format_currency(abs($profitDiff)) }}
                                    </span>
                                    <span class="text-muted ml-1">so với hôm qua</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-success text-white">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Margin Card -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Lợi nhuận %</div>
                                <div class="row no-gutters align-items-center mt-2">
                                    <div class="col-auto ml-3">
                                        <div class="h5 mb-0  font-weight-bold text-gray-800">{{ number_format($statsToday['margin'], 1) }}%</div>
                                    </div>
                                    <div class="col">
                                        <div class="progress progress-sm mr-3" style="height: 8px;">
                                            <div class="progress-bar bg-info shadow-sm" role="progressbar" style="width: {{ min(100, max(0, $statsToday['margin'])) }}%" aria-valuenow="{{ $statsToday['margin'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-info text-white">
                                    <i class="fas fa-percent"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Toggle Button for App Status -->
         @if(Auth::user()->role_id == 1)
        <div class="row mb-3">
            <div class="col-12">
                <button class="btn btn-outline-primary btn-sm" type="button" data-toggle="collapse" data-target="#appStatusSection" aria-expanded="false" aria-controls="appStatusSection">
                    <i class="fas fa-chevron-down mr-1"></i> Xem thêm thông tin App
                </button>
            </div>
        </div>
        @endif

        <!-- App Status Cards (Collapsible) -->
        <div class="collapse" id="appStatusSection">
        <div class="row">
            <!-- Total Apps -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-secondary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">Tổng số App</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $appStats['total'] }}</div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-secondary text-white">
                                    <i class="fas fa-mobile-alt"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Apps -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">App đang hoạt động</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $appStats['active'] }}</div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-success text-white">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Apps with Data -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">App có dữ liệu hôm nay</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $appStats['with_data'] }}</div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-info text-white">
                                    <i class="fas fa-database"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Apps with Loss -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">App đang lỗ</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $appStats['with_loss'] }}</div>
                            </div>
                            <div class="col-auto">
                                <div class="icon-circle bg-warning text-white">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <!-- Charts and Top Apps -->
        <div class="row">
            <!-- Hourly Trend Chart -->
            <div class="col-xl-8 col-lg-7">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-white">
                        <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-chart-area mr-1"></i> Biểu đồ xu hướng theo giờ</h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-area" style="height: 350px;">
                            <canvas id="performanceChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Top Apps -->
            <div class="col-xl-4 col-lg-5">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-white">
                        <h6 class="m-0 font-weight-bold text-primary"> Những app hiệu quả nhất trong ngày</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="border-top-0">Tên App</th>
                                        <th class="text-right border-top-0">Lợi nhuận</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($topApps as $app)
                                    <tr>
                                        <td class="align-middle">
                                            <div class="font-weight-bold text-gray-800" title="{{ $app->app_name }}">{{ Str::limit($app->app_name, 45) }}</div>
                                        </td>
                                        <td class="text-right align-middle">
                                            <span class="badge badge-success px-2 py-1" style="font-size: 0.9rem;">
                                                {{ format_currency($app->profit) }}
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="2" class="text-center py-4 text-muted">Chưa có dữ liệu cho ngày này</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- User Management Section -->
        @if(Auth::user()->role_id == 1)
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-white">
                        <h6 class="m-0 font-weight-bold text-primary">
                            <i class="fas fa-users mr-1"></i> Danh sách marketing và số lượng App phụ trách
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="border-top-0">Tên User</th>
                                        <th class="border-top-0">Email</th>
                                        <th class="text-center border-top-0">Số lượng App</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($usersWithApps as $index => $user)
                                    <tr>
                                        <td class="align-middle">
                                            <div class="font-weight-bold text-gray-800">{{ $user->name }}</div>
                                        </td>
                                        <td class="align-middle">
                                            <span class="text-muted">{{ $user->email }}</span>
                                        </td>
                                        <td class="text-center align-middle">
                                            <span class="badge badge-{{ $user->app_count > 0 ? 'primary' : 'secondary' }} px-3 py-2" style="font-size: 0.9rem;">
                                                {{ $user->app_count }}
                                            </span>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4 text-muted">Không có user nào với vai trò là marketing</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
       

    </div>
@endsection

@push('styles')
<style>
    .icon-circle {
        height: 3rem;
        width: 3rem;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
    }
    .chart-area {
        position: relative;
        width: 100%;
    }
    .card {
        border-radius: 0.5rem;
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-3px);
    }
    .table td, .table th {
        padding: 1rem 1.25rem;
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('vendor/chart.js/Chart.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById("performanceChart");
        const chartData = @json($chartData);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartData.labels,
                datasets: [
                    {
                        label: "Doanh thu",
                        lineTension: 0.4,
                        backgroundColor: "rgba(78, 115, 223, 0.05)",
                        borderColor: "rgba(78, 115, 223, 1)",
                        pointRadius: 3,
                        pointBackgroundColor: "rgba(78, 115, 223, 1)",
                        pointBorderColor: "rgba(78, 115, 223, 1)",
                        pointHoverRadius: 4,
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        data: chartData.revenue,
                    },
                    {
                        label: "Chi phí",
                        lineTension: 0.4,
                        backgroundColor: "rgba(231, 74, 59, 0.05)",
                        borderColor: "rgba(231, 74, 59, 1)",
                        pointRadius: 3,
                        pointBackgroundColor: "rgba(231, 74, 59, 1)",
                        pointBorderColor: "rgba(231, 74, 59, 1)",
                        pointHoverRadius: 4,
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(231, 74, 59, 1)",
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        data: chartData.cost,
                    },
                    {
                        label: "Lợi nhuận",
                        lineTension: 0.4,
                        backgroundColor: "rgba(28, 200, 138, 0.05)",
                        borderColor: "rgba(28, 200, 138, 1)",
                        pointRadius: 3,
                        pointBackgroundColor: "rgba(28, 200, 138, 1)",
                        pointBorderColor: "rgba(28, 200, 138, 1)",
                        pointHoverRadius: 4,
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor: "rgba(28, 200, 138, 1)",
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        data: chartData.profit,
                    }
                ],
            },
            options: {
                maintainAspectRatio: false,
                layout: {
                    padding: { left: 10, right: 25, top: 25, bottom: 0 }
                },
                scales: {
                    xAxes: [{
                        gridLines: { display: false, drawBorder: false },
                        ticks: { maxTicksLimit: 12, fontSize: 11 }
                    }],
                    yAxes: [{
                        ticks: {
                            maxTicksLimit: 5,
                            padding: 10,
                            fontSize: 11,
                            callback: function(value) {
                                return value >= 1000 ? (value / 1000) + 'k' : value;
                            }
                        },
                        gridLines: {
                            color: "rgb(234, 236, 244)",
                            zeroLineColor: "rgb(234, 236, 244)",
                            drawBorder: false,
                            borderDash: [2],
                            zeroLineBorderDash: [2]
                        }
                    }],
                },
                legend: {
                    display: true,
                    position: 'top',
                    labels: { boxWidth: 12, fontSize: 11 }
                },
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    titleMarginBottom: 10,
                    titleFontColor: '#6e707e',
                    titleFontSize: 14,
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: true,
                    intersect: false,
                    mode: 'index',
                    caretPadding: 10,
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                            return datasetLabel + ': ' + tooltipItem.yLabel.toLocaleString() + '₫';
                        }
                    }
                }
            }
        });

        // Auto-submit form when date changes
        $('#dateInput').on('change', function() {
            $('#filter-form').submit();
        });

        // Toggle chevron icon for app status section
        $('#appStatusSection').on('show.bs.collapse', function () {
            $(this).prev().find('button i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
        });
        $('#appStatusSection').on('hide.bs.collapse', function () {
            $(this).prev().find('button i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        });
    });
</script>
@endpush