@extends('layouts.admin')

@section('title', $project->code . ' — ' . $project->name)

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-zinc-900">{{ $project->code }} — {{ $project->name }}</h1>
        <p class="text-sm text-zinc-600 mt-1">Project Dashboard</p>
    </div>

    <!-- Main Tab Container -->
    <div
        class="bg-white rounded-lg shadow"
        x-data="{
            activeTab: 'overview',
            isEditingOverview: false,
            showDeleteModal: false,
            loading: false,
            message: { type: '', text: '' },
            editForm: {
                name: '{{ $project->name }}',
                description: '{{ $project->description ?? '' }}',
                location: '{{ $project->location ?? '' }}',
                status: '{{ $project->status }}',
                start_date: '{{ $project->start_date?->format('Y-m-d') ?? '' }}',
                expected_end_date: '{{ $project->expected_end_date?->format('Y-m-d') ?? '' }}'
            }
        }"
    >
        <!-- Tab Navigation -->
        <div class="border-b border-zinc-200">
            <div class="flex overflow-x-auto">
                <button
                    @click="activeTab = 'overview'"
                    :class="{
                        'border-b-2 border-blue-500 text-blue-600': activeTab === 'overview',
                        'border-b-2 border-transparent text-zinc-600 hover:text-zinc-900': activeTab !== 'overview'
                    }"
                    class="px-6 py-3 font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-none"
                    role="tab"
                    :aria-selected="activeTab === 'overview'"
                    aria-controls="overview-panel"
                >
                    Overview
                </button>
                <button
                    @click="activeTab = 'assignments'"
                    :class="{
                        'border-b-2 border-blue-500 text-blue-600': activeTab === 'assignments',
                        'border-b-2 border-transparent text-zinc-600 hover:text-zinc-900': activeTab !== 'assignments'
                    }"
                    class="px-6 py-3 font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-none"
                    role="tab"
                    :aria-selected="activeTab === 'assignments'"
                    aria-controls="assignments-panel"
                >
                    Assignments
                </button>
                <button
                    @click="activeTab = 'tasks'"
                    :class="{
                        'border-b-2 border-blue-500 text-blue-600': activeTab === 'tasks',
                        'border-b-2 border-transparent text-zinc-600 hover:text-zinc-900': activeTab !== 'tasks'
                    }"
                    class="px-6 py-3 font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-none"
                    role="tab"
                    :aria-selected="activeTab === 'tasks'"
                    aria-controls="tasks-panel"
                >
                    Tasks
                </button>
                <button
                    @click="activeTab = 'maintenance'"
                    :class="{
                        'border-b-2 border-blue-500 text-blue-600': activeTab === 'maintenance',
                        'border-b-2 border-transparent text-zinc-600 hover:text-zinc-900': activeTab !== 'maintenance'
                    }"
                    class="px-6 py-3 font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-none"
                    role="tab"
                    :aria-selected="activeTab === 'maintenance'"
                    aria-controls="maintenance-panel"
                >
                    Maintenance Requests
                </button>
                <button
                    @click="activeTab = 'reports'"
                    :class="{
                        'border-b-2 border-blue-500 text-blue-600': activeTab === 'reports',
                        'border-b-2 border-transparent text-zinc-600 hover:text-zinc-900': activeTab !== 'reports'
                    }"
                    class="px-6 py-3 font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-none"
                    role="tab"
                    :aria-selected="activeTab === 'reports'"
                    aria-controls="reports-panel"
                >
                    Reports
                </button>
            </div>
        </div>

        <!-- Alert Messages -->
        <div x-show="message.text" class="p-4 bg-zinc-50 border-b border-zinc-200">
            <div
                :class="{
                    'bg-green-50 text-green-800 border-green-200': message.type === 'success',
                    'bg-red-50 text-red-800 border-red-200': message.type === 'error',
                    'bg-blue-50 text-blue-800 border-blue-200': message.type === 'info'
                }"
                class="p-3 rounded border"
                x-text="message.text"
            ></div>
        </div>

        <!-- Tab Panels -->
        <div class="overflow-y-auto" style="max-height: calc(100vh - 400px);">
            <!-- Overview Tab -->
            <div
                id="overview-panel"
                x-show="activeTab === 'overview'"
                class="p-6"
            >
                @include('projects.tabs.overview')
            </div>

            <!-- Assignments Tab -->
            <div
                id="assignments-panel"
                x-show="activeTab === 'assignments'"
                class="p-6"
            >
                @include('projects.tabs.assignments')
            </div>

            <!-- Tasks Tab -->
            <div
                id="tasks-panel"
                x-show="activeTab === 'tasks'"
                class="p-6"
            >
                @include('projects.tabs.tasks')
            </div>

            <!-- Maintenance Requests Tab -->
            <div
                id="maintenance-panel"
                x-show="activeTab === 'maintenance'"
                class="p-6"
            >
                @include('projects.tabs.maintenance')
            </div>

            <!-- Reports Tab -->
            <div
                id="reports-panel"
                x-show="activeTab === 'reports'"
                class="p-6"
            >
                @include('projects.tabs.reports')
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
    x-show="showDeleteModal"
    @keydown.escape.window="showDeleteModal = false"
    style="display: none;"
>
    <div class="bg-white rounded-lg shadow-lg p-6 w-96">
        <h3 class="text-lg font-semibold text-zinc-900 mb-4">Delete Project</h3>
        <p class="text-sm text-zinc-600 mb-6">Are you sure you want to delete this project? This action cannot be undone.</p>
        <div class="flex gap-3">
            <button
                @click="showDeleteModal = false"
                class="flex-1 px-4 py-2 border border-zinc-300 text-zinc-700 rounded-lg hover:bg-zinc-50 transition-colors"
            >
                Cancel
            </button>
            <form method="POST" action="{{ route('admin.projects.destroy', $project) }}" class="flex-1">
                @csrf
                @method('DELETE')
                <button
                    type="submit"
                    class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
                >
                    Delete
                </button>
            </form>
        </div>
    </div>
</div>
@endsection