@extends('layouts.app')

@section('title', 'Dashboard - EKINPAY')
@section('page-title', 'Dashboard Overview')

@section('content')
<style>
/* Custom Green Colors */
.bg-green-500\/20 { background-color: #38a16933 !important; }
.text-green-400 { color: #38a169 !important; }
.text-green-300 { color: #68d391 !important; }
.border-green-500\/30 { border-color: #38a1694d !important; }
.bg-green-600 { background-color: #2f855a !important; }
.hover\:bg-green-700:hover { background-color: #276749 !important; }
</style>
<div class="space-y-6">
<!-- Stats Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-6 lg:mb-8">
    <!-- Companies -->
    <div class="bg-gradient-to-br from-blue-600/80 to-blue-700/80 rounded-2xl p-4 lg:p-6 text-white shadow-xl border border-blue-500/30">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-200 text-xs lg:text-sm">Companies</p>
                <p class="text-2xl lg:text-3xl font-bold">{{ $stats['totalCompanies'] }}</p>
            </div>
            <div class="bg-white/20 rounded-lg p-2 lg:p-3">
                <svg class="w-6 h-6 lg:w-8 lg:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- Orders -->
    <div class="bg-gradient-to-br from-cyan-600/80 to-cyan-700/80 rounded-2xl p-4 lg:p-6 text-white shadow-xl border border-cyan-500/30">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-cyan-200 text-xs lg:text-sm">Orders</p>
                <p class="text-2xl lg:text-3xl font-bold">{{ $stats['totalOrders'] }}</p>
            </div>
            <div class="bg-white/20 rounded-lg p-2 lg:p-3">
                <svg class="w-6 h-6 lg:w-8 lg:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- Plans -->
    <div class="bg-gradient-to-br from-indigo-600/80 to-indigo-700/80 rounded-2xl p-4 lg:p-6 text-white shadow-xl border border-indigo-500/30">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-indigo-200 text-xs lg:text-sm">Plans</p>
                <p class="text-2xl lg:text-3xl font-bold">{{ $stats['plansAvailable'] }}</p>
            </div>
            <div class="bg-white/20 rounded-lg p-2 lg:p-3">
                <svg class="w-6 h-6 lg:w-8 lg:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- Income -->
    <div class="bg-gradient-to-br from-teal-600/80 to-teal-700/80 rounded-2xl p-4 lg:p-6 text-white shadow-xl border border-teal-500/30">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-teal-200 text-xs lg:text-sm">Income</p>
                <p class="text-2xl lg:text-3xl font-bold">{{ $currencySymbol }}{{ number_format($stats['incomeThisMonth'], 0) }}</p>
            </div>
            <div class="bg-white/20 rounded-lg p-2 lg:p-3">
                <svg class="w-6 h-6 lg:w-8 lg:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
                </svg>
            </div>
        </div>
    </div>
</div>

<!-- Revenue Chart -->
<div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-xl md:rounded-2xl p-4 md:p-6 shadow-2xl">
    <h3 class="text-base lg:text-lg font-semibold mb-4 text-slate-900 dark:text-white">Full Year Revenue</h3>
    <div class="space-y-4">
        @php
            $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            $data = $monthlyIncome ?? array_fill(0, 12, 0);
            $maxValue = max($data);
        @endphp
        <div class="grid grid-cols-12 gap-2 h-80 items-end">
            @foreach($months as $index => $month)
                @php $height = $maxValue > 0 ? ($data[$index] / $maxValue) * 100 : 0; @endphp
                <div class="flex flex-col items-center">
                    <div class="bg-blue-500 rounded-t w-full transition-all duration-500 hover:bg-blue-400" 
                         style="height: {{ $height }}%" 
                         title="{{ $month }}: {{ $currencySymbol }}{{ number_format($data[$index]) }}"></div>
                    <span class="text-xs text-slate-400 mt-2">{{ $month }}</span>
                </div>
            @endforeach
        </div>
    </div>
</div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Simple CSS chart - no ApexCharts needed

// Server Stats
var serverStats = @json($serverStats ?? ['cpu' => 45, 'ram' => 15, 'disk' => 6]);

// CPU Gauge
if (document.querySelector("#cpuGauge")) {
    var cpuGauge = {
        series: [serverStats.cpu || 45],
        chart: { height: 200, width: 200, type: 'radialBar' },
        plotOptions: {
            radialBar: {
                startAngle: -90, endAngle: 90,
                track: { background: "#e7e7e7", strokeWidth: '97%', margin: 5 },
                dataLabels: {
                    name: { show: false },
                    value: { offsetY: -2, fontSize: '18px', color: '#dc3545', formatter: function (val) { return val + "%"; } }
                }
            }
        },
        colors: ['#dc3545'], stroke: { dashArray: 4 }, labels: ['CPU']
    };
    new ApexCharts(document.querySelector("#cpuGauge"), cpuGauge).render();
}

// RAM Gauge
if (document.querySelector("#ramGauge")) {
    var ramGauge = {
        series: [serverStats.ram || 15],
        chart: { height: 200, width: 200, type: 'radialBar' },
        plotOptions: {
            radialBar: {
                startAngle: -90, endAngle: 90,
                track: { background: "#e7e7e7", strokeWidth: '97%', margin: 5 },
                dataLabels: {
                    name: { show: false },
                    value: { offsetY: -2, fontSize: '18px', color: '#ffc107', formatter: function (val) { return val + "%"; } }
                }
            }
        },
        colors: ['#ffc107'], stroke: { dashArray: 4 }, labels: ['RAM']
    };
    new ApexCharts(document.querySelector("#ramGauge"), ramGauge).render();
}

// Disk Gauge
if (document.querySelector("#diskGauge")) {
    var diskGauge = {
        series: [serverStats.disk || 6],
        chart: { height: 200, width: 200, type: 'radialBar' },
        plotOptions: {
            radialBar: {
                startAngle: -90, endAngle: 90,
                track: { background: "#e7e7e7", strokeWidth: '97%', margin: 5 },
                dataLabels: {
                    name: { show: false },
                    value: { offsetY: -2, fontSize: '18px', color: '#28a745', formatter: function (val) { return val + "%"; } }
                }
            }
        },
        colors: ['#28a745'], stroke: { dashArray: 4 }, labels: ['Disk']
    };
    new ApexCharts(document.querySelector("#diskGauge"), diskGauge).render();
}
</script>
@endpush