@extends('layouts.app')

@section('title', 'System Sizer II - ' . $system->name)

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="{{ route('admin.system-sizer.systems') }}" class="text-blue-600 hover:underline text-sm">&larr; Back to Systems</a>
    </div>

    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <div class="bg-blue-600 text-white px-6 py-4">
            <h1 class="text-2xl font-bold">{{ $system->name }}</h1>
            <p class="text-blue-200 text-sm">{{ $system->system_id }} | {{ str_replace('_', ' ', ucfirst($system->type)) }}</p>
        </div>

        <div class="p-6">
            <p class="text-gray-700 mb-6">{{ $system->description }}</p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Tank & Media --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Tank & Media</h2>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Tank 1:</dt>
                            <dd class="font-medium">{{ $system->tank_1_size ?: 'N/A' }}</dd>
                        </div>
                        @if($system->tank_2_size)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Tank 2:</dt>
                                <dd class="font-medium">{{ $system->tank_2_size }}</dd>
                            </div>
                        @endif
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Media Type:</dt>
                            <dd class="font-medium text-right">{{ $system->media_type }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Regeneration:</dt>
                            <dd class="font-medium capitalize">{{ $system->regeneration_type }}</dd>
                        </div>
                    </dl>
                </div>

                {{-- Flow Rates --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Flow Rates</h2>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Service Flow (15 psi):</dt>
                            <dd class="font-medium">{{ $system->flow_rate_15psi_gpm }} GPM</dd>
                        </div>
                        @if($system->flow_rate_25psi_gpm > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Service Flow (25 psi):</dt>
                                <dd class="font-medium">{{ $system->flow_rate_25psi_gpm }} GPM</dd>
                            </div>
                        @endif
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Backwash Flow:</dt>
                            <dd class="font-medium">{{ $system->backwash_flow_rate_gpm }} GPM</dd>
                        </div>
                    </dl>
                </div>

                {{-- Contaminant Capacities --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Capacities</h2>
                    <dl class="space-y-2 text-sm">
                        @if($system->hardness_grains > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Hardness Capacity:</dt>
                                <dd class="font-medium">{{ number_format($system->hardness_grains, 0) }} grains</dd>
                            </div>
                        @endif
                        @if($system->iron_grains > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Iron Capacity:</dt>
                                <dd class="font-medium">{{ number_format($system->iron_grains, 0) }} grains</dd>
                            </div>
                        @endif
                        @if($system->tannin_grains > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Tannin Capacity:</dt>
                                <dd class="font-medium">{{ number_format($system->tannin_grains, 0) }} grains</dd>
                            </div>
                        @endif
                        @if($system->chlorine_lbs > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Chlorine Capacity:</dt>
                                <dd class="font-medium">{{ $system->chlorine_lbs }} lbs</dd>
                            </div>
                        @endif
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Salt per Regen:</dt>
                            <dd class="font-medium">{{ $system->salt_per_regeneration_lbs }} lbs</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Water per Regen:</dt>
                            <dd class="font-medium">{{ $system->water_per_regeneration_gal }} gal</dd>
                        </div>
                    </dl>
                </div>

                {{-- Max Levels --}}
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Maximum Contaminant Levels</h2>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-600">Max Hardness:</dt>
                            <dd class="font-medium">{{ $system->max_hardness_gpg }} gpg</dd>
                        </div>
                        @if($system->max_iron_ppm > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Max Iron:</dt>
                                <dd class="font-medium">{{ $system->max_iron_ppm }} ppm</dd>
                            </div>
                        @endif
                        @if($system->max_tannin_ppm > 0)
                            <div class="flex justify-between">
                                <dt class="text-gray-600">Max Tannin:</dt>
                                <dd class="font-medium">{{ $system->max_tannin_ppm }} ppm</dd>
                            </div>
                        @endif
                    </dl>
                </div>
            </div>

            {{-- Treatment Capabilities --}}
            <div class="mt-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Treatment Capabilities</h2>
                <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 text-sm">
                    @php
                        $treats = [
                            'hardness' => 'Hardness',
                            'chlorine' => 'Chlorine',
                            'iron' => 'Iron',
                            'manganese' => 'Manganese',
                            'tannin' => 'Tannin',
                            'arsenic' => 'Arsenic',
                            'pfoas' => 'PFOAs',
                            'glyphosate' => 'Glyphosate',
                            'chromium_vi' => 'Chromium-VI',
                            'ammonia' => 'Ammonia',
                            'tds' => 'TDS',
                            'ph' => 'pH',
                        ];
                    @endphp
                    @foreach($treats as $key => $label)
                        <div class="flex items-center {{ $system->canTreat($key) ? 'text-green-700' : 'text-gray-400' }}">
                            @if($system->canTreat($key))
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                            @else
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            @endif
                            {{ $label }}
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Valve Programming --}}
            <div class="mt-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-3 border-b pb-2">Valve Programming ({{ $system->valve_type }})</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Backwash</div>
                        <div class="font-semibold text-lg">{{ $system->backwash_min }} min</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Brine Draw / Slow Rinse</div>
                        <div class="font-semibold text-lg">{{ $system->brine_draw_slow_rinse_min }} min</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Rapid Rinse</div>
                        <div class="font-semibold text-lg">{{ $system->rapid_rinse_min }} min</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Brine Fill</div>
                        <div class="font-semibold text-lg">{{ $system->brine_fill_min }} min</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Injector</div>
                        <div class="font-semibold">{{ $system->injector_color }} ({{ $system->injector_gpm }} GPM)</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Brine Tank</div>
                        <div class="font-semibold">{{ $system->brine_tank_size }}</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Safety Brining</div>
                        <div class="font-semibold">Setting {{ $system->safety_briming_setting }}</div>
                    </div>
                    <div class="bg-gray-50 rounded p-3">
                        <div class="text-xs text-gray-500">Regen Time</div>
                        <div class="font-semibold">{{ $system->regen_time }}</div>
                    </div>
                </div>
                @if($system->valve_notes)
                    <p class="text-sm text-gray-600 mt-3 bg-amber-50 border border-amber-200 rounded p-3">{{ $system->valve_notes }}</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection