@extends('layouts.app')

@section('title', 'System Sizer II - Systems')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">Water Treatment Systems</h1>
        <p class="text-gray-600 mt-2">Available HydroTech systems catalog.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($systems as $system)
            <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition">
                <div class="p-5">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-lg font-bold text-gray-800">{{ $system->name }}</h3>
                        <span class="text-xs px-2 py-1 rounded
                            {{ $system->type === 'softener' ? 'bg-blue-100 text-blue-800' :
                               ($system->type === 'softener_carbon_combo' ? 'bg-purple-100 text-purple-800' : 'bg-orange-100 text-orange-800') }}">
                            {{ str_replace('_', ' ', ucfirst($system->type)) }}
                        </span>
                    </div>
                    <p class="text-xs text-gray-500 mb-3">{{ $system->system_id }}</p>
                    <p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ $system->description }}</p>

                    <div class="grid grid-cols-2 gap-2 text-sm mb-4">
                        <div class="bg-gray-50 rounded p-2">
                            <span class="text-gray-500 text-xs">Tanks:</span>
                            <div class="font-medium">{{ $system->getTankDescription() }}</div>
                        </div>
                        <div class="bg-gray-50 rounded p-2">
                            <span class="text-gray-500 text-xs">Media:</span>
                            <div class="font-medium text-xs">{{ $system->media_type }}</div>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-1 mb-4">
                        @if($system->treats_hardness)
                            <span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">Hardness</span>
                        @endif
                        @if($system->treats_chlorine)
                            <span class="text-xs bg-cyan-100 text-cyan-700 px-2 py-0.5 rounded">Chlorine</span>
                        @endif
                        @if($system->treats_iron)
                            <span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded">Iron</span>
                        @endif
                        @if($system->treats_tannin)
                            <span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded">Tannin</span>
                        @endif
                        @if($system->treats_pfoas)
                            <span class="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded">PFOAs</span>
                        @endif
                        @if($system->treats_glyphosate)
                            <span class="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded">Glyphosate</span>
                        @endif
                        @if($system->treats_ammonia)
                            <span class="text-xs bg-pink-100 text-pink-700 px-2 py-0.5 rounded">Ammonia</span>
                        @endif
                    </div>

                    <a href="{{ route('admin.system-sizer.systems.show', $system) }}" class="block text-center bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition text-sm">
                        View Details
                    </a>
                </div>
            </div>
        @empty
            <div class="col-span-3 bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center">
                <p class="text-yellow-800">No water treatment systems configured.</p>
                <p class="text-sm text-yellow-600 mt-2">Run the WaterSystemSeeder to populate the catalog.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection