@extends('crm.layouts.app')

@section('title', 'Tattoo Projects')

@section('content')
<!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <h1 class="text-2xl font-semibold text-gray-900">Tattoo Projects</h1>
            <p class="mt-2 text-sm text-gray-700">Manage multi-session tattoo projects and track progress across sessions.</p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
            <a href="{{ route('crm.tattoo-projects.create') }}" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                </svg>
                New Project
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="mt-8">
        <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Status Filter -->
            <div x-data="{
                open: false,
                selected: '{{ request('status', '') }}',
                options: {
                    '': 'All Statuses',
                    'planning': 'Planning',
                    'active': 'Active',
                    'completed': 'Completed',
                    'cancelled': 'Cancelled'
                },
                getLabel() {
                    return this.options[this.selected] || 'All Statuses';
                },
                selectStatus(status) {
                    this.selected = status;
                    this.open = false;
                    this.$refs.form.submit();
                }
            }">
                <label class="block text-sm font-medium text-gray-900">Status</label>
                <form x-ref="form" method="GET" class="mt-2">
                    <input type="hidden" name="status" :value="selected">
                    <input type="hidden" name="artist_id" value="{{ request('artist_id') }}">
                    <input type="hidden" name="client_id" value="{{ request('client_id') }}">
                    <input type="hidden" name="search" value="{{ request('search') }}">

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <button type="button"
                                        @click="selectStatus('')"
                                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                        :class="{ 'bg-gray-100': selected === '' }">
                                    All Statuses
                                </button>
                                <button type="button" @click="selectStatus('planning')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'planning' }">Planning</button>
                                <button type="button" @click="selectStatus('active')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'active' }">Active</button>
                                <button type="button" @click="selectStatus('completed')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'completed' }">Completed</button>
                                <button type="button" @click="selectStatus('cancelled')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'cancelled' }">Cancelled</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Artist Filter -->
            <div x-data="{
                open: false,
                selected: '{{ request("artist_id", "") }}',
                artists: {{ Js::from($artists->map(fn($a) => ['id' => $a->id, 'name' => $a->name])->values()) }},
                getLabel() {
                    if (!this.selected) return 'All Artists';
                    const artist = this.artists.find(a => a.id == this.selected);
                    return artist ? artist.name : 'All Artists';
                },
                selectArtist(artistId) {
                    this.selected = artistId;
                    this.open = false;
                    this.$refs.form.submit();
                }
            }">
                <label class="block text-sm font-medium text-gray-900">Artist</label>
                <form x-ref="form" method="GET" class="mt-2">
                    <input type="hidden" name="artist_id" x-model="selected">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                    <input type="hidden" name="client_id" value="{{ request('client_id') }}">
                    <input type="hidden" name="search" value="{{ request('search') }}">

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <button type="button"
                                        @click="selectArtist('')"
                                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                        :class="{ 'bg-gray-100': selected === '' }">
                                    All Artists
                                </button>
                                <template x-for="artist in artists" :key="artist.id">
                                    <button type="button"
                                            @click="selectArtist(artist.id)"
                                            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                            :class="{ 'bg-gray-100': selected == artist.id }">
                                        <span x-text="artist.name"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Client Filter -->
            <div x-data="{
                open: false,
                selected: '{{ request("client_id", "") }}',
                clients: {{ Js::from($clients->map(fn($c) => ['id' => $c->id, 'name' => $c->name])->values()) }},
                getLabel() {
                    if (!this.selected) return 'All Clients';
                    const client = this.clients.find(c => c.id == this.selected);
                    return client ? client.name : 'All Clients';
                },
                selectClient(clientId) {
                    this.selected = clientId;
                    this.open = false;
                    this.$refs.form.submit();
                }
            }">
                <label class="block text-sm font-medium text-gray-900">Client</label>
                <form x-ref="form" method="GET" class="mt-2">
                    <input type="hidden" name="client_id" x-model="selected">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                    <input type="hidden" name="artist_id" value="{{ request('artist_id') }}">
                    <input type="hidden" name="search" value="{{ request('search') }}">

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <button type="button"
                                        @click="selectClient('')"
                                        class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                        :class="{ 'bg-gray-100': selected === '' }">
                                    All Clients
                                </button>
                                <template x-for="client in clients" :key="client.id">
                                    <button type="button"
                                            @click="selectClient(client.id)"
                                            class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden"
                                            :class="{ 'bg-gray-100': selected == client.id }">
                                        <span x-text="client.name"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Search -->
            <div>
                <label for="search" class="block text-sm font-medium text-gray-900">Search</label>
                <form method="GET" class="mt-2">
                    <input type="hidden" name="status" value="{{ request('status') }}">
                    <input type="hidden" name="artist_id" value="{{ request('artist_id') }}">
                    <input type="hidden" name="client_id" value="{{ request('client_id') }}">
                    <div class="flex rounded-md shadow-xs">
                        <input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="Search projects..." class="block w-full min-w-0 grow rounded-md rounded-r-none bg-white py-1.5 pl-3 pr-3 text-base text-gray-900 placeholder:text-gray-400 inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600 sm:text-sm">
                        <button type="submit" class="inline-flex items-center rounded-md rounded-l-none bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Projects Grid -->
    @if($projects->count() > 0)
        <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($projects as $project)
                <div class="overflow-hidden rounded-lg bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5">
                    <div class="p-6">
                        <!-- Header -->
                        <div class="flex items-start justify-between">
                            <div class="flex-1 min-w-0">
                                <h3 class="text-base font-semibold text-gray-900">
                                    <a href="{{ route('crm.tattoo-projects.show', $project) }}" class="hover:text-indigo-600">
                                        {{ $project->title }}
                                    </a>
                                </h3>
                            </div>
                            @php
                                $statusColors = [
                                    'planning' => 'bg-gray-50 text-gray-600 ring-gray-500/10',
                                    'active' => 'bg-blue-50 text-blue-700 ring-blue-700/10',
                                    'completed' => 'bg-green-50 text-green-700 ring-green-600/20',
                                    'cancelled' => 'bg-red-50 text-red-700 ring-red-600/20'
                                ];
                                $colorClass = $statusColors[$project->status] ?? 'bg-gray-50 text-gray-600 ring-gray-500/10';
                            @endphp
                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $colorClass }}">
                                {{ ucfirst($project->status) }}
                            </span>
                        </div>

                        <!-- Details -->
                        <dl class="mt-4 space-y-2">
                            <div class="flex items-center gap-x-2 text-sm">
                                <dt class="text-gray-500">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-400">
                                        <path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" />
                                    </svg>
                                </dt>
                                <dd class="text-gray-700">{{ $project->client->name }}</dd>
                            </div>
                            <div class="flex items-center gap-x-2 text-sm">
                                <dt class="text-gray-500">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-400">
                                        <path fill-rule="evenodd" d="M1 2.75A.75.75 0 0 1 1.75 2h10.5a.75.75 0 0 1 0 1.5H12v13.75a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1-.75-.75v-2.5a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 1-.75.75h-1.5A.75.75 0 0 1 3 17.25V3.5h-.25A.75.75 0 0 1 1 2.75ZM6 14.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75ZM6 12a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 12Zm.75-3.75a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5ZM6 6a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 6Zm9.75 9.25a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Zm-.75-3.75a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Zm.75-5.25a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z" clip-rule="evenodd" />
                                    </svg>
                                </dt>
                                <dd class="text-gray-700">{{ $project->artist->name }}</dd>
                            </div>
                            @if($project->body_part)
                                <div class="flex items-center gap-x-2 text-sm">
                                    <dt class="text-gray-500">
                                        <svg viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-400">
                                            <path fill-rule="evenodd" d="m9.69 18.933.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 0 0 .281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 1 0 3 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 0 0 2.273 1.765 11.842 11.842 0 0 0 .976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 1 0 0-4.5 2.25 2.25 0 0 0 0 4.5Z" clip-rule="evenodd" />
                                        </svg>
                                    </dt>
                                    <dd class="text-gray-700">{{ ucfirst($project->body_part) }}</dd>
                                </div>
                            @endif
                        </dl>

                        <!-- Progress Bar -->
                        <div class="mt-4">
                            <div class="flex items-center justify-between text-sm mb-1.5">
                                <span class="text-gray-600">Progress</span>
                                <span class="font-medium text-gray-900">{{ $project->getProgressPercentage() }}%</span>
                            </div>
                            <div class="overflow-hidden rounded-full bg-gray-200">
                                <div class="h-2 rounded-full bg-indigo-600 transition-all" style="width: {{ $project->getProgressPercentage() }}%"></div>
                            </div>
                        </div>

                        <!-- Sessions & Cost -->
                        <div class="mt-4 flex items-center justify-between text-sm">
                            <span class="text-gray-600">{{ $project->getCompletedSessions() }}/{{ $project->sessions->count() }} sessions</span>
                            @if($project->estimated_total_cost)
                                <span class="font-semibold text-gray-900">${{ number_format($project->estimated_total_cost, 2) }}</span>
                            @endif
                        </div>

                        @if($project->description)
                            <p class="mt-3 text-sm text-gray-600 line-clamp-2">
                                {{ $project->description }}
                            </p>
                        @endif

                        <!-- Actions -->
                        <div class="mt-6 flex gap-x-2">
                            <a href="{{ route('crm.tattoo-projects.show', $project) }}" class="flex-1 inline-flex justify-center items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                View Details
                            </a>
                            <a href="{{ route('crm.tattoo-projects.edit', $project) }}" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="size-5">
                                    <path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z" />
                                    <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($projects->hasPages())
            <nav class="mt-8 flex items-center justify-between border-t border-gray-200 px-4 sm:px-0">
                <div class="-mt-px flex w-0 flex-1">
                    @if($projects->onFirstPage())
                        <span class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-300">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-gray-300">
                                <path d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                            Previous
                        </span>
                    @else
                        <a href="{{ $projects->previousPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                            <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-gray-400">
                                <path d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                            Previous
                        </a>
                    @endif
                </div>
                <div class="hidden md:-mt-px md:flex">
                    @foreach($projects->getUrlRange(1, $projects->lastPage()) as $page => $url)
                        @if($page == $projects->currentPage())
                            <span class="inline-flex items-center border-t-2 border-indigo-500 px-4 pt-4 text-sm font-medium text-indigo-600">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="inline-flex items-center border-t-2 border-transparent px-4 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">{{ $page }}</a>
                        @endif
                    @endforeach
                </div>
                <div class="-mt-px flex w-0 flex-1 justify-end">
                    @if($projects->hasMorePages())
                        <a href="{{ $projects->nextPageUrl() }}" class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
                            Next
                            <svg viewBox="0 0 20 20" fill="currentColor" class="ml-3 size-5 text-gray-400">
                                <path d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </a>
                    @else
                        <span class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-300">
                            Next
                            <svg viewBox="0 0 20 20" fill="currentColor" class="ml-3 size-5 text-gray-300">
                                <path d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </span>
                    @endif
                </div>
            </nav>
        @endif
    @else
        <!-- Empty State -->
        <div class="mt-16 text-center">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true" class="mx-auto size-12 text-gray-400">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5-13H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V6l-4-4z" />
            </svg>
            <h3 class="mt-2 text-sm font-semibold text-gray-900">No tattoo projects</h3>
            <p class="mt-1 text-sm text-gray-500">Get started by creating your first multi-session tattoo project.</p>
            <div class="mt-6">
                <a href="{{ route('crm.tattoo-projects.create') }}" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="mr-1.5 -ml-0.5 size-5">
                        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                    </svg>
                    New Project
                </a>
            </div>
        </div>
    @endif

<style>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endsection