@extends('crm.layouts.app')

@section('title', $tattooProject->title)

@section('content')
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-8">

    <div class="sm:flex sm:items-start sm:justify-between mb-8">
        <div>
            <a href="{{ route('crm.tattoo-projects.index') }}" class="text-sm font-medium text-gray-500 hover:text-gray-700">&larr; All projects</a>
            <h1 class="mt-2 text-2xl font-semibold text-gray-900">{{ $tattooProject->title }}</h1>
            <p class="mt-1 text-sm text-gray-600">
                {{ $tattooProject->client?->name ?? 'No client' }}
                @if($tattooProject->artist) &middot; with {{ $tattooProject->artist->name }} @endif
            </p>
        </div>
        <div class="mt-4 flex items-center gap-3 sm:mt-0">
            <span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-inset
                @if($tattooProject->status === 'completed') bg-green-50 text-green-700 ring-green-600/20
                @elseif($tattooProject->status === 'in_progress') bg-blue-50 text-blue-700 ring-blue-600/20
                @elseif($tattooProject->status === 'cancelled') bg-red-50 text-red-700 ring-red-600/20
                @else bg-gray-50 text-gray-600 ring-gray-500/10 @endif">
                {{ ucfirst(str_replace('_', ' ', $tattooProject->status ?? 'planned')) }}
            </span>
            <a href="{{ route('crm.tattoo-projects.edit', $tattooProject) }}" class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Edit</a>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-6 rounded-md bg-green-50 p-4 text-sm font-medium text-green-800">{{ session('success') }}</div>
    @endif

    <!-- Progress -->
    @php $progress = $tattooProject->getProgressPercentage(); @endphp
    <div class="mb-8 rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
        <div class="flex items-baseline justify-between">
            <h2 class="text-sm font-semibold text-gray-900">Progress</h2>
            <p class="text-sm text-gray-500">
                {{ $tattooProject->sessions->where('status', 'completed')->count() }}
                of {{ $tattooProject->sessions->count() }} sessions complete
            </p>
        </div>
        <div class="mt-3 h-2 w-full overflow-hidden rounded-full bg-gray-200">
            <div class="h-2 rounded-full bg-indigo-600" style="width: {{ $progress }}%"></div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        <!-- Detail -->
        <div class="lg:col-span-2 space-y-6">
            <div class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <h2 class="text-sm font-semibold text-gray-900 mb-4">Project</h2>
                <dl class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
                    @foreach([
                        'Style' => $tattooProject->style,
                        'Placement' => $tattooProject->body_part,
                        'Estimated sessions' => $tattooProject->estimated_sessions,
                        'Estimated hours' => $tattooProject->estimated_total_hours,
                        'Estimated cost' => $tattooProject->estimated_total_cost ? '$'.number_format($tattooProject->estimated_total_cost, 2) : null,
                        'Started' => $tattooProject->start_date?->format('M j, Y'),
                        'Target completion' => $tattooProject->estimated_completion_date?->format('M j, Y'),
                    ] as $label => $value)
                        <div>
                            <dt class="text-sm text-gray-500">{{ $label }}</dt>
                            <dd class="mt-0.5 text-sm font-medium text-gray-900">{{ $value ?: '—' }}</dd>
                        </div>
                    @endforeach
                </dl>

                @if($tattooProject->description)
                    <div class="mt-6 border-t border-gray-100 pt-4">
                        <dt class="text-sm text-gray-500">Description</dt>
                        <dd class="mt-1 whitespace-pre-line text-sm text-gray-900">{{ $tattooProject->description }}</dd>
                    </div>
                @endif

                @if($tattooProject->design_notes)
                    <div class="mt-4 border-t border-gray-100 pt-4">
                        <dt class="text-sm text-gray-500">Design notes</dt>
                        <dd class="mt-1 whitespace-pre-line text-sm text-gray-900">{{ $tattooProject->design_notes }}</dd>
                    </div>
                @endif
            </div>

            <!-- Sessions -->
            <div class="rounded-lg bg-white shadow-sm ring-1 ring-gray-900/5">
                <div class="flex items-center justify-between px-6 py-4">
                    <h2 class="text-sm font-semibold text-gray-900">Sessions</h2>
                </div>
                <ul role="list" class="divide-y divide-gray-100">
                    @forelse($tattooProject->sessions->sortBy('session_number') as $session)
                        <li class="flex items-center justify-between gap-4 px-6 py-4">
                            <div class="min-w-0">
                                <p class="text-sm font-medium text-gray-900">
                                    Session {{ $session->session_number ?? $loop->iteration }}
                                    @if($session->title) &middot; {{ $session->title }} @endif
                                </p>
                                <p class="mt-0.5 text-sm text-gray-500">
                                    {{ $session->scheduled_date?->format('M j, Y') ?? 'Not scheduled' }}
                                </p>
                            </div>
                            <span class="shrink-0 inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset
                                @if($session->status === 'completed') bg-green-50 text-green-700 ring-green-600/20
                                @else bg-gray-50 text-gray-600 ring-gray-500/10 @endif">
                                {{ ucfirst($session->status ?? 'pending') }}
                            </span>
                        </li>
                    @empty
                        <li class="px-6 py-10 text-center text-sm text-gray-500">No sessions planned yet.</li>
                    @endforelse
                </ul>
            </div>
        </div>

        <!-- Reference images -->
        <div>
            <div class="rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <h2 class="text-sm font-semibold text-gray-900 mb-4">Reference images</h2>
                @if(!empty($tattooProject->reference_images))
                    <div class="grid grid-cols-2 gap-3">
                        @foreach($tattooProject->reference_images as $image)
                            <img src="{{ Storage::url($image) }}" alt="Reference" class="h-24 w-full rounded-md object-cover ring-1 ring-gray-200">
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500">None uploaded.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection