@extends('layouts.admin')

@section('title', 'Review Site Requirement')

@section('content')
    <x-page-header
        title="Review Site Requirement SREQ-{{ str_pad($requirement->id, 5, '0', STR_PAD_LEFT) }}"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Approvals', 'href' => route('admin.approvals.site-requirements.index')],
            ['label' => 'Site Requirements'],
        ]"
        subtitle="Review and edit the requirement details before approval."
    />

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Edit Form -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                <h2 class="text-lg font-bold text-slate-900 mb-4">Requirement Details</h2>
                
                <form method="POST" action="{{ route('admin.approvals.site-requirements.update', $requirement) }}" class="space-y-4">
                    @csrf
                    @method('PUT')

                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Title</label>
                        <input type="text" name="title" value="{{ old('title', $requirement->title) }}" required 
                            class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition @error('title') border-rose-500 @enderror" 
                            placeholder="Enter requirement title" />
                        @error('title')
                            <p class="text-xs text-rose-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Description</label>
                        <textarea name="description" rows="6" 
                            class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition @error('description') border-rose-500 @enderror" 
                            placeholder="Enter requirement description">{{ old('description', $requirement->description) }}</textarea>
                        @error('description')
                            <p class="text-xs text-rose-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="pt-4 border-t border-slate-100 flex justify-between gap-3">
                        <a href="{{ route('admin.approvals.site-requirements.index') }}" class="inline-flex items-center justify-center px-4 py-2 rounded-lg border border-slate-300 text-slate-700 font-medium hover:bg-slate-50 transition">
                            Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center justify-center px-6 py-2 rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 transition shadow-sm">
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Sidebar: Project Info & Approval Actions -->
        <div class="lg:col-span-1 space-y-4">
            <!-- Project Info -->
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                <h3 class="text-sm font-bold text-slate-900 mb-3">Project Information</h3>
                <div class="space-y-2 text-sm">
                    <div>
                        <div class="text-xs font-bold text-slate-500 uppercase tracking-wider">Project</div>
                        <div class="font-medium text-slate-700">{{ $requirement->project?->code ?? 'N/A' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-bold text-slate-500 uppercase tracking-wider">Site Supervisor</div>
                        <div class="font-medium text-slate-700">{{ $requirement->siteSupervisor?->name ?? 'N/A' }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-bold text-slate-500 uppercase tracking-wider">Status</div>
                        <div class="mt-1">
                            <x-status-badge :value="$requirement->status?->value ?? 'unknown'" :label="ucfirst($requirement->status?->value ?? 'Unknown')" />
                        </div>
                    </div>
                    <div>
                        <div class="text-xs font-bold text-slate-500 uppercase tracking-wider">Created</div>
                        <div class="font-medium text-slate-700">{{ optional($requirement->created_at)->format('d M Y, H:i') }}</div>
                    </div>
                </div>
            </div>

            <!-- Photo Preview -->
            @if ($requirement->photo)
                <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                    <h3 class="text-sm font-bold text-slate-900 mb-3">Photo</h3>
                    <a href="{{ asset('storage/'.$requirement->photo) }}" target="_blank">
                        <img src="{{ asset('storage/'.$requirement->photo) }}" alt="Requirement photo" class="w-full rounded-lg border border-slate-200 object-cover" />
                    </a>
                </div>
            @endif

            <!-- Approval/Rejection Actions -->
            @if ($requirement->status === \App\Enums\SiteRequirementStatus::Pending)
                <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                    <h3 class="text-sm font-bold text-slate-900 mb-4">Approval Actions</h3>
                    <div class="space-y-2">
                        <form method="POST" action="{{ route('admin.approvals.site-requirements.approve', $requirement) }}">
                            @csrf
                            @method('PUT')
                            <button type="submit" class="w-full inline-flex items-center justify-center px-4 py-3 rounded-lg bg-emerald-600 text-white font-bold hover:bg-emerald-700 transition shadow-sm">
                                ✓ Approve Requirement
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.approvals.site-requirements.reject', $requirement) }}" onsubmit="return confirm('Are you sure you want to reject this requirement?');">
                            @csrf
                            @method('PUT')
                            <button type="submit" class="w-full inline-flex items-center justify-center px-4 py-3 rounded-lg bg-rose-600 text-white font-bold hover:bg-rose-700 transition shadow-sm">
                                ✕ Reject Requirement
                            </button>
                        </form>
                    </div>
                </div>
            @else
                <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
                    <p class="text-sm text-slate-600">
                        This requirement has already been <span class="font-bold">{{ ucfirst($requirement->status?->value ?? 'unknown') }}</span>.
                    </p>
                </div>
            @endif
        </div>
    </div>
@endsection