@extends('layouts.cleaning')

@section('content')
    <div class="px-4 py-6 sm:px-6 lg:px-8">
        <div class="sm:flex sm:items-center sm:justify-between mb-8">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">{{ $tpsOperationArea->name_snapshot }}</h1>
                <p class="mt-2 text-sm text-gray-700">Daily Station / Facility Cleaning Execution for {{ $dailyControl->date->format('d M Y') }}</p>
            </div>
            <div class="mt-4 sm:mt-0">
                <a href="{{ route('cleaning.daily-control.index', ['dailyControl' => $dailyControl->id, 'tab' => 'tps']) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    Back to Overview
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="rounded-md bg-green-50 p-4 mb-6">
                <div class="flex">
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-2">
                <form action="{{ route('cleaning.tps.area.save', [$dailyControl, $tpsOperationArea]) }}" method="POST" id="tps-form">
                    @csrf
                    <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
                        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">Execution Checklist</h3>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duty</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48">Result</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-64">Remarks</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    @foreach($tpsOperationArea->duties as $duty)
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                {{ $duty->description_snapshot }}
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                <div class="flex flex-col gap-2 w-40">
                                                    @foreach(['Completed', 'Not Completed', 'N/A'] as $option)
                                                        <label class="flex min-h-11 cursor-pointer items-center gap-2 border border-slate-200 px-2.5 text-xs font-semibold text-slate-700 has-[:checked]:border-cyan-800 has-[:checked]:bg-cyan-50 has-[:checked]:text-cyan-950 {{ $tpsOperationArea->status === 'Completed' ? 'cursor-not-allowed opacity-70' : 'hover:border-cyan-500' }}">
                                                            <input type="radio" name="duties[{{ $duty->id }}][result]" value="{{ $option }}" class="h-4 w-4 shrink-0 border-slate-400 text-cyan-800 focus:ring-cyan-700" {{ $duty->result === $option ? 'checked' : '' }} {{ $tpsOperationArea->status === 'Completed' ? 'disabled' : '' }}>
                                                            <span>{{ $option }}</span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                <input type="text" name="duties[{{ $duty->id }}][remarks]" class="mt-1 focus:ring-cyan-500 focus:border-cyan-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="Remarks" value="{{ $duty->remarks }}" {{ $tpsOperationArea->status === 'Completed' ? 'disabled' : '' }}>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @if($tpsOperationArea->status !== 'Completed')
                        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 space-x-3">
                            <button type="submit" name="action" value="save" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
                                Save Progress
                            </button>
                            <button type="submit" name="action" value="complete" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                                Mark Area Complete
                            </button>
                        </div>
                        @endif
                    </div>
                </form>
            </div>

            <div class="lg:col-span-1">
                <!-- Workers assigned -->
                <div class="bg-white shadow rounded-lg mb-6">
                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">Assigned Team</h3>
                    </div>
                    <div class="px-4 py-5 sm:p-6">
                        @if($dailyControl->workerAttendances->count() > 0)
                            <div class="grid grid-cols-1 gap-2">
                                @foreach($dailyControl->workerAttendances as $att)
                                    <label class="flex items-start">
                                        <div class="flex items-center h-5">
                                            <input form="tps-form" name="worker_attendance_ids[]" value="{{ $att->id }}" type="checkbox" class="focus:ring-cyan-500 h-4 w-4 text-cyan-600 border-gray-300 rounded" {{ $tpsOperationArea->assignedWorkers->contains('id', $att->id) ? 'checked' : '' }} {{ $tpsOperationArea->status === 'Completed' ? 'disabled' : '' }}>
                                        </div>
                                        <div class="ml-3 text-sm">
                                            <span class="font-medium text-gray-700">{{ $att->cleaningWorker->first_name }} {{ $att->cleaningWorker->last_name }}</span>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        @else
                            <p class="text-sm text-gray-500">No workers checked in for this shift.</p>
                        @endif
                    </div>
                </div>

                <!-- Material Usage -->
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900">Material Usage</h3>
                    </div>
                    <div class="px-4 py-5 sm:p-6">
                        <p class="text-sm text-gray-500">Material reporting for this area will be linked here.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection