@extends('layouts.admin')

@section('header')
    Project Details
@endsection

@section('content')
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">{{ $project->name }}</h1>
        <div class="space-x-2">
            <a href="{{ route('admin.projects.edit', $project) }}"
               class="px-4 py-2 bg-amber-600 text-white rounded-lg shadow hover:bg-amber-700 transition-colors">
                <i class="fas fa-edit mr-1"></i> Edit
            </a>
            <a href="{{ route('admin.projects.index') }}" 
               class="px-4 py-2 bg-gray-600 text-white rounded-lg shadow hover:bg-gray-700 transition-colors">
                <i class="fas fa-arrow-left mr-1"></i> Back
            </a>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
        <div class="grid md:grid-cols-3 gap-6 p-6">
            <div>
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Basic Information</h3>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs text-gray-500">Status</label>
                        <span class="px-2 py-1 text-xs rounded-full inline-block mt-1 {{ $project->status_color }}">
                            {{ $project->status_label }}
                        </span>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500">Client</label>
                        <div class="font-medium">{{ $project->client->name ?? 'N/A' }}</div>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500">Project Manager</label>
                        <div class="font-medium">{{ $project->manager->name ?? 'Unassigned' }}</div>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">Timeline & Budget</h3>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs text-gray-500">Start Date</label>
                        <div class="font-medium">{{ $project->start_date->format('M d, Y') }}</div>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500">Deadline</label>
                        <div class="font-medium">{{ $project->deadline ? $project->deadline->format('M d, Y') : 'No deadline set' }}</div>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500">Budget</label>
                        <div class="font-medium">{{ $project->budget ? '$'.number_format($project->budget, 2) : 'Not specified' }}</div>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-2">System Information</h3>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs text-gray-500">Created</label>
                        <div class="font-medium">{{ $project->created_at->format('M d, Y \a\t h:i A') }}</div>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500">Last Updated</label>
                        <div class="font-medium">{{ $project->updated_at->format('M d, Y \a\t h:i A') }}</div>
                    </div>
                    <div>
                        <label class="block text-xs text-gray-500">Project ID</label>
                        <div class="font-medium">{{ $project->id }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid md:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="font-bold text-lg mb-4 text-gray-800">Description</h3>
            <div class="prose max-w-none">
                {{ $project->description ?? 'No description provided.' }}
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="font-bold text-lg mb-4 text-gray-800">Notes</h3>
            <div class="prose max-w-none">
                {{ $project->notes ?? 'No notes added.' }}
            </div>
        </div>
    </div>

    <div class="mt-6 border-t border-gray-200 pt-6">
        <h3 class="font-bold text-lg mb-4 text-red-600">Danger Zone</h3>
        <form action="{{ route('admin.projects.destroy', $project) }}" method="POST" class="inline-block">
            @csrf
            @method('DELETE')
            <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg shadow hover:bg-red-700 transition-colors"
                    onclick="return confirm('Are you sure you want to delete this project? This action cannot be undone.')">
                <i class="fas fa-trash mr-1"></i> Delete Project
            </button>
        </form>
    </div>
@endsection