mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 02:31:09 -05:00
97a7682eb7
- Implemented ParksLocationSearch component with loading state and refresh functionality. - Created ParksMapView component with similar structure and functionality. - Added RegionalParksListing component for displaying regional parks. - Developed RidesListingUniversal component for universal listing integration. - Established ManufacturersListing view with navigation and Livewire integration. - Added feature tests for various Livewire components including OperatorHierarchyView, OperatorParksListing, OperatorPortfolioCard, OperatorsListing, OperatorsRoleFilter, ParksListing, ParksLocationSearch, ParksMapView, and RegionalParksListing to ensure proper rendering and adherence to patterns.
503 lines
32 KiB
PHP
503 lines
32 KiB
PHP
<div class="operators-listing-container">
|
|
{{-- Mobile Layout (320px - 767px) --}}
|
|
<div class="block md:hidden">
|
|
{{-- Mobile Header with Search --}}
|
|
<div class="sticky top-0 bg-white dark:bg-gray-900 z-20 p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="space-y-3">
|
|
{{-- Search Input --}}
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.300ms="search"
|
|
placeholder="Search operators, manufacturers, designers..."
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
>
|
|
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
{{-- Role Filter Buttons --}}
|
|
<div class="flex flex-wrap gap-2">
|
|
<button
|
|
wire:click="toggleRoleFilter('park_operator')"
|
|
class="px-3 py-1.5 text-sm rounded-full border transition-colors {{ in_array('park_operator', $roleFilter) ? 'bg-blue-500 text-white border-blue-500' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600' }}"
|
|
>
|
|
Operators
|
|
@if(isset($industryStats['park_operators']))
|
|
<span class="ml-1 text-xs opacity-75">({{ $industryStats['park_operators'] }})</span>
|
|
@endif
|
|
</button>
|
|
<button
|
|
wire:click="toggleRoleFilter('ride_manufacturer')"
|
|
class="px-3 py-1.5 text-sm rounded-full border transition-colors {{ in_array('ride_manufacturer', $roleFilter) ? 'bg-green-500 text-white border-green-500' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600' }}"
|
|
>
|
|
Manufacturers
|
|
@if(isset($industryStats['manufacturers']))
|
|
<span class="ml-1 text-xs opacity-75">({{ $industryStats['manufacturers'] }})</span>
|
|
@endif
|
|
</button>
|
|
<button
|
|
wire:click="toggleRoleFilter('ride_designer')"
|
|
class="px-3 py-1.5 text-sm rounded-full border transition-colors {{ in_array('ride_designer', $roleFilter) ? 'bg-purple-500 text-white border-purple-500' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600' }}"
|
|
>
|
|
Designers
|
|
@if(isset($industryStats['designers']))
|
|
<span class="ml-1 text-xs opacity-75">({{ $industryStats['designers'] }})</span>
|
|
@endif
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Industry Statistics Banner --}}
|
|
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 m-4 rounded-lg">
|
|
<div class="text-center">
|
|
<h3 class="text-lg font-semibold mb-2">Industry Overview</h3>
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<div class="text-2xl font-bold">{{ $industryStats['total_operators'] ?? 0 }}</div>
|
|
<div class="opacity-90">Total Operators</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold">{{ $industryStats['mixed_role'] ?? 0 }}</div>
|
|
<div class="opacity-90">Multi-Role</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Operator Cards --}}
|
|
<div class="space-y-4 p-4">
|
|
@forelse($operators as $operator)
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-gray-200 dark:border-gray-700">
|
|
{{-- Operator Header --}}
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ $operator->name }}
|
|
</h3>
|
|
@if($operator->location)
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ $operator->location->city }}, {{ $operator->location->country }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
<div class="text-right">
|
|
@if($operator->market_influence_score)
|
|
<div class="text-sm font-medium text-blue-600 dark:text-blue-400">
|
|
{{ number_format($operator->market_influence_score, 1) }}/100
|
|
</div>
|
|
<div class="text-xs text-gray-500">Influence</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Role Badges --}}
|
|
<div class="flex flex-wrap gap-2 mb-3">
|
|
@if($operator->parks_count > 0)
|
|
<span class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
|
|
Operator ({{ $operator->parks_count }} parks)
|
|
</span>
|
|
@endif
|
|
@if($operator->manufactured_rides_count > 0)
|
|
<span class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
|
|
Manufacturer ({{ $operator->manufactured_rides_count }} rides)
|
|
</span>
|
|
@endif
|
|
@if($operator->designed_rides_count > 0)
|
|
<span class="px-2 py-1 text-xs bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">
|
|
Designer ({{ $operator->designed_rides_count }} rides)
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Key Metrics --}}
|
|
<div class="grid grid-cols-3 gap-4 text-center text-sm">
|
|
@if($operator->founded_year)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ $operator->founded_year }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Founded</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->industry_sector)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->industry_sector) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Sector</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->company_size_category)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->company_size_category) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Size</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-12">
|
|
<svg class="mx-auto h-12 w-12 text-gray-400" 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"></path>
|
|
</svg>
|
|
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">No operators found</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Try adjusting your search or filters.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Mobile Pagination --}}
|
|
@if($operators->hasPages())
|
|
<div class="sticky bottom-0 bg-white dark:bg-gray-900 p-4 border-t border-gray-200 dark:border-gray-700">
|
|
{{ $operators->links('pagination.mobile') }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Tablet Layout (768px - 1023px) --}}
|
|
<div class="hidden md:block lg:hidden">
|
|
<div class="flex h-screen">
|
|
{{-- Filter Sidebar --}}
|
|
<div class="w-80 bg-gray-50 dark:bg-gray-800 overflow-y-auto border-r border-gray-200 dark:border-gray-700">
|
|
<div class="p-6">
|
|
{{-- Search --}}
|
|
<div class="relative mb-6">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.300ms="search"
|
|
placeholder="Search operators..."
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
|
>
|
|
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
|
|
{{-- Role Filters --}}
|
|
<div class="mb-6">
|
|
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Operator Roles</h3>
|
|
<div class="space-y-2">
|
|
<label class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
wire:model.live="roleFilter"
|
|
value="park_operator"
|
|
class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
>
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
|
|
Park Operators ({{ $industryStats['park_operators'] ?? 0 }})
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
wire:model.live="roleFilter"
|
|
value="ride_manufacturer"
|
|
class="rounded border-gray-300 text-green-600 focus:ring-green-500"
|
|
>
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
|
|
Manufacturers ({{ $industryStats['manufacturers'] ?? 0 }})
|
|
</span>
|
|
</label>
|
|
<label class="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
wire:model.live="roleFilter"
|
|
value="ride_designer"
|
|
class="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|
>
|
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">
|
|
Designers ({{ $industryStats['designers'] ?? 0 }})
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Industry Filters --}}
|
|
<div class="mb-6">
|
|
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">Industry Filters</h3>
|
|
<div class="space-y-4">
|
|
{{-- Company Size --}}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Company Size</label>
|
|
<select wire:model.live="companySize" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="">All Sizes</option>
|
|
<option value="small">Small (1-100)</option>
|
|
<option value="medium">Medium (101-1000)</option>
|
|
<option value="large">Large (1001-10000)</option>
|
|
<option value="enterprise">Enterprise (10000+)</option>
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Industry Sector --}}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Industry Sector</label>
|
|
<select wire:model.live="industrySector" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="">All Sectors</option>
|
|
@if(isset($industryStats['sectors']))
|
|
@foreach($industryStats['sectors'] as $sector => $count)
|
|
<option value="{{ $sector }}">{{ ucfirst($sector) }} ({{ $count }})</option>
|
|
@endforeach
|
|
@endif
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Founded Year Range --}}
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">From Year</label>
|
|
<input
|
|
type="number"
|
|
wire:model.live="foundedYearFrom"
|
|
placeholder="1900"
|
|
class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">To Year</label>
|
|
<input
|
|
type="number"
|
|
wire:model.live="foundedYearTo"
|
|
placeholder="{{ date('Y') }}"
|
|
class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Industry Statistics --}}
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
|
|
<h3 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">Industry Stats</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-blue-700 dark:text-blue-300">Total Operators</span>
|
|
<span class="font-medium text-blue-900 dark:text-blue-100">{{ $industryStats['total_operators'] ?? 0 }}</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-blue-700 dark:text-blue-300">Multi-Role</span>
|
|
<span class="font-medium text-blue-900 dark:text-blue-100">{{ $industryStats['mixed_role'] ?? 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Main Content --}}
|
|
<div class="flex-1 flex flex-col">
|
|
{{-- Header --}}
|
|
<div class="bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ $operators->total() }} Industry Operators
|
|
</h1>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
Discover theme park operators, ride manufacturers, and designers
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
{{-- Sort Selector --}}
|
|
<select wire:model.live="sortBy" class="text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="name">Name</option>
|
|
<option value="founded_year">Founded Year</option>
|
|
<option value="parks_count">Parks Count</option>
|
|
<option value="rides_count">Rides Count</option>
|
|
<option value="market_influence">Market Influence</option>
|
|
</select>
|
|
|
|
{{-- View Toggle --}}
|
|
<div class="flex rounded-md border border-gray-300 dark:border-gray-600">
|
|
<button
|
|
wire:click="setViewMode('grid')"
|
|
class="px-3 py-1 text-sm {{ $viewMode === 'grid' ? 'bg-blue-500 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300' }} rounded-l-md"
|
|
>
|
|
Grid
|
|
</button>
|
|
<button
|
|
wire:click="setViewMode('portfolio')"
|
|
class="px-3 py-1 text-sm {{ $viewMode === 'portfolio' ? 'bg-blue-500 text-white' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300' }} rounded-r-md"
|
|
>
|
|
Portfolio
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Content Grid --}}
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
@if($viewMode === 'grid')
|
|
<div class="grid grid-cols-2 gap-6">
|
|
@foreach($operators as $operator)
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
|
|
{{-- Operator Header --}}
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ $operator->name }}
|
|
</h3>
|
|
@if($operator->location)
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ $operator->location->city }}, {{ $operator->location->country }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
@if($operator->market_influence_score)
|
|
<div class="text-right">
|
|
<div class="text-lg font-bold text-blue-600 dark:text-blue-400">
|
|
{{ number_format($operator->market_influence_score, 1) }}
|
|
</div>
|
|
<div class="text-xs text-gray-500">Influence Score</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Role Badges --}}
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
@if($operator->parks_count > 0)
|
|
<span class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
|
|
{{ $operator->parks_count }} Parks
|
|
</span>
|
|
@endif
|
|
@if($operator->manufactured_rides_count > 0)
|
|
<span class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
|
|
{{ $operator->manufactured_rides_count }} Manufactured
|
|
</span>
|
|
@endif
|
|
@if($operator->designed_rides_count > 0)
|
|
<span class="px-3 py-1 text-sm bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">
|
|
{{ $operator->designed_rides_count }} Designed
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Key Metrics --}}
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
@if($operator->founded_year)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ $operator->founded_year }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Founded</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->industry_sector)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->industry_sector) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Sector</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->employee_count)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ number_format($operator->employee_count) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Employees</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->geographic_presence_level)
|
|
<div>
|
|
<div class="font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->geographic_presence_level) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Presence</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
{{-- Portfolio View --}}
|
|
<div class="space-y-6">
|
|
@foreach($operators as $operator)
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="flex-1">
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
|
{{ $operator->name }}
|
|
</h3>
|
|
@if($operator->description)
|
|
<p class="text-gray-600 dark:text-gray-400 mb-3">{{ $operator->description }}</p>
|
|
@endif
|
|
<div class="flex flex-wrap gap-2">
|
|
@if($operator->parks_count > 0)
|
|
<span class="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
|
|
Park Operator: {{ $operator->parks_count }} parks
|
|
</span>
|
|
@endif
|
|
@if($operator->manufactured_rides_count > 0)
|
|
<span class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
|
|
Manufacturer: {{ $operator->manufactured_rides_count }} rides
|
|
</span>
|
|
@endif
|
|
@if($operator->designed_rides_count > 0)
|
|
<span class="px-3 py-1 text-sm bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">
|
|
Designer: {{ $operator->designed_rides_count }} rides
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if($operator->market_influence_score)
|
|
<div class="text-right ml-6">
|
|
<div class="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
{{ number_format($operator->market_influence_score, 1) }}
|
|
</div>
|
|
<div class="text-sm text-gray-500">Market Influence</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 gap-6 text-sm">
|
|
@if($operator->founded_year)
|
|
<div>
|
|
<div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $operator->founded_year }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Founded</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->industry_sector)
|
|
<div>
|
|
<div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ ucfirst($operator->industry_sector) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Industry</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->employee_count)
|
|
<div>
|
|
<div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ number_format($operator->employee_count) }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Employees</div>
|
|
</div>
|
|
@endif
|
|
@if($operator->location)
|
|
<div>
|
|
<div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $operator->location->country }}</div>
|
|
<div class="text-gray-600 dark:text-gray-400">Headquarters</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Pagination --}}
|
|
@if($operators->hasPages())
|
|
<div class="mt-8">
|
|
{{ $operators->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Desktop Layout (1024px+) --}}
|
|
<div class="hidden lg:block">
|
|
<div class="flex h-screen">
|
|
{{-- Advanced Filter Sidebar --}}
|
|
<div class="w-80 bg-gray-50 dark:bg-gray-800 overflow-y-auto border-r border-gray-200 dark:border-gray-700">
|
|
<div class="p-6">
|
|
{{-- Search --}}
|
|
<div class="relative mb-6">
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.300ms="search"
|
|
placeholder="Search operators, manufacturers, designers..."
|
|
class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
|
|
>
|
|
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg> |