@extends('backend.app')

@push('style')
    <link rel="stylesheet" href="{{ asset('backend/assets/css/analytics.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* Page specific styles only */
        .company-location {
            font-size: 0.875rem;
            color: #718096;
        }
    </style>
@endpush

@section('title', 'Company Analytics')

@section('content')
<div class="app-content content">
    <div class="content-wrapper">
        <!-- Modern Header -->
        <div class="analytics-header">
            <div class="row align-items-center">
                <div class="col-md-12">
                    <h1 class="analytics-title">
                        <i class="fa-solid fa-chart-line me-2"></i>
                        Company Analytics Dashboard
                    </h1>
                    <p class="analytics-subtitle mb-0">Monitor and analyze company performance across your platform</p>

                    <!-- Modern Breadcrumb -->
                    @include('backend.partials.breadcrumb', ['items' => [
                        ['url' => route('dashboard'), 'title' => 'Dashboard', 'icon' => 'fa-solid fa-home'],
                        ['title' => 'Company Analytics', 'icon' => 'fa-solid fa-chart-line']
                    ]])
                </div>
            </div>
        </div>

        <div class="content-body">
            <!-- Date Range Filter -->
            <div class="filter-section">
                <form method="GET" action="{{ route('companies.analytics') }}">
                    <div class="row align-items-center g-3">
                        <div class="col-md-3">
                            <label class="form-label">
                                <i class="fa-solid fa-calendar-days me-2 text-primary"></i>Date Range
                            </label>
                            <select name="range" class="form-select">
                                <option value="7" {{ $dateRange == '7' ? 'selected' : '' }}>📅 Last 7 Days</option>
                                <option value="14" {{ $dateRange == '14' ? 'selected' : '' }}>📅 Last 14 Days</option>
                                <option value="30" {{ $dateRange == '30' ? 'selected' : '' }}>📅 Last 30 Days</option>
                                <option value="90" {{ $dateRange == '90' ? 'selected' : '' }}>📅 Last 90 Days</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-filter w-100">
                                <i class="fa-solid fa-filter me-2"></i>Apply Filter
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Stats Overview -->
            <div class="stats-overview mb-4">
                <div class="stat-card" style="--stat-color: #667eea; --stat-bg: rgba(102, 126, 234, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-building"></i>
                    </div>
                    <div class="stat-label">Total Companies</div>
                    <div class="stat-value">{{ $companies->total() ?? 0 }}</div>
                    <div class="stat-change positive">
                        <i class="fa-solid fa-arrow-trend-up"></i>
                        <span>Active Businesses</span>
                    </div>
                </div>

                <div class="stat-card" style="--stat-color: #48bb78; --stat-bg: rgba(72, 187, 120, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-calendar-check"></i>
                    </div>
                    <div class="stat-label">Total Bookings</div>
                    <div class="stat-value">{{ $totalBookings ?? 0 }}</div>
                    <div class="stat-change positive">
                        <i class="fa-solid fa-check-circle"></i>
                        <span>In Selected Period</span>
                    </div>
                </div>

                <div class="stat-card" style="--stat-color: #ed8936; --stat-bg: rgba(237, 137, 54, 0.1);">
                    <div class="stat-icon">
                        <i class="fa-solid fa-chart-bar"></i>
                    </div>
                    <div class="stat-label">Avg per Company</div>
                    <div class="stat-value">{{ $companies->total() > 0 ? round($totalBookings / $companies->total()) : 0 }}</div>
                    <div class="stat-change">
                        <i class="fa-solid fa-calculator"></i>
                        <span>Bookings/Company</span>
                    </div>
                </div>
            </div>

            <!-- Companies Table -->
            <div class="companies-table-card">
                <div class="table-header-custom">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1"><i class="fa-solid fa-building me-2 text-primary"></i>Top Performing Companies</h5>
                            <small class="text-muted">Companies ranked by total bookings in the selected period</small>
                        </div>
                        <span class="badge bg-primary badge-custom">{{ $companies->total() }} Companies</span>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-custom">
                        <thead>
                            <tr>
                                <th width="5%">#</th>
                                <th width="35%">Company Name</th>
                                <th width="20%">City</th>
                                <th width="15%" class="text-center">Bookings</th>
                                <th width="25%" class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($companies as $index => $company)
                            <tr>
                                <td>
                                    <span class="badge bg-light text-dark">{{ $index + 1 }}</span>
                                </td>
                                <td>
                                    <div class="company-name">{{ $company->name }}</div>
                                    @if($company->categories && is_array($company->categories))
                                        <div class="mt-1">
                                            @foreach(array_slice($company->categories, 0, 2) as $category)
                                                <span class="badge bg-light text-primary me-1" style="font-size: 0.75rem;">{{ $category }}</span>
                                            @endforeach
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <span class="company-location">
                                        <i class="fa-solid fa-location-dot me-1"></i>{{ $company->city ?? 'N/A' }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-primary badge-custom fs-6">
                                        <i class="fa-solid fa-calendar-check me-1"></i>{{ $company->bookings_count }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <a href="{{ route('companies.show-analytics', $company) }}?days={{ $dateRange }}"
                                       class="btn btn-view-analytics">
                                        <i class="fa-solid fa-chart-bar me-1"></i> View Details
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5">
                                    <div class="empty-state">
                                        <i class="fa-solid fa-building-circle-xmark empty-state-icon"></i>
                                        <p class="empty-state-text">No companies found for the selected period.</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($companies->hasPages())
                <div class="p-3 border-top">
                    {{ $companies->appends(['range' => $dateRange])->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection