@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800">System Sizer II</h1>
        <p class="text-gray-600 mt-2">Water softener sizing and programming recommendations based on water test results.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {{-- Select Existing Water Test --}}
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-700 mb-4">Select Existing Water Test</h2>
            <form action="{{ route('admin.system-sizer.recommend') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="water_test_id" class="block text-sm font-medium text-gray-700 mb-1">Water Test</label>
                    <select name="water_test_id" id="water_test_id" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">-- Select a water test --</option>
                        @forelse($waterTests as $test)
                            <option value="{{ $test->test_id }}">
                                {{ $test->label }} - {{ $test->customer->name ?? 'N/A' }} ({{ $test->test_date->format('m/d/Y') }})
                            </option>
                        @empty
                            <option disabled>No water tests available</option>
                        @endforelse
                    </select>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">
                    Get Recommendations
                </button>
            </form>
        </div>

        {{-- Manual Entry --}}
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold text-gray-700 mb-4">Manual Water Test Entry</h2>
            <form action="{{ route('admin.system-sizer.recommend') }}" method="POST">
                @csrf
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <label for="hardness" class="block text-sm font-medium text-gray-700 mb-1">Hardness (gpg) *</label>
                        <input type="number" name="hardness" id="hardness" step="0.1" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required>
                    </div>
                    <div>
                        <label for="iron" class="block text-sm font-medium text-gray-700 mb-1">Iron (ppm)</label>
                        <input type="number" name="iron" id="iron" step="0.1" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="iron_type" class="block text-sm font-medium text-gray-700 mb-1">Iron Type</label>
                        <select name="iron_type" id="iron_type" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="clear">Clear Water</option>
                            <option value="oxidized">Oxidized</option>
                        </select>
                    </div>
                    <div>
                        <label for="manganese" class="block text-sm font-medium text-gray-700 mb-1">Manganese (ppm)</label>
                        <input type="number" name="manganese" id="manganese" step="0.01" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="tannin" class="block text-sm font-medium text-gray-700 mb-1">Tannin (ppm)</label>
                        <input type="number" name="tannin" id="tannin" step="0.1" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="ph" class="block text-sm font-medium text-gray-700 mb-1">pH</label>
                        <input type="number" name="ph" id="ph" step="0.1" min="0" max="14"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="tds" class="block text-sm font-medium text-gray-700 mb-1">TDS (ppm)</label>
                        <input type="number" name="tds" id="tds" step="1" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="ammonia" class="block text-sm font-medium text-gray-700 mb-1">Ammonia (ppm)</label>
                        <input type="number" name="ammonia" id="ammonia" step="0.1" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="arsenic" class="block text-sm font-medium text-gray-700 mb-1">Arsenic (ppb)</label>
                        <input type="number" name="arsenic" id="arsenic" step="1" min="0"
                               class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="col-span-2">
                        <fieldset>
                            <legend class="block text-sm font-medium text-gray-700 mb-2">Contaminants Detected</legend>
                            <div class="flex flex-wrap gap-4">
                                <label class="flex items-center">
                                    <input type="checkbox" name="pfoas" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2 text-sm text-gray-700">PFOAs</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" name="glyphosate" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2 text-sm text-gray-700">Glyphosate</span>
                                </label>
                                <label class="flex items-center">
                                    <input type="checkbox" name="chromium_vi" value="1" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2 text-sm text-gray-700">Chromium-VI</span>
                                </label>
                            </div>
                        </fieldset>
                    </div>
                </div>
                <button type="submit" class="mt-4 w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition">
                    Get Recommendations
                </button>
            </form>
        </div>
    </div>
</div>
@endsection