@extends('layouts.admin')

@section('title', 'Projects')

@section('content')
    <x-page-header
        title="Projects"
        :breadcrumbs="[
            ['label' => 'Admin', 'href' => route('admin.dashboard')],
            ['label' => 'Projects'],
        ]"
        subtitle="Search, filter, and manage project progress."
    >
        <x-slot:actions>
            <x-button :href="route('admin.projects.create')">
                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1z" clip-rule="evenodd"/>
                </svg>
                New Project
            </x-button>
        </x-slot:actions>
    </x-page-header>

    <div class="dashboard-stats">
        <div class="dashboard-card dashboard-card--projects">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5m-4 0h4" />
                </svg>
            </div>
            <p class="dashboard-card__label">Total Projects</p>
            <p class="dashboard-card__value">{{ $projects->total() }}</p>
        </div>

        <div class="dashboard-card dashboard-card--engineers">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
            </div>
            <p class="dashboard-card__label">In Progress</p>
            <p class="dashboard-card__value">{{ $projects->where('status', \App\Enums\ProjectStatus::InProgress)->count() }}</p>
        </div>

        <div class="dashboard-card dashboard-card--tasks">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
                </svg>
            </div>
            <p class="dashboard-card__label">On Hold</p>
            <p class="dashboard-card__value">{{ $projects->where('status', \App\Enums\ProjectStatus::OnHold)->count() }}</p>
        </div>

        <div class="dashboard-card dashboard-card--requests">
            <div class="dashboard-card__icon">
                <svg width="80" height="80" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
                </svg>
            </div>
            <p class="dashboard-card__label">Completed</p>
            <p class="dashboard-card__value">{{ $projects->where('status', \App\Enums\ProjectStatus::Completed)->count() }}</p>
        </div>
    </div>

    <x-card class="mb-4" padding="p-5">
        <form method="GET" class="grid grid-cols-1 lg:grid-cols-12 gap-3 items-end">
            <div class="lg:col-span-4">
                <label class="text-xs font-medium text-zinc-600">Search</label>
                <div class="mt-1 relative">
                    <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
                        <svg class="h-4 w-4 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd" d="M9 3a6 6 0 1 0 0 12A6 6 0 0 0 9 3zm-8 6a8 8 0 1 1 14.32 4.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387A8 8 0 0 1 1 9z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <input
                        name="q"
                        value="{{ request('q') }}"
                        placeholder="Name, code, location..."
                        class="w-full h-10 rounded-xl border-zinc-300 pl-10 focus:border-indigo-500 focus:ring-indigo-500"
                    >
                </div>
            </div>

            <div class="lg:col-span-3">
                <label class="text-xs font-medium text-zinc-600">Status</label>
                <select name="status" class="mt-1 w-full h-10 rounded-xl border-zinc-300 focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">All statuses</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s->value }}" @selected(request('status') === $s->value)>{{ $s->label() }}</option>
                    @endforeach
                </select>
            </div>

            <div class="lg:col-span-2">
                <label class="text-xs font-medium text-zinc-600">Start from</label>
                <input type="date" name="start_from" value="{{ request('start_from') }}" class="mt-1 w-full h-10 rounded-xl border-zinc-300 focus:border-indigo-500 focus:ring-indigo-500" />
            </div>

            <div class="lg:col-span-2">
                <label class="text-xs font-medium text-zinc-600">Start to</label>
                <input type="date" name="start_to" value="{{ request('start_to') }}" class="mt-1 w-full h-10 rounded-xl border-zinc-300 focus:border-indigo-500 focus:ring-indigo-500" />
            </div>

            <div class="lg:col-span-1 flex gap-2">
                <x-button type="submit" variant="secondary" class="w-full">Apply</x-button>
            </div>

            <div class="lg:col-span-12 flex flex-wrap items-center justify-between gap-3 pt-2">
                <div class="text-xs text-zinc-500">
                    Showing <span class="font-semibold text-zinc-900">{{ $projects->count() }}</span> on this page &middot;
                    Total <span class="font-semibold text-zinc-900">{{ $projects->total() }}</span>
                </div>
                <a href="{{ route('admin.projects.index') }}" class="text-sm text-indigo-700 hover:text-indigo-800 font-medium">Reset filters</a>
            </div>
        </form>
    </x-card>

    <x-table-wrapper class="pb-20">
        <table class="min-w-full text-sm">
            <thead class="text-xs font-semibold uppercase tracking-wider text-zinc-500 bg-zinc-50">
                <tr>
                    <th class="text-left px-4 py-3">Code</th>
                    <th class="text-left px-4 py-3">Project</th>
                    <th class="text-left px-4 py-3">Status</th>
                    <th class="text-left px-4 py-3">Progress</th>
                    <th class="text-left px-4 py-3">Location</th>
                    <!-- <th class="text-right px-4 py-3">Actions</th> -->
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($projects as $project)
                    <tr class="hover:bg-zinc-50/60">
                        <td class="px-4 py-0 whitespace-nowrap font-mono text-xs text-zinc-700">
                            <a href="{{ route('admin.projects.show', $project) }}" class="block px-4 py-3">
                                {{ $project->code }}
                            </a>
                        </td>
                        <td class="px-4 py-0">
                            <a href="{{ route('admin.projects.show', $project) }}" class="block px-4 py-3">
                                <div class="font-medium text-zinc-900">{{ $project->name }}</div>
                                <div class="text-xs text-zinc-500">Created by {{ $project->creator?->name ?? '-' }}</div>
                            </a>
                        </td>
                        <td class="px-4 py-0 whitespace-nowrap">
                            <a href="{{ route('admin.projects.show', $project) }}" class="block px-4 py-3">
                                <x-status-badge :value="$project->status" />
                            </a>
                        </td>
                        <td class="px-4 py-0">
                            <a href="{{ route('admin.projects.show', $project) }}" class="block px-4 py-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-28 h-2 rounded-full bg-zinc-100 overflow-hidden">
                                        <div class="h-2 rounded-full bg-indigo-600/80" style="width: {{ (int) $project->progress_percentage }}%"></div>
                                    </div>
                                    <div class="text-xs font-medium text-zinc-700">{{ (int) $project->progress_percentage }}%</div>
                                </div>
                            </a>
                        </td>
                        <td class="px-4 py-0 text-zinc-700">
                            <a href="{{ route('admin.projects.show', $project) }}" class="block px-4 py-3">
                                {{ $project->location ?? '-' }}
                            </a>
                        </td>
                        <!-- <td class="px-4 py-3 text-right">
                            <div class="relative inline-block text-left" x-data="{ open: false }">
                                <button
                                    type="button"
                                    class="inline-flex h-9 w-9 items-center justify-center rounded-xl hover:bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
                                    @click="open = !open"
                                    @click.outside="open = false"
                                    aria-label="Actions"
                                >
                                    <svg class="h-5 w-5 text-zinc-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path d="M6 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"/>
                                    </svg>
                                </button>

                                <div
                                    x-show="open"
                                    x-transition.origin.top.right
                                    class="absolute right-0 mt-2 w-44 rounded-2xl bg-white shadow-lg ring-1 ring-zinc-950/10 p-1 z-10"
                                    style="display: none;"
                                >
                                    <a href="{{ route('admin.projects.show', $project) }}" class="block rounded-xl px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50">View</a>
                                    <a href="{{ route('admin.projects.edit', $project) }}" class="block rounded-xl px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50">Edit</a>
                                    <a href="{{ route('admin.projects.assignments', $project) }}" class="block rounded-xl px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50">Assignments</a>
                                    <form method="POST" action="{{ route('admin.projects.destroy', $project) }}" onsubmit="return confirm('Delete this project?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="w-full text-left rounded-xl px-3 py-2 text-sm text-rose-700 hover:bg-rose-50">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </td> -->
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-10 text-center">
                            <div class="text-sm font-medium text-zinc-900">No projects found</div>
                            <div class="mt-1 text-sm text-zinc-500">Try adjusting your search or filters.</div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </x-table-wrapper>

    <div class="mt-4">
        {{ $projects->links() }}
    </div>
@endsection