@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">Station / Facility Cleaning Configuration</h1>
                <p class="mt-2 text-sm text-gray-700">Manage work areas and duties for Station / Facility Cleaning.</p>
            </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
        @if($errors->any())
            <div class="rounded-md bg-red-50 p-4 mb-6">
                <div class="flex">
                    <div class="ml-3 text-sm text-red-800">
                        <ul class="list-disc space-y-1 pl-5">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <div class="bg-white shadow rounded-lg mb-8">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Select Station</h3>
                <form action="{{ route('cleaning.tps-config.index') }}" method="GET" class="flex gap-4 items-center">
                    <select name="branch_id" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm rounded-md" onchange="this.form.submit()">
                        <option value="">-- Select Station --</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}" {{ $branchId == $branch->id ? 'selected' : '' }}>
                                {{ $branch->name }}
                            </option>
                        @endforeach
                    </select>
                </form>
            </div>
        </div>

        @if($branchId)
        
        @if($areas->isEmpty())
        <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-8 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">No Areas Configured</h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <p>This station currently has no configured work areas. You can add custom work areas below, or use the standard template to quickly populate common station work areas (Waiting Area, Washrooms, Platform, etc.).</p>
                    </div>
                    <div class="mt-4">
                        <form action="{{ route('cleaning.tps-config.seed-defaults') }}" method="POST">
                            @csrf
                            <input type="hidden" name="branch_id" value="{{ $branchId }}">
                            <button type="submit" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                Use Standard Setup
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div class="lg:col-span-1">
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Add Work Area</h3>
                        <form action="{{ route('cleaning.tps-config.areas.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="branch_id" value="{{ $branchId }}">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700">Work Area Name</label>
                                <input type="text" name="name" class="mt-1 focus:ring-cyan-500 focus:border-cyan-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" required>
                            </div>
                            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
                                Add Work Area
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="lg:col-span-2">
                <div class="bg-white shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Configured Work Areas</h3>
                        
                        <div class="space-y-6">
                            @forelse($areas as $area)
                                <div class="bg-gray-50 border border-gray-200 rounded-lg p-5">
                                    <div class="flex justify-between items-center mb-4">
                                        <h4 class="text-lg font-bold text-gray-900">{{ $area->name }}</h4>
                                        <form action="{{ route('cleaning.tps-config.areas.destroy', $area) }}" method="POST" class="inline">
                                            @csrf @method('DELETE')
                                            <button class="text-red-600 hover:text-red-900 text-sm font-medium" onclick="return confirm('Remove work area and all its duties?')">Delete Work Area</button>
                                        </form>
                                    </div>
                                    
                                    <h5 class="text-sm font-medium text-gray-700 mb-2">Duties</h5>
                                    <ul class="divide-y divide-gray-200 mb-4 bg-white border rounded-md">
                                        @forelse($area->duties as $duty)
                                            <li class="p-3 flex justify-between items-center">
                                                <span class="text-sm text-gray-900">{{ $duty->description }}</span>
                                                <form action="{{ route('cleaning.tps-config.duties.destroy', $duty) }}" method="POST" class="inline">
                                                    @csrf @method('DELETE')
                                                    <button class="text-red-600 hover:text-red-900 text-sm font-medium" onclick="return confirm('Remove duty?')">Remove</button>
                                                </form>
                                            </li>
                                        @empty
                                            <li class="p-3 text-sm text-gray-500">No duties configured.</li>
                                        @endforelse
                                    </ul>

                                    <form action="{{ route('cleaning.tps-config.areas.duties.store', $area) }}" method="POST" class="mb-6 flex gap-2">
                                        @csrf
                                        <input type="text" name="description" class="focus:ring-cyan-500 focus:border-cyan-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="New Duty" required>
                                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-slate-600 hover:bg-slate-700 whitespace-nowrap">
                                            Add Duty
                                        </button>
                                    </form>

                                    <h5 class="text-sm font-medium text-gray-700 mb-2">Assigned Workers (Default)</h5>
                                    <form action="{{ route('cleaning.tps-config.areas.workers.update', $area) }}" method="POST">
                                        @csrf
                                        <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mb-3">
                                            @foreach($workers as $worker)
                                                <div class="flex items-start">
                                                    <div class="flex items-center h-5">
                                                        <input id="worker_{{ $area->id }}_{{ $worker->id }}" name="worker_ids[]" value="{{ $worker->id }}" type="checkbox" class="focus:ring-cyan-500 h-4 w-4 text-cyan-600 border-gray-300 rounded" {{ $area->assignedWorkers->contains('id', $worker->id) ? 'checked' : '' }}>
                                                    </div>
                                                    <div class="ml-2 text-sm">
                                                        <label for="worker_{{ $area->id }}_{{ $worker->id }}" class="font-medium text-gray-700">{{ $worker->first_name }} {{ $worker->last_name }}</label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <button type="submit" class="inline-flex justify-center py-1.5 px-3 border border-transparent shadow-sm text-xs font-medium rounded text-white bg-cyan-600 hover:bg-cyan-700">
                                            Save Workers
                                        </button>
                                    </form>
                                </div>
                            @empty
                                <p class="text-gray-500 text-sm">No areas configured for this station.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
@endsection