@extends('layouts.admin')

@section('title', __('Home Slider Analytics'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Home Slider Analytics') }}</h1>
            <p class="mb-0 text-muted">{{ __('Performance metrics for ') }}{{ $homeSlider->title_en ?? $homeSlider->title_ar ?? __('Untitled') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.home-sliders.show', ['home_slider' => $homeSlider, 'locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Slider') }}
            </a>
        </div>
    </div>

    <!-- Metrics Cards -->
    <div class="row mb-4">
        <!-- Total Views -->
        <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">
                                {{ __('Total Views') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($analytics['total_views'] ?? 0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-eye fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Clicks -->
        <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">
                                {{ __('Total Clicks') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($analytics['total_clicks'] ?? 0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-mouse-pointer fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Click Through Rate -->
        <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">
                                {{ __('CTR') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $analytics['ctr'] ?? 0 }}%</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-percentage fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Average Session Duration -->
        <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">
                                {{ __('Avg. Session') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $analytics['avg_session'] ?? '0s' }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <!-- Views Over Time -->
        <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">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Views & Clicks Over Time') }}</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                            <div class="dropdown-header">{{ __('Filter Options') }}</div>
                            <a class="dropdown-item" href="#">{{ __('Last 7 days') }}</a>
                            <a class="dropdown-item" href="#">{{ __('Last 30 days') }}</a>
                            <a class="dropdown-item" href="#">{{ __('This month') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="analyticsChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Device & Language Breakdown -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Device Breakdown') }}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4">
                        <canvas id="deviceChart"></canvas>
                    </div>
                    <hr>
                    <div class="text-center small">
                        <span class="mr-2">
                            <i class="fas fa-circle text-primary"></i> {{ __('Desktop') }}
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-success"></i> {{ __('Mobile') }}
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-info"></i> {{ __('Tablet') }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Language Breakdown') }}</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4">
                        <canvas id="languageChart"></canvas>
                    </div>
                    <hr>
                    <div class="text-center small">
                        <span class="mr-2">
                            <i class="fas fa-circle text-primary"></i> {{ __('English') }}
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-success"></i> {{ __('Arabic') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Analytics Table -->
    <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">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Detailed Analytics') }}</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="exportDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-download fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="exportDropdown">
                            <div class="dropdown-header">{{ __('Export Options') }}</div>
                            <a class="dropdown-item" href="#">{{ __('Export as CSV') }}</a>
                            <a class="dropdown-item" href="#">{{ __('Export as PDF') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="analyticsTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>{{ __('Date') }}</th>
                                    <th>{{ __('Event Type') }}</th>
                                    <th>{{ __('Language') }}</th>
                                    <th>{{ __('Device') }}</th>
                                    <th>{{ __('User Agent') }}</th>
                                    <th>{{ __('IP Address') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($analytics['events'] ?? [] as $event)
                                    <tr>
                                        <td>{{ $event->event_at->format('M d, Y H:i') }}</td>
                                        <td>
                                            @if($event->event_type == 'view')
                                                <span class="badge badge-primary">{{ __('View') }}</span>
                                            @elseif($event->event_type == 'click')
                                                <span class="badge badge-success">{{ __('Click') }}</span>
                                            @else
                                                <span class="badge badge-secondary">{{ $event->event_type }}</span>
                                            @endif
                                        </td>
                                        <td>{{ $event->language ?? 'N/A' }}</td>
                                        <td>{{ $event->device_type ?? 'N/A' }}</td>
                                        <td class="text-truncate" style="max-width: 200px;" title="{{ $event->user_agent }}">{{ $event->user_agent ?? 'N/A' }}</td>
                                        <td>{{ $event->metadata['ip'] ?? 'N/A' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">
                                            <i class="fas fa-chart-bar fa-3x text-gray-300 mb-3"></i>
                                            <h5 class="text-gray-500">{{ __('No analytics data available') }}</h5>
                                            <p class="text-gray-400">{{ __('Analytics data will appear here once users interact with this slider.') }}</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if(isset($analytics['events']) && $analytics['events']->hasPages())
                        <div class="d-flex justify-content-center mt-3">
                            {{ $analytics['events']->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Analytics Chart (Views & Clicks)
    var ctx = document.getElementById("analyticsChart");
    var analyticsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($chartData['labels'] ?? []) !!},
            datasets: [{
                label: "{{ __('Views') }}",
                lineTension: 0.3,
                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: 3,
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 10,
                pointBorderWidth: 2,
                data: {!! json_encode($chartData['views'] ?? []) !!},
            }, {
                label: "{{ __('Clicks') }}",
                lineTension: 0.3,
                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: 3,
                pointHoverBackgroundColor: "rgba(28, 200, 138, 1)",
                pointHoverBorderColor: "rgba(28, 200, 138, 1)",
                pointHitRadius: 10,
                pointBorderWidth: 2,
                data: {!! json_encode($chartData['clicks'] ?? []) !!},
            }],
        },
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                }
            },
            scales: {
                xAxes: [{
                    time: {
                        unit: 'date'
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 7
                    }
                }],
                yAxes: [{
                    ticks: {
                        maxTicksLimit: 5,
                        padding: 10,
                        callback: function(value, index, values) {
                            return number_format(value);
                        }
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }],
            },
            legend: {
                display: true
            },
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                titleMarginBottom: 10,
                titleFontColor: '#6e707e',
                titleFontSize: 14,
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                intersect: false,
                mode: 'index',
                caretPadding: 10,
                callbacks: {
                    label: function(tooltipItem, chart) {
                        var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel + ': ' + number_format(tooltipItem.yLabel);
                    }
                }
            }
        }
    });

    // Device Chart
    var ctx2 = document.getElementById("deviceChart");
    var deviceChart = new Chart(ctx2, {
        type: 'doughnut',
        data: {
            labels: ["{{ __('Desktop') }}", "{{ __('Mobile') }}", "{{ __('Tablet') }}"],
            datasets: [{
                data: {!! json_encode($deviceData ?? [0, 0, 0]) !!},
                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
                hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }],
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                caretPadding: 10,
            },
            legend: {
                display: false
            },
            cutoutPercentage: 80,
        },
    });

    // Language Chart
    var ctx3 = document.getElementById("languageChart");
    var languageChart = new Chart(ctx3, {
        type: 'doughnut',
        data: {
            labels: ["{{ __('English') }}", "{{ __('Arabic') }}"],
            datasets: [{
                data: {!! json_encode($languageData ?? [0, 0]) !!},
                backgroundColor: ['#4e73df', '#1cc88a'],
                hoverBackgroundColor: ['#2e59d9', '#17a673'],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }],
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                caretPadding: 10,
            },
            legend: {
                display: false
            },
            cutoutPercentage: 80,
        },
    });

    // Initialize DataTable
    $('#analyticsTable').DataTable({
        "pageLength": 25,
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "order": [[ 0, "desc" ]],
        "language": {
            "search": "{{ __('Search:') }}",
            "lengthMenu": "{{ __('Show _MENU_ entries') }}",
            "info": "{{ __('Showing _START_ to _END_ of _TOTAL_ entries') }}",
            "paginate": {
                "first": "{{ __('First') }}",
                "last": "{{ __('Last') }}",
                "next": "{{ __('Next') }}",
                "previous": "{{ __('Previous') }}"
            }
        }
    });
});
</script>
@endpush
@endsection