@extends('layouts.themed-app')

@section('title', 'Dashboard')
@section('subtitle', "Welcome back! Here's your fleet overview.")

@section('content')
    @php
        $company = auth()->user()->company;
        $truckCount = count($company->trucks ?? []);
        $driverCount = count($company->drivers ?? []);
        $activeLoads = $totals['load_count'] ?? 0;
        $netProfit = $totals['net_profit'] ?? 0;
    @endphp

    @if(!auth()->user()->company)
        <!-- Company Not Setup Alert -->
        <div style="background: #DBEAFE; border-left: 4px solid #3B82F6; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 2rem;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <p style="font-weight: 700; color: #0C2340; margin: 0 0 0.5rem 0;">Company Setup Required</p>
                    <p style="color: #0C2340; margin: 0; font-size: 0.875rem;">Complete your company setup to start managing your fleet and drivers.</p>
                </div>
                <a href="{{route('owner.companies.create')}}" style="background-color: #3B82F6; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; white-space: nowrap; margin-left: 1rem;">
                    Setup Company
                </a>
            </div>
        </div>
    @else
        <!-- Financial Overview Cards -->
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
            <!-- Total Revenue Card -->
            <div style="background: linear-gradient(135deg, #ECFEFF 0%, #F8FAFC 100%); border: 1px solid #A5F3FC; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                    <h3 style="color: #0F766E; font-size: 0.875rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">Total Revenue</h3>
                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #0891B2 0%, #22C55E 100%); border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 20px rgba(8, 145, 178, 0.22);">
                        $
                    </div>
                </div>
                <p style="font-size: 2rem; font-weight: 700; color: #0F172A; margin: 0 0 0.5rem 0;">
                    ${{ number_format($totals['revenue'] ?? 0, 2) }}
                </p>
                <p style="color: #0F766E; font-size: 0.875rem; margin: 0;">
                    Gross load revenue booked to date.
                </p>
            </div>

            <!-- Active Loads Card -->
            <div style="background: linear-gradient(135deg, #ECFDF5 0%, #F8FAFC 100%); border: 1px solid #A7F3D0; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                    <h3 style="color: #047857; font-size: 0.875rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">Loads</h3>
                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #10B981 0%, #14B8A6 100%); border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.22);">
                        📦
                    </div>
                </div>
                <p style="font-size: 2rem; font-weight: 700; color: #0F172A; margin: 0 0 0.5rem 0;">
                    {{ $activeLoads }}
                </p>
                <p style="color: #047857; font-size: 0.875rem; margin: 0;">
                    Total loads currently tracked in the system.
                </p>
            </div>

            <!-- Fleet Size Card -->
            <div style="background: linear-gradient(135deg, #FFF7ED 0%, #F8FAFC 100%); border: 1px solid #FED7AA; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                    <h3 style="color: #C2410C; font-size: 0.875rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">Fleet Size</h3>
                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.22);">
                        🚚
                    </div>
                </div>
                <p style="font-size: 2rem; font-weight: 700; color: #0F172A; margin: 0 0 0.5rem 0;">
                    {{ $truckCount }}
                </p>
                <p style="color: #C2410C; font-size: 0.875rem; margin: 0;">
                    Total trucks assigned to your company.
                </p>
            </div>

            <!-- Team Members Card -->
            <div style="background: linear-gradient(135deg, #F5F3FF 0%, #FDF4FF 100%); border: 1px solid #DDD6FE; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
                    <h3 style="color: #7C3AED; font-size: 0.875rem; font-weight: 700; margin: 0; text-transform: uppercase; letter-spacing: 0.5px;">Drivers</h3>
                    <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #8B5CF6 0%, #D946EF 100%); border-radius: 0.85rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: 0 10px 20px rgba(139, 92, 246, 0.22);">
                        👥
                    </div>
                </div>
                <p style="font-size: 2rem; font-weight: 700; color: #0F172A; margin: 0 0 0.5rem 0;">
                    {{ $driverCount }}
                </p>
                <p style="color: #7C3AED; font-size: 0.875rem; margin: 0;">
                    Drivers currently linked to your fleet.
                </p>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem;">
            <!-- Recent Loads Table -->
            <div style="background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%); border: 1px solid #E2E8F0; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                <div style="padding: 1.5rem; border-bottom: 1px solid #E2E8F0; background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%);">
                    <h2 style="color: #1F2937; font-size: 1.125rem; font-weight: 700; margin: 0 0 0.3rem 0;">Recent Loads</h2>
                    <p style="color: #64748B; font-size: 0.875rem; margin: 0;">A quick look at your most recent load activity and profit.</p>
                </div>
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="border-bottom: 1px solid #E2E8F0; background: #F8FAFC;">
                                <th style="padding: 1rem 1.5rem; text-align: left; font-weight: 700; color: #64748B; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;">Load #</th>
                                <th style="padding: 1rem 1.5rem; text-align: left; font-weight: 700; color: #64748B; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;">Route</th>
                                <th style="padding: 1rem 1.5rem; text-align: left; font-weight: 700; color: #64748B; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;">Profit</th>
                                <th style="padding: 1rem 1.5rem; text-align: left; font-weight: 700; color: #64748B; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_loads as $load)
                                <tr style="border-bottom: 1px solid #E2E8F0; transition: background-color 0.2s ease;">
                                    <td style="padding: 1rem 1.5rem; font-weight: 700; color: #0F3D7A;">{{ $load->load_number ?? '#' . $load->id }}</td>
                                    <td style="padding: 1rem 1.5rem; color: #334155; font-weight: 500;">
                                        {{ $load->pickup_location ?? 'N/A' }} → {{ $load->delivery_location ?? 'N/A' }}
                                    </td>
                                    <td style="padding: 1rem 1.5rem;">
                                        <span style="display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid #A7F3D0; background: #ECFDF5; color: #047857; font-weight: 700;">+${{ number_format($load->net_profit ?? 0, 2) }}</span>
                                    </td>
                                    <td style="padding: 1rem 1.5rem;">
                                        <span style="display: inline-block; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; border: 1px solid transparent;
                                            @switch($load->status)
                                                @case('completed')
                                                    background-color: #DCFCE7; color: #166534; border-color: #86EFAC;
                                                    @break
                                                @case('processing')
                                                    background-color: #FEF3C7; color: #92400E; border-color: #FCD34D;
                                                    @break
                                                @case('pending')
                                                    background-color: #E0E7FF; color: #3730A3; border-color: #A5B4FC;
                                                    @break
                                                @default
                                                    background-color: #F1F5F9; color: #475569; border-color: #CBD5E1;
                                            @endswitch
                                        ">{{ ucfirst($load->status ?? 'pending') }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" style="padding: 2.5rem; text-align: center; color: #64748B; background: #FAFCFF;">
                                        No loads yet. <a href="{{ route('documents.create') }}" style="color: #0F3D7A; font-weight: 700;">Upload your first load</a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Quick Actions -->
            <div>
                <div style="background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%); border: 1px solid #BFDBFE; border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                    <h3 style="color: #0F172A; font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem 0;">Quick Actions</h3>
                    <p style="color: #475569; font-size: 0.875rem; margin: 0 0 1rem 0;">Jump into the next task for your fleet.</p>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                        <a href="{{ route('documents.create') }}" class="portal-secondary-btn" style="width: 100%;">
                            + Upload Load
                        </a>
                        @if(auth()->user()->role === 'owner')
                            <a href="/owner/trucks" class="portal-primary-btn" style="width: 100%;">
                                + Add Truck
                            </a>
                            <a href="/owner/drivers" class="portal-primary-btn" style="width: 100%;">
                                + Add Driver
                            </a>
                        @endif
                    </div>
                </div>

                <!-- Company Info -->
                <div style="background: linear-gradient(135deg, #FAF5FF 0%, #F8FAFC 100%); border: 1px solid #DDD6FE; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);">
                    <h3 style="color: #1F2937; font-size: 1rem; font-weight: 700; margin: 0 0 1rem 0;">Company</h3>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem;">
                        <div style="padding: 0.9rem 1rem; border: 1px solid #E9D5FF; border-radius: 0.85rem; background: rgba(255,255,255,0.75);">
                            <p style="color: #6B21A8; margin: 0 0 0.25rem 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;">Company Name</p>
                            <p style="color: #1F2937; margin: 0; font-weight: 700;">{{ auth()->user()->company->name ?? 'N/A' }}</p>
                        </div>
                        <div style="padding: 0.9rem 1rem; border: 1px solid #E9D5FF; border-radius: 0.85rem; background: rgba(255,255,255,0.75);">
                            <p style="color: #6B7280; margin: 0 0 0.25rem 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;">MC Number</p>
                            <p style="color: #1F2937; margin: 0; font-weight: 600;">{{ auth()->user()->company->mc_number ?? 'N/A' }}</p>
                        </div>
                        <div style="padding: 0.9rem 1rem; border: 1px solid #E9D5FF; border-radius: 0.85rem; background: rgba(255,255,255,0.75);">
                            <p style="color: #6B7280; margin: 0 0 0.25rem 0; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;">DOT Number</p>
                            <p style="color: #1F2937; margin: 0; font-weight: 600;">{{ auth()->user()->company->dot_number ?? 'N/A' }}</p>
                        </div>
                        <a href="/owner/companies/edit" style="color: #6D28D9; text-decoration: none; font-weight: 700; margin-top: 0.5rem; display: inline-block;">
                            Edit Company →
                        </a>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection