@extends('layout.app')

@section('title', 'Fleet & Operations Dashboard')

@push('header_script')
    <style>
        .dash-hero-card {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-radius: 14px;
            color: #fff;
            padding: 24px 28px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .dash-hero-card::after {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        .kpi-stat-card {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            background: #ffffff;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        .kpi-stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
        .kpi-stat-card .kpi-icon-wrap {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        .badge-soft-primary { background-color: #eff6ff; color: #2563eb; }
        .badge-soft-success { background-color: #f0fdf4; color: #16a34a; }
        .badge-soft-warning { background-color: #fffbeb; color: #d97706; }
        .badge-soft-danger  { background-color: #fef2f2; color: #dc2626; }
        .badge-soft-info    { background-color: #f0f9ff; color: #0284c7; }

        .quick-action-btn {
            border-radius: 8px;
            padding: 8px 14px;
            font-weight: 500;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .quick-action-btn:hover {
            transform: translateY(-1px);
        }
        .table-custom td {
            vertical-align: middle;
            font-size: 13.5px;
        }
        .table-custom thead th {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background-color: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="javascript:void(0);"><i class="ri-dashboard-line me-1"></i> Dashboard</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Fleet & Operations Overview
        </li>
    </ol>
    <div class="ms-auto d-flex align-items-center gap-2">
        <a href="{{ route('trip-sheet.create') }}" class="btn btn-sm btn-primary">
            <i class="ri-add-line"></i> New Trip Sheet
        </a>
        <a href="{{ route('freight-entry.create') }}" class="btn btn-sm btn-outline-primary">
            <i class="ri-file-add-line"></i> Freight Entry
        </a>
    </div>
</div>

<div class="app-body">
    <!-- Executive Welcome & Subscription Banner -->
    <div class="dash-hero-card mb-4">
        <div class="row align-items-center">
            <div class="col-lg-7 col-12 mb-3 mb-lg-0">
                <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
                    @if(is_desktop_mode())
                        <span class="badge bg-primary px-2 py-1">
                            <i class="ri-computer-line me-1"></i> DESKTOP EDITION
                        </span>
                        <span class="badge bg-success-subtle text-success border border-success px-2 py-1">
                            <i class="ri-shield-check-line me-1"></i> Licensed
                        </span>
                        <span class="badge bg-warning-subtle text-warning border border-warning px-2 py-1">
                            <i class="ri-truck-line me-1"></i> Limit: {{ $vehicleLimit }} Vehicles
                        </span>
                        <a href="javascript:void(0);" onclick="if(window.electronAPI && window.electronAPI.showActivationWindow){ window.electronAPI.showActivationWindow(); }" class="badge bg-light text-primary border px-2 py-1 text-decoration-none" title="Click to upgrade vehicle limit">
                            <i class="ri-key-2-line me-1"></i> Upgrade Limit
                        </a>
                        @if($desktopLicense && !empty($desktopLicense['expiryDate']))
                            <span class="text-white-50 small">
                                <i class="ri-calendar-line"></i> Valid till: <strong class="text-white">{{ date('d-M-Y', strtotime($desktopLicense['expiryDate'])) }}</strong>
                            </span>
                        @else
                            <span class="text-white-50 small">
                                <i class="ri-infinity-line"></i> Lifetime Validity
                            </span>
                        @endif
                    @else
                        <span class="badge bg-primary px-2 py-1">
                            <i class="ri-building-line me-1"></i> {{ $currentTenant ? $currentTenant->company_code : 'CLIENT' }}
                        </span>
                        @if($currentTenant && $currentTenant->plan)
                            <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                                <i class="ri-vip-crown-line me-1"></i> {{ $currentTenant->plan->name }} ({{ $currentTenant->plan->billing_cycle }})
                            </span>
                        @elseif($currentTenant && $currentTenant->subscription_plan)
                            <span class="badge bg-info-subtle text-info border border-info-subtle px-2 py-1">
                                {{ $currentTenant->subscription_plan }}
                            </span>
                        @endif
                        @if($currentTenant && $currentTenant->plan_expires_at)
                            <span class="text-white-50 small">
                                <i class="ri-calendar-line"></i> Valid till: <strong class="text-white">{{ $currentTenant->plan_expires_at->format('d-M-Y') }}</strong>
                            </span>
                        @endif
                    @endif
                </div>
                <h3 class="fw-bold mb-0 text-white">
                    {{ $currentTenant ? $currentTenant->company_name : 'Welcome to Fleet ERP' }}
                </h3>
            </div>
            <div class="col-lg-5 col-12 text-lg-end">
                <div class="d-flex flex-wrap gap-2 justify-content-lg-end">
                    <a href="{{ route('vehicle.create') }}" class="btn btn-light quick-action-btn">
                        <i class="ri-truck-line text-primary"></i> Add Vehicle
                    </a>
                    <a href="{{ route('freight-billing.create') }}" class="btn btn-light quick-action-btn">
                        <i class="ri-receipt-line text-success"></i> Generate Invoice
                    </a>
                    @if(!is_desktop_mode())
                    <a href="{{ route('client.document-manager.index') }}" class="btn btn-outline-light quick-action-btn">
                        <i class="ri-folder-shield-2-line"></i> Storage & Plan
                    </a>
                    @else
                    <a href="{{ route('vehicle.index') }}" class="btn btn-outline-light quick-action-btn text-white">
                        <i class="ri-truck-line text-warning"></i> Vehicles: {{ $totalVehicles }}/{{ $vehicleLimit }}
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Top KPI Metric Cards -->
    <div class="row gx-3 mb-4">
        <!-- 1. Total Fleet Card -->
        <div class="col-xl-3 col-sm-6 col-12 mb-3">
            <div class="card kpi-stat-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Fleet Utilization</span>
                        <h3 class="mb-0 fw-bold text-dark mt-1">{{ $totalVehicles }} <small class="fs-6 fw-normal text-muted">/ {{ $vehicleLimit }} Limit</small></h3>
                    </div>
                    <div class="kpi-icon-wrap bg-primary-subtle text-primary">
                        <i class="ri-truck-line"></i>
                    </div>
                </div>
                <div class="progress mb-2" style="height: 6px;">
                    @php
                        $utilPercent = $vehicleLimit > 0 ? min(100, round(($totalVehicles / $vehicleLimit) * 100)) : 0;
                    @endphp
                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $utilPercent }}%;" aria-valuenow="{{ $utilPercent }}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="d-flex justify-content-between small text-muted">
                    <span><i class="ri-checkbox-circle-fill text-success me-1"></i>{{ $assignedVehicles }} Assigned / On Trip</span>
                    <span><i class="ri-pause-circle-line text-secondary me-1"></i>{{ $availableVehicles }} Available</span>
                </div>
            </div>
        </div>

        <!-- 2. Active Trips & Operations -->
        <div class="col-xl-3 col-sm-6 col-12 mb-3">
            <div class="card kpi-stat-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Active Operations</span>
                        <h3 class="mb-0 fw-bold text-dark mt-1">{{ $totalTrips }} <small class="fs-6 fw-normal text-muted">Trips</small></h3>
                    </div>
                    <div class="kpi-icon-wrap bg-info-subtle text-info">
                        <i class="ri-route-line"></i>
                    </div>
                </div>
                <div class="mt-3 d-flex justify-content-between align-items-center">
                    <span class="badge badge-soft-success px-2 py-1">
                        <i class="ri-loader-4-line ri-spin me-1"></i> {{ $activeTrips }} In Transit
                    </span>
                    <span class="badge badge-soft-primary px-2 py-1">
                        <i class="ri-check-double-line me-1"></i> {{ $completedTrips }} Completed
                    </span>
                    <span class="text-muted small">
                        {{ $totalFreightEntries }} GRs
                    </span>
                </div>
            </div>
        </div>

        <!-- 3. Revenue (This Month) -->
        <div class="col-xl-3 col-sm-6 col-12 mb-3">
            <div class="card kpi-stat-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Freight Revenue (Month)</span>
                        <h3 class="mb-0 fw-bold text-success mt-1">₹{{ number_format($monthRevenue, 2) }}</h3>
                    </div>
                    <div class="kpi-icon-wrap bg-success-subtle text-success">
                        <i class="ri-wallet-3-line"></i>
                    </div>
                </div>
                <div class="mt-3 d-flex justify-content-between align-items-center small text-muted">
                    <span>Lifetime Billed:</span>
                    <strong class="text-dark">₹{{ number_format($totalRevenue, 2) }}</strong>
                </div>
            </div>
        </div>

        <!-- 4. Operating Expenses (This Month) -->
        <div class="col-xl-3 col-sm-6 col-12 mb-3">
            <div class="card kpi-stat-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Operating Expenses</span>
                        <h3 class="mb-0 fw-bold text-danger mt-1">₹{{ number_format($monthExpenses, 2) }}</h3>
                    </div>
                    <div class="kpi-icon-wrap bg-danger-subtle text-danger">
                        <i class="ri-gas-station-line"></i>
                    </div>
                </div>
                <div class="mt-3 d-flex justify-content-between align-items-center small text-muted">
                    <span>Active Drivers: <strong class="text-dark">{{ $totalDrivers }}</strong></span>
                    <span>Staff: <strong class="text-dark">{{ $totalStaff }}</strong></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row: Financial Trend & Fleet Status -->
    <div class="row gx-3 mb-4">
        <div class="col-lg-8 col-12 mb-3">
            <div class="card h-100 border">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
                    <div>
                        <h6 class="mb-0 fw-bold text-dark">
                            <i class="ri-line-chart-line text-primary me-2"></i> Operational Performance (Last 6 Months)
                        </h6>
                        <small class="text-muted">Freight Revenue vs Operating & Trip Expenses</small>
                    </div>
                    <span class="badge bg-light text-dark border font-monospace">Revenue / Expenses</span>
                </div>
                <div class="card-body">
                    <div id="revenueExpenseChart" style="min-height: 300px;"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-12 mb-3">
            <div class="card h-100 border">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="mb-0 fw-bold text-dark">
                        <i class="ri-pie-chart-line text-info me-2"></i> Fleet Status Breakdown
                    </h6>
                    <small class="text-muted">Current vehicle allocation overview</small>
                </div>
                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                    <div id="fleetStatusDonutChart" style="min-height: 250px; width: 100%;"></div>
                    <div class="w-100 mt-3 pt-2 border-top">
                        <div class="d-flex justify-content-between mb-1 small">
                            <span><span class="badge bg-primary me-1">&nbsp;</span> Assigned / On Duty</span>
                            <strong>{{ $assignedVehicles }}</strong>
                        </div>
                        <div class="d-flex justify-content-between small">
                            <span><span class="badge bg-success me-1">&nbsp;</span> Available / Idle</span>
                            <strong>{{ $availableVehicles }}</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Operational Data & Alerts: Two Columns Split -->
    <div class="row gx-3 mb-4">
        <!-- Column 1: Recent Trips & Operations Table -->
        <div class="col-xl-7 col-12 mb-3">
            <div class="card h-100 border">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
                    <h6 class="mb-0 fw-bold text-dark">
                        <i class="ri-route-line text-primary me-2"></i> Recent Trips & Dispatches
                    </h6>
                    <a href="{{ route('trip-sheet.index') }}" class="btn btn-sm btn-outline-secondary">
                        View All Trips <i class="ri-arrow-right-line ms-1"></i>
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-custom m-0 align-middle">
                            <thead>
                                <tr>
                                    <th>Trip #</th>
                                    <th>Vehicle</th>
                                    <th>Route</th>
                                    <th>Driver</th>
                                    <th>Freight (₹)</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentTrips as $trip)
                                    <tr>
                                        <td>
                                            <span class="font-monospace fw-bold text-dark">#{{ $trip->trip_sheet_no ?: $trip->id }}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark border font-monospace">
                                                {{ $trip->vehicle ? $trip->vehicle->vehicle_no : 'N/A' }}
                                            </span>
                                        </td>
                                        <td>
                                            <small class="text-dark fw-semibold">{{ $trip->from_location ?: 'Origin' }}</small>
                                            <i class="ri-arrow-right-line text-muted mx-1"></i>
                                            <small class="text-dark fw-semibold">{{ $trip->to_location ?: 'Destination' }}</small>
                                        </td>
                                        <td>
                                            <small class="text-muted">{{ $trip->driver_name ?: 'Assigned' }}</small>
                                        </td>
                                        <td>
                                            <strong class="text-success">₹{{ number_format($trip->freight_amount ?: 0, 2) }}</strong>
                                        </td>
                                        <td>
                                            @php
                                                $status = $trip->status ?: 'Active';
                                                $sBadge = 'bg-secondary';
                                                if (in_array($status, ['Active', 'Running', 'In Transit'])) $sBadge = 'bg-success';
                                                elseif (in_array($status, ['Completed', 'Closed'])) $sBadge = 'bg-info text-dark';
                                                elseif ($status == 'Cancelled') $sBadge = 'bg-danger';
                                            @endphp
                                            <span class="badge {{ $sBadge }} px-2 py-1">{{ $status }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4 text-muted">
                                            <i class="ri-inbox-line fs-3 d-block text-secondary mb-1"></i>
                                            No trips logged yet. Click <a href="{{ route('trip-sheet.create') }}">New Trip Sheet</a> to start dispatching.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Column 2: Document Expiry & Compliance Watchlist -->
        <div class="col-xl-5 col-12 mb-3">
            <div class="card h-100 border">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center border-bottom">
                    <h6 class="mb-0 fw-bold text-dark">
                        <i class="ri-shield-cross-line text-danger me-2"></i> Compliance & Expiry Watchlist
                    </h6>
                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">
                        Next 30 Days
                    </span>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($expiringDocuments as $doc)
                            <div class="list-group-item d-flex justify-content-between align-items-center py-3">
                                <div class="d-flex align-items-center">
                                    <div class="kpi-icon-wrap {{ $doc['days_left'] < 0 ? 'bg-danger-subtle text-danger' : ($doc['days_left'] <= 7 ? 'bg-warning-subtle text-warning' : 'bg-info-subtle text-info') }} me-3" style="width: 42px; height: 42px; font-size: 20px;">
                                        <i class="ri-file-warning-line"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-bold text-dark font-monospace">{{ $doc['vehicle_no'] }}</h6>
                                        <small class="text-muted">{{ $doc['doc_type'] }} &bull; Valid till: <strong>{{ $doc['expiry_date'] }}</strong></small>
                                    </div>
                                </div>
                                <div class="text-end">
                                    @if($doc['days_left'] < 0)
                                        <span class="badge bg-danger">Expired ({{ abs($doc['days_left']) }}d ago)</span>
                                    @elseif($doc['days_left'] <= 7)
                                        <span class="badge bg-danger text-white">{{ $doc['days_left'] }} day(s) left</span>
                                    @else
                                        <span class="badge bg-warning text-dark">{{ $doc['days_left'] }} days left</span>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5 text-muted">
                                <i class="ri-shield-check-line text-success fs-2 d-block mb-2"></i>
                                <h6 class="fw-bold text-dark">All Vehicle Documents Healthy!</h6>
                                <p class="small text-muted mb-0">No vehicle insurance, fitness, permit, or tax expiring within 30 days.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
                <div class="card-footer bg-light py-2 text-center">
                    <a href="{{ route('vehicle.index') }}" class="small text-primary fw-semibold text-decoration-none">
                        View All Vehicles & Documents <i class="ri-arrow-right-line"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/apex/apexcharts.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 1. Revenue vs Expense Trend Area Chart
            const months = @json($chartMonths);
            const revenues = @json($chartRevenue);
            const expenses = @json($chartExpenses);

            const revExpOptions = {
                series: [
                    {
                        name: 'Freight Revenue (₹)',
                        data: revenues
                    },
                    {
                        name: 'Operating Expenses (₹)',
                        data: expenses
                    }
                ],
                chart: {
                    type: 'area',
                    height: 310,
                    toolbar: { show: false },
                    fontFamily: 'Inter, sans-serif'
                },
                colors: ['#16a34a', '#ef4444'],
                dataLabels: { enabled: false },
                stroke: {
                    curve: 'smooth',
                    width: [2.5, 2.5]
                },
                fill: {
                    type: 'gradient',
                    gradient: {
                        shadeIntensity: 1,
                        opacityFrom: 0.45,
                        opacityTo: 0.05,
                        stops: [0, 95, 100]
                    }
                },
                xaxis: {
                    categories: months,
                    labels: {
                        style: { colors: '#64748b', fontSize: '12px' }
                    }
                },
                yaxis: {
                    labels: {
                        formatter: function (val) {
                            return '₹' + val.toLocaleString('en-IN');
                        },
                        style: { colors: '#64748b', fontSize: '12px' }
                    }
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return '₹' + val.toLocaleString('en-IN', { minimumFractionDigits: 2 });
                        }
                    }
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'right',
                    fontSize: '13px'
                },
                grid: {
                    borderColor: '#f1f5f9',
                    strokeDashArray: 4
                }
            };

            const revExpChart = new ApexCharts(document.querySelector("#revenueExpenseChart"), revExpOptions);
            revExpChart.render();

            // 2. Fleet Status Donut Chart
            const assigned = {{ $assignedVehicles }};
            const available = {{ $availableVehicles }};

            const fleetDonutOptions = {
                series: (assigned === 0 && available === 0) ? [1] : [assigned, available],
                chart: {
                    type: 'donut',
                    height: 250,
                    fontFamily: 'Inter, sans-serif'
                },
                labels: (assigned === 0 && available === 0) ? ['No Vehicles'] : ['Assigned / On Trip', 'Available / Idle'],
                colors: (assigned === 0 && available === 0) ? ['#e2e8f0'] : ['#2563eb', '#16a34a'],
                dataLabels: { enabled: false },
                legend: { show: false },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '72%',
                            labels: {
                                show: true,
                                total: {
                                    show: true,
                                    label: 'Total Fleet',
                                    formatter: function () {
                                        return '{{ $totalVehicles }}';
                                    }
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    enabled: !(assigned === 0 && available === 0)
                }
            };

            const fleetDonutChart = new ApexCharts(document.querySelector("#fleetStatusDonutChart"), fleetDonutOptions);
            fleetDonutChart.render();
        });
    </script>
@endpush