@php
    $timezones = ['Africa/Nairobi', 'Africa/Dar_es_Salaam', 'Africa/Kampala', 'Africa/Johannesburg', 'UTC'];
@endphp
<x-app-layout>
    <x-slot name="header"><h2 class="font-semibold text-xl text-gray-800 leading-tight">Farms</h2></x-slot>
    <div class="py-8">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-4">
            <form method="POST" action="{{ route('farms.store') }}" class="bg-white p-4 rounded shadow grid grid-cols-1 gap-3">
                @csrf
                <input name="name" placeholder="Farm name" class="rounded border-gray-300" required>
                <input name="code" placeholder="Code" class="rounded border-gray-300">
                <input name="country" placeholder="Country" class="rounded border-gray-300">
                <input name="city" class="rounded border-gray-300" placeholder="City">
                <select name="timezone" class="rounded border-gray-300 text-sm">
                    @foreach ($timezones as $tz)
                        <option value="{{ $tz }}" @selected(old('timezone', 'Africa/Nairobi') === $tz)>{{ $tz }}</option>
                    @endforeach
                </select>
                <button class="px-4 py-2 bg-emerald-600 text-white rounded">Add Farm</button>
            </form>
            <div class="bg-white rounded shadow overflow-auto">
                <table class="min-w-full text-sm">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="p-2 text-left">Name</th>
                            <th class="p-2">Code</th>
                            <th class="p-2">Country</th>
                            <th class="p-2">City</th>
                            <th class="p-2">Timezone</th>
                            <th class="p-2">Status</th>
                            <th class="p-2"></th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($farms as $farm)
                        <tr class="border-t">
                            <td class="p-2">{{ $farm->name }}</td>
                            <td class="p-2">{{ $farm->code }}</td>
                            <td class="p-2">{{ $farm->country }}</td>
                            <td class="p-2">{{ $farm->city }}</td>
                            <td class="p-2">{{ $farm->timezone }}</td>
                            <td class="p-2">{{ $farm->is_active ? 'Active' : 'Inactive' }}</td>
                            <td class="p-2 flex items-center gap-2">
                                <details>
                                    <summary class="cursor-pointer text-emerald-600">Edit</summary>
                                    <form method="POST" action="{{ route('farms.update', $farm) }}" class="mt-2 p-2 bg-gray-50 rounded space-y-2 min-w-64">
                                        @csrf @method('PATCH')
                                        <input name="name" value="{{ $farm->name }}" class="w-full rounded border-gray-300" required>
                                        <input name="code" value="{{ $farm->code }}" class="w-full rounded border-gray-300">
                                        <input name="country" value="{{ $farm->country }}" class="w-full rounded border-gray-300">
                                        <input name="city" value="{{ $farm->city }}" class="w-full rounded border-gray-300" placeholder="City">
                                        <select name="timezone" class="w-full rounded border-gray-300 text-sm">
                                            @foreach ($timezones as $tz)
                                                <option value="{{ $tz }}" @selected(old('timezone', $farm->timezone) === $tz)>{{ $tz }}</option>
                                            @endforeach
                                        </select>
                                        <label class="text-xs flex items-center gap-2"><input type="checkbox" name="is_active" value="1" @checked($farm->is_active)> Active</label>
                                        <button class="px-3 py-1 bg-emerald-600 text-white rounded text-xs">Update</button>
                                    </form>
                                </details>
                                <form method="POST" action="{{ route('farms.destroy', $farm) }}">@csrf @method('DELETE')
                                    <button class="text-red-600">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                <div class="p-3">{{ $farms->links() }}</div>
            </div>
        </div>
    </div>
</x-app-layout>