@extends('back.layouts.app', ['title' => FindInsettingArr('business_name') . ' | Dashboard'])
@section('beforeHeadClose')
    <style>
        .archiveWrp ul {
            list-style: none;
            margin: 0 0 0 0;
            padding: 0;
        }
        .archiveWrp ul li {
            background: #fff;
            padding: 10px;
            font-size: 14px;
            margin-bottom: 10px;
            border-left: 2px solid #4aa9e9;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        }
        .archiveWrp ul li a {
            color: #4aa9e9;
            text-decoration: underline
        }
        .quick-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }
        @media (min-width: 1200px) {
            .quick-actions-grid {
                grid-template-columns: repeat(5, 1fr);
            }
        }
        .quick-action-card {
            background: #fff;
            border-radius: 8px;
            padding: 25px 15px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
            border: 1px solid #f1f1f1;
            transition: all 0.2s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .quick-action-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        .quick-action-icon {
            font-size: 28px;
            margin-bottom: 12px;
        }
        .quick-action-title {
            font-size: 14px;
            font-weight: 600;
            color: #444;
            margin: 0;
        }
        .stat-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        @media (min-width: 1400px) {
            .stat-cards-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            border: 1px solid #f8f9fa;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        }
        .stat-card-top {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .stat-icon-wrapper {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            background: #f8f9fa;
        }
        .stat-icon-wrapper i {
            font-size: 20px;
        }
        .stat-info {
            display: flex;
            flex-direction: column;
        }
        .stat-label {
            font-size: 11px;
            font-weight: 700;
            color: #8898aa;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .stat-value {
            font-size: 22px;
            font-weight: 800;
            color: #32325d;
            margin: 0;
        }
        .stat-trend {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-top: 10px;
        }
        .trend-badge {
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 700;
            margin-right: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .trend-up {
            background: #e6fffa;
            color: #38a169;
        }
        .trend-down {
            background: #fff5f5;
            color: #e53e3e;
        }
        .trend-text {
            color: #8898aa;
        }
        /* News Announcement Styling */
        .news-announcement {
            background: linear-gradient(135deg, #3f9eb8 0%, #2c7a91 100%);
            color: #fff;
            padding: 15px 25px;
            border-radius: 12px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 15px rgba(63, 158, 184, 0.2);
            position: relative;
            overflow: hidden;
        }
        .news-announcement::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -10%;
            width: 300px;
            height: 300px;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
            pointer-events: none;
        }
        .news-content {
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 1;
        }
        .news-icon {
            font-size: 20px;
            background: rgba(255,255,255,0.2);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }
        .news-badge {
            background: #fff;
            color: #3f9eb8;
            font-size: 10px;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 4px;
            text-transform: uppercase;
        }
        .news-text {
            font-weight: 500;
            font-size: 14px;
        }
        .news-date {
            font-size: 12px;
            opacity: 0.8;
            margin-left: 10px;
        }
        .news-action-btn {
            background: #fff;
            color: #3f9eb8;
            border: none;
            padding: 6px 16px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 13px;
            transition: all 0.2s ease;
            z-index: 1;
            text-decoration: none !important;
        }
        .news-action-btn:hover {
            background: #f8f9fa;
            transform: scale(1.05);
            color: #2c7a91;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper pl-3 pr-2">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-md-5 col-sm-12">
                        <h1 class="m-0">Dashboard Overview</h1>
                    </div><!-- /.col -->
                    <div class="col-md-7 col-sm-12">
                        @include('back.common_views.quicklinks')
                    </div><!-- /.col -->
                    <div class="col-sm-12">@include('flash::message')</div>
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        @if ($news != null && count($news) > 0)
                            @foreach ($news as $newsItem)
                                <div class="news-announcement">
                                    <div class="news-content">
                                        <div class="news-icon">
                                            <i class="fas fa-bullhorn"></i>
                                        </div>
                                        <div class="news-info">
                                            <div class="d-flex align-items-center gap-2 mb-1">
                                                <!--<span class="news-badge">Update</span>-->
                                                <!--<span class="news-date">{{ date('d M Y', strtotime($newsItem->dated)) }}</span>-->
                                                <span class="news-badge">Update</span>
                                                <span class="news-date">May 2026</span>
                                            </div>
                                            <!--<div class="news-text">{{ $newsItem->title }}</div>-->
                                             <div class="news-text">CMS Update 2026</div>
                                        </div>
                                    </div>
                                    <a href="javascript:updateStatus({{ $newsItem->id . ',"' . $newsItem->link . '"' }})" class="news-action-btn">
                                        View Details <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        @include('back.dashboard.google_analytics')
        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                @php
                    $isAiAssistantEnabled = \App\Models\Back\Metadata::where('data_key', 'enable_ai_assistant')->first();
                @endphp
                @if($isAiAssistantEnabled && $isAiAssistantEnabled->val1 == 1)
                <div class="card mb-4" style="border-left: 4px solid #0d6efd; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-radius: 8px;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0" style="color: #2c3e50; font-weight: 700;">
                                <i class="fas fa-robot text-primary"></i> AI Assistant <span class="badge bg-success" style="font-size: 0.6em; vertical-align: middle;">BETA</span>
                            </h5>
                            <span class="text-muted" style="font-size: 0.9em;">Ask anything about your data</span>
                            <div style="width: 150px;"></div> <!-- Spacer to keep text centered -->
                        </div>
                        
                        <div class="mb-3 d-flex align-items-center flex-wrap">
                            <span class="text-muted me-2" style="font-size: 0.9em; margin-right: 10px;">Try:</span>
                            <button class="btn btn-sm btn-outline-secondary me-2 mb-2 ai-try-btn" style="border-radius: 4px; background: #fff;">Show latest leads</button>
                            <button class="btn btn-sm btn-outline-secondary me-2 mb-2 ai-try-btn" style="border-radius: 4px; background: #fff;">Revenue this month</button>
                            <button class="btn btn-sm btn-outline-secondary me-2 mb-2 ai-try-btn" style="border-radius: 4px; background: #fff;">Low stock products</button>
                            <button class="btn btn-sm btn-outline-secondary mb-2 ai-try-btn" style="border-radius: 4px; background: #fff;">Recent orders</button>
                        </div>
                        
                        <div class="input-group">
                            <input type="text" id="ai-query-input" class="form-control" placeholder="e.g. How many leads did we get this month?" style="border-right: none;">
                            <div class="input-group-append">
                                <button id="ai-mic-btn" class="btn btn-outline-secondary" type="button" style="border-left: none; background: #fff;"><i class="fas fa-microphone text-muted"></i></button>
                            </div>
                            <div class="input-group-append">
                                <button id="ai-ask-btn" class="btn btn-primary" type="button" style="padding-left: 20px; padding-right: 20px;"><i class="fas fa-paper-plane"></i> Ask</button>
                            </div>
                        </div>
                        <div id="ai-response-container" class="mt-3 p-3 bg-light rounded" style="display: none; border: 1px solid #e9ecef; white-space: pre-wrap;"></div>
                    </div>
                </div>
                @endif
                <h4 class="mb-3" style="color: #2c3e50; font-weight: 600;"><i class="fas fa-chart-line" style="color: #4b6cb7;"></i> Key Performance Indicators</h4>
                <div class="stat-cards-grid">
                    <!-- Total Revenue -->
                    <div class="stat-card">
                        <div class="stat-card-top">
                            <div class="stat-icon-wrapper" style="background: #e6fffa;">
                                <i class="fas fa-dollar-sign" style="color: #38a169;"></i>
                            </div>
                            <div class="stat-info">
                                <span class="stat-label">Total Revenue</span>
                                <h3 class="stat-value">${{ number_format($totalRevenue, 2) }}</h3>
                            </div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-badge {{ $revenueTrend >= 0 ? 'trend-up' : 'trend-down' }}">
                                <i class="fas fa-arrow-{{ $revenueTrend >= 0 ? 'up' : 'down' }}"></i> {{ abs($revenueTrend) }}%
                            </span>
                            <span class="trend-text">vs last month</span>
                        </div>
                    </div>

                    <!-- Total Orders -->
                    <div class="stat-card">
                        <div class="stat-card-top">
                            <div class="stat-icon-wrapper" style="background: #eef2ff;">
                                <i class="fas fa-shopping-cart" style="color: #4f46e5;"></i>
                            </div>
                            <div class="stat-info">
                                <span class="stat-label">Total Invoices</span>
                                <h3 class="stat-value">{{ $totalInvoices }}</h3>
                            </div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-badge trend-up">
                                <i class="fas fa-arrow-up"></i> 12.5%
                            </span>
                            <span class="trend-text">vs last month</span>
                        </div>
                    </div>

                    <!-- Total Clients -->
                    <div class="stat-card">
                        <div class="stat-card-top">
                            <div class="stat-icon-wrapper" style="background: #f0fdf4;">
                                <i class="fas fa-user-tie" style="color: #16a34a;"></i>
                            </div>
                            <div class="stat-info">
                                <span class="stat-label">Total Clients</span>
                                <h3 class="stat-value">{{ $totalClients }}</h3>
                            </div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-text">Active in system</span>
                        </div>
                    </div>

                    <!-- New Leads -->
                    <div class="stat-card">
                        <div class="stat-card-top">
                            <div class="stat-icon-wrapper" style="background: #fffbeb;">
                                <i class="fas fa-bullhorn" style="color: #d97706;"></i>
                            </div>
                            <div class="stat-info">
                                <span class="stat-label">New Leads</span>
                                <h3 class="stat-value">{{ $totalLeads }}</h3>
                            </div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-badge {{ $leadsTrend >= 0 ? 'trend-up' : 'trend-down' }}">
                                <i class="fas fa-arrow-{{ $leadsTrend >= 0 ? 'up' : 'down' }}"></i> {{ abs($leadsTrend) }}%
                            </span>
                            <span class="trend-text">vs last month</span>
                        </div>
                    </div>

                    <!-- Active Products -->
                    <div class="stat-card">
                        <div class="stat-card-top">
                            <div class="stat-icon-wrapper" style="background: #fef2f2;">
                                <i class="fas fa-box" style="color: #dc2626;"></i>
                            </div>
                            <div class="stat-info">
                                <span class="stat-label">Active Products</span>
                                <h3 class="stat-value">{{ $totalProducts }}</h3>
                            </div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-text">Available in catalog</span>
                        </div>
                    </div>

                    <!-- Admin Users -->
                    <div class="stat-card">
                        <div class="stat-card-top">
                            <div class="stat-icon-wrapper" style="background: #f8fafc;">
                                <i class="fas fa-user-shield" style="color: #64748b;"></i>
                            </div>
                            <div class="stat-info">
                                <span class="stat-label">Admin Users</span>
                                <h3 class="stat-value">{{ $totalAdminUsers }}</h3>
                            </div>
                        </div>
                        <div class="stat-trend">
                            <span class="trend-text">System administrators</span>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-7">
                        <div class="card elevation-2">
                            <div class="card-header border-0">
                                <div class="d-flex justify-content-between">
                                    <h3 class="card-title">Lead Generation Trends</h3>
                                    <a href="javascript:void(0);">View Report</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="d-flex">
                                    <p class="d-flex flex-column">
                                        <span class="text-bold text-lg">{{ $totalLeads }}</span>
                                        <span>Total Leads Over Time</span>
                                    </p>
                                </div>
                                <div class="position-relative mb-4">
                                    <canvas id="leads-chart" height="200"></canvas>
                                </div>
                                <div class="d-flex flex-row justify-content-end">
                                    <span class="mr-2">
                                        <i class="fas fa-square text-primary"></i> Leads
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="card elevation-2">
                            <div class="card-header border-0">
                                <h3 class="card-title">Recent Leads</h3>
                                <div class="card-tools">
                                    <a href="{{ admin_url() }}contact_request" class="btn btn-tool btn-sm">
                                        <i class="fas fa-bars"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <table class="table table-striped table-valign-middle">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Service</th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($recentLeads as $lead)
                                        <tr>
                                            <td>{{ $lead->name }}</td>
                                            <td><span class="badge bg-primary">{{ $lead->service ?? 'Inquiry' }}</span></td>
                                            <td>{{ date('M d', strtotime($lead->created_at)) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <h4 class="mb-3 mt-4" style="color: #2c3e50; font-weight: 600;"><i class="fas fa-th-large" style="color: #4b6cb7;"></i> Quick Actions</h4>
                <div class="quick-actions-grid">
                    @php
                        $currentURL = url()->current();
                        $currentURL = rtrim($currentURL, '.html');
                        $currentURL = str_replace(base_url(), '', $currentURL);
                        $arrLinks = [];
                        $beforeLinks = \App\Helpers\DashboardLinks::$beforeModuleLinks;
                        $arrLinksModule = \App\Helpers\DashboardLinks::get_cms_modules('dashboard');
                        $afterLinks = \App\Helpers\DashboardLinks::$afterModuleLinks;
                        $arrLinks = array_merge($beforeLinks, $arrLinksModule, $afterLinks);
                        $iconColors = ['#0d6efd', '#198754', '#20c997', '#ffc107', '#dc3545', '#6f42c1', '#fd7e14'];
                        $colorCounter = 0;
                    @endphp
                    @foreach ($arrLinks as $key => $val)
                        @if (isset($val['user_type']) && in_array(auth()->user()->type, $val['user_type']))
                            <a target="{{ $val[3] == 'newtab' ? '_blank' : '' }}" style="text-decoration: none;" href="{{ admin_url() . '' . $val[2] }}">
                                <div class="quick-action-card">
                                    <div class="quick-action-icon" style="color: {{ $iconColors[$colorCounter++] }};">
                                        <i class="fas {{ $val[1] }}"></i>
                                    </div>
                                    <h5 class="quick-action-title">
                                        @if (isset($adminAlerts[$key]) && $adminAlerts[$key] != '0' && $adminAlerts[$key] != '')
                                            <span class="badge bg-danger">{{ $adminAlerts[$key] }}</span>
                                        @endif
                                        {{ $val[0] }}
                                    </h5>
                                </div>
                            </a>
                        @endif
                        @php
                            if ($colorCounter == 7) {
                                $colorCounter = 0;
                            }
                        @endphp
                    @endforeach
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
@endsection
@section('beforeBodyClose')
    <script>
        $(document).ready(function() {
            // Handle 'Try' buttons
            $('.ai-try-btn').click(function() {
                var text = $(this).text();
                $('#ai-query-input').val(text);
                $('#ai-ask-btn').click();
            });

            // Handle Enter key
            $('#ai-query-input').keypress(function(e) {
                if(e.which == 13) {
                    $('#ai-ask-btn').click();
                }
            });

            // Handle Voice (Web Speech API)
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (SpeechRecognition) {
                const recognition = new SpeechRecognition();
                recognition.continuous = false;
                recognition.interimResults = false;

                $('#ai-mic-btn').click(function() {
                    var $icon = $(this).find('i');
                    $icon.removeClass('fa-microphone text-muted').addClass('fa-spinner fa-spin text-danger');
                    recognition.start();
                });

                recognition.onresult = function(event) {
                    var transcript = event.results[0][0].transcript;
                    $('#ai-query-input').val(transcript);
                    $('#ai-mic-btn').find('i').removeClass('fa-spinner fa-spin text-danger').addClass('fa-microphone text-muted');
                    $('#ai-ask-btn').click();
                };

                recognition.onerror = function(event) {
                    console.error("Speech recognition error", event.error);
                    $('#ai-mic-btn').find('i').removeClass('fa-spinner fa-spin text-danger').addClass('fa-microphone text-muted');
                    alert("Voice recognition error: " + event.error);
                };
            } else {
                $('#ai-mic-btn').click(function() {
                    alert("Speech recognition is not supported in this browser.");
                });
            }

            // Handle Form Submission
            $('#ai-ask-btn').click(function() {
                var query = $('#ai-query-input').val().trim();
                if (!query) return;

                var $btn = $(this);
                var originalHtml = $btn.html();
                $btn.html('<i class="fas fa-spinner fa-spin"></i> Thinking...');
                $btn.prop('disabled', true);
                
                var $responseContainer = $('#ai-response-container');
                $responseContainer.show().html('<div class="text-muted"><i class="fas fa-circle-notch fa-spin"></i> Analyzing data...</div>');

                $.ajax({
                    url: "{{ route('ai_assistant.query') }}",
                    type: "POST",
                    data: {
                        query: query,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(res) {
                        $btn.html(originalHtml);
                        $btn.prop('disabled', false);

                        if (res.error) {
                            $responseContainer.html('<div class="text-danger"><i class="fas fa-exclamation-triangle"></i> ' + res.error + '</div>');
                        } else if (res.reply) {
                            $responseContainer.html('<div><strong><i class="fas fa-robot text-primary"></i> AI:</strong><br>' + res.reply + '</div>');
                        }
                    },
                    error: function() {
                        $btn.html(originalHtml);
                        $btn.prop('disabled', false);
                        $responseContainer.html('<div class="text-danger"><i class="fas fa-exclamation-triangle"></i> Failed to reach AI assistant.</div>');
                    }
                });
            });
            
            // Leads Chart
            var ticksStyle = {
                fontColor: '#495057',
                fontStyle: 'bold'
            }

            var mode = 'index'
            var intersect = true

            var $leadsChart = $('#leads-chart')
            var leadsChart = new Chart($leadsChart, {
                type: 'bar',
                data: {
                    labels: {!! $monthsJson !!},
                    datasets: [
                        {
                            backgroundColor: '#007bff',
                            borderColor: '#007bff',
                            data: {!! $monthlyLeadsJson !!}
                        }
                    ]
                },
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            gridLines: {
                                display: true,
                                lineWidth: '4px',
                                color: 'rgba(0, 0, 0, .05)',
                                zeroLineColor: 'transparent'
                            },
                            ticks: $.extend({
                                beginAtZero: true,
                                callback: function (value) {
                                    if (value >= 1000) {
                                        value /= 1000
                                        value += 'k'
                                    }
                                    return value
                                }
                            }, ticksStyle)
                        }],
                        xAxes: [{
                            display: true,
                            gridLines: {
                                display: false
                            },
                            ticks: ticksStyle
                        }]
                    }
                }
            })
        });

        function updateStatus(id, link) {
            var url = "{{ admin_url() }}news_update?id=" + id;
            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    if (link && link !== 'null' && link !== '') {
                        window.open(link, '_blank');
                    }
                    location.reload();
                },
                error: function() {
                    if (link && link !== 'null' && link !== '') {
                        window.open(link, '_blank');
                    }
                    location.reload();
                }
            });
        }
    </script>
@endsection