@extends('layouts.app')

@section('content')
@php
    $todayTasks = \App\Models\Task::where('due_date', now()->toDateString())->where('status', 'pending')->get();
@endphp
@if($todayTasks->count())
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
            </svg>
        </div>
        <div class="ml-3">
            <p class="text-sm text-blue-700 font-medium">Task Reminders</p>
            <ul class="mt-2 text-sm text-blue-700">
                @foreach($todayTasks as $task)
                    <li class="mb-1">
                        <strong>{{ $task->title }}</strong> (Priority: {{ ucfirst($task->priority) }}) - Assigned to: {{ $task->user ? $task->user->name : 'Unassigned' }}
                        <a href="{{ route('tasks.show', $task) }}" class="text-blue-600 hover:text-blue-800 underline">View</a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endif
@php
    $todayLeads = \App\Models\Lead::where('next_follow_up_date', now()->toDateString())->get();
@endphp
@if($todayLeads->count())
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
        </div>
        <div class="ml-3">
            <p class="text-sm text-yellow-700 font-medium">Follow-Up Reminders</p>
            <ul class="mt-2 text-sm text-yellow-700">
                @foreach($todayLeads as $lead)
                    <li class="mb-1">
                        <strong>{{ $lead->name }}</strong> ({{ $lead->email }}) - Assigned to: {{ $lead->assignedTo ? $lead->assignedTo->name : 'Unassigned' }}
                        <a href="{{ route('leads.show', $lead) }}" class="text-yellow-600 hover:text-yellow-800 underline">View</a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endif
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">CRM Dashboard</h1>
        <p class="mt-2 text-gray-600">Welcome to your CRM overview</p>
    </div>
    <div class="mb-8 flex flex-wrap gap-4 justify-end">
        <form action="{{ route('exports.salesReport') }}" method="GET" class="flex flex-wrap gap-2 items-center">
            <select name="assigned_to" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                <option value="">All Users</option>
                @foreach($userNames as $id => $name)
                    <option value="{{ $id }}">{{ $name }}</option>
                @endforeach
            </select>
            <select name="month" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                <option value="">All Months</option>
                @for($m=1;$m<=12;$m++)
                    <option value="{{ $m }}">{{ date('F', mktime(0,0,0,$m,1)) }}</option>
                @endfor
            </select>
            <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700" name="format" value="xlsx" type="submit">Export Excel</button>
            <button class="bg-gray-600 text-white px-4 py-2 rounded-md hover:bg-gray-700" name="format" value="csv" type="submit">Export CSV</button>
        </form>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center">
                <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                    <p class="text-blue-100 text-sm font-medium">Total Leads</p>
                    <p class="text-2xl font-bold">{{ $totalLeads }}</p>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center">
                <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                    <p class="text-green-100 text-sm font-medium">Converted Leads</p>
                    <p class="text-2xl font-bold">{{ $convertedLeads }}</p>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center">
                <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                <div>
                    <p class="text-purple-100 text-sm font-medium">Total Customers</p>
                    <p class="text-2xl font-bold">{{ $totalCustomers }}</p>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center">
                <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                </svg>
                <div>
                    <p class="text-yellow-100 text-sm font-medium">Open Tasks</p>
                    <p class="text-2xl font-bold">{{ $openTasks }}</p>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-red-500 to-red-600 rounded-lg shadow-lg p-6 text-white col-span-1 md:col-span-2 lg:col-span-4">
            <div class="flex items-center justify-center">
                <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"></path>
                </svg>
                <div>
                    <p class="text-red-100 text-sm font-medium">Total Revenue</p>
                    <p class="text-3xl font-bold">${{ number_format($revenue, 2) }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Leads by Status</h3>
            <canvas id="leadsStatusChart"></canvas>
        </div>
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Monthly Conversions</h3>
            <canvas id="monthlyConversionsChart"></canvas>
        </div>
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Sales Performance by User</h3>
            <canvas id="salesPerformanceChart"></canvas>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Pie chart: Leads by status
const leadsStatusCtx = document.getElementById('leadsStatusChart').getContext('2d');
new Chart(leadsStatusCtx, {
    type: 'pie',
    data: {
        labels: {!! json_encode($leadStatusData->keys()) !!},
        datasets: [{
            data: {!! json_encode($leadStatusData->values()) !!},
            backgroundColor: ['#007bff', '#28a745', '#17a2b8', '#ffc107', '#dc3545'],
        }]
    }
});
// Bar chart: Monthly conversions
const monthlyConversionsCtx = document.getElementById('monthlyConversionsChart').getContext('2d');
new Chart(monthlyConversionsCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($monthlyConversions->keys()) !!},
        datasets: [{
            label: 'Conversions',
            data: {!! json_encode($monthlyConversions->values()) !!},
            backgroundColor: '#28a745',
        }]
    }
});
// Bar chart: Sales performance by user
const salesPerformanceCtx = document.getElementById('salesPerformanceChart').getContext('2d');
new Chart(salesPerformanceCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($userNames->values()) !!},
        datasets: [{
            label: 'Revenue',
            data: {!! json_encode($salesPerformance->values()) !!},
            backgroundColor: '#007bff',
        }]
    }
});
</script>
@endsection