@extends('layouts.admin')

@section('title', 'Attributes')

@section('content')
@php
    $sortKey = $sortKey ?? 'name_asc';
    $stats = $stats ?? ['total' => 0, 'active' => 0, 'inactive' => 0, 'values' => 0];
@endphp

<div class="ci-page">
    <nav class="ci-crumb" aria-label="Breadcrumb">
        <span>Catalogue</span>
        <span class="ci-crumb__sep">/</span>
        <span class="ci-crumb__current">Attributes</span>
    </nav>

    <div class="ci-header">
        <div>
            <h1>Attributes</h1>
            <p class="ci-header__sub">Define product attributes and their selectable values.</p>
        </div>
        <div class="ci-header__actions">
            @can('attributes.create')
                <a href="{{ route('admin.attributes.create') }}" class="ci-btn ci-btn--primary">
                    <i class="bi bi-plus-lg"></i> Add Attribute
                </a>
            @endcan
        </div>
    </div>

    <div class="ci-stats">
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Total</p>
                <p class="ci-stat__value">{{ number_format($stats['total']) }}</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-list-check"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Active</p>
                <p class="ci-stat__value ci-stat__value--success">{{ number_format($stats['active']) }}</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-check-circle"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Inactive</p>
                <p class="ci-stat__value ci-stat__value--warning">{{ number_format($stats['inactive']) }}</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-pause-circle"></i></span>
        </div>
        <div class="ci-stat">
            <div>
                <p class="ci-stat__label">Values</p>
                <p class="ci-stat__value">{{ number_format($stats['values']) }}</p>
            </div>
            <span class="ci-stat__icon"><i class="bi bi-collection"></i></span>
        </div>
    </div>

    <form method="GET" action="{{ route('admin.attributes.index') }}" class="ci-filters">
        <div class="row g-2 align-items-center justify-content-end flex-nowrap">
            <div class="col-lg-2">
                <div class="products-search-wrap">
                    <i class="bi bi-search"></i>
                    <input type="text"
                           name="search"
                           class="admin-form-control form-control"
                           placeholder="Search attributes…"
                           value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-lg-2">
                <select name="status" onchange="this.form.submit()">
                    <option value="">All status</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-lg-2">
                <select name="sort" onchange="this.form.submit()">
                    <option value="name_asc" {{ $sortKey === 'name_asc' ? 'selected' : '' }}>Name A–Z</option>
                    <option value="name_desc" {{ $sortKey === 'name_desc' ? 'selected' : '' }}>Name Z–A</option>
                    <option value="values_count_desc" {{ $sortKey === 'values_count_desc' ? 'selected' : '' }}>Most values</option>
                    <option value="values_count_asc" {{ $sortKey === 'values_count_asc' ? 'selected' : '' }}>Fewest values</option>
                    <option value="updated_at_desc" {{ $sortKey === 'updated_at_desc' ? 'selected' : '' }}>Recently updated</option>
                </select>
            </div>
            <div class="ci-filters__actions col-lg-2">
                <button type="submit" class="ci-btn ci-btn--primary">Filter</button>
                @if(request()->hasAny(['search','status','sort']))
                    <a href="{{ route('admin.attributes.index') }}" class="ci-btn ci-btn--ghost ci-btn--icon" title="Clear filters">
                        <i class="bi bi-arrow-clockwise"></i>
                    </a>
                @endif
            </div>
            <div class="ci-filters__count col-auto text-end">
                Showing <strong>{{ $attributes->count() }}</strong> of <strong>{{ $attributes->total() }}</strong> attributes
            </div>
        </div>
    </form>

    <div class="ci-table-card">
        <div class="ci-table-wrap">
            <table class="ci-table">
                <thead>
                    <tr>
                        <th>Attribute</th>
                        <th>Values</th>
                        <th>Status</th>
                        <th>Updated</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($attributes as $attribute)
                        @php
                            $initials = strtoupper(mb_substr($attribute->name, 0, 2));
                            $valueCount = $attribute->values_count ?? $attribute->values->count();
                        @endphp
                        <tr>
                            <td>
                                <div class="ci-entity">
                                    <span class="ci-avatar">{{ $initials }}</span>
                                    <div class="ci-entity__meta">
                                        <p class="ci-entity__name">{{ $attribute->name }}</p>
                                        @if($attribute->slug)
                                            <p class="ci-entity__sub">{{ $attribute->slug }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($valueCount > 0)
                                    <div class="ci-chips">
                                        @foreach($attribute->values->take(4) as $value)
                                            <span class="ci-pill ci-pill--chip">{{ $value->value }}</span>
                                        @endforeach
                                        <span class="ci-pill ci-pill--count">{{ $valueCount }}</span>
                                    </div>
                                @else
                                    <span class="ci-muted">No values</span>
                                @endif
                            </td>
                            <td>
                                <span class="ci-pill {{ $attribute->status === 'active' ? 'ci-pill--active' : 'ci-pill--inactive' }}">
                                    {{ $attribute->status === 'active' ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td class="ci-muted">
                                {{ optional($attribute->updated_at ?? $attribute->created_at)->format('M d, Y') ?? '—' }}
                            </td>
                            <td>
                                <div class="ci-actions">
                                    @can('attributes.update')
                                        <a href="{{ route('admin.attributes.edit', $attribute->id) }}"
                                           class="ci-btn ci-btn--ghost ci-btn--icon"
                                           title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                    @endcan
                                    @can('attributes.delete')
                                        <form action="{{ route('admin.attributes.destroy', $attribute->id) }}"
                                              method="POST"
                                              class="d-inline"
                                              onsubmit="return confirm('Are you sure you want to delete this attribute?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="ci-btn ci-btn--danger-outline ci-btn--icon" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5">
                                <div class="ci-empty">
                                    <i class="bi bi-list-check"></i>
                                    <h3>No Attributes Found</h3>
                                    @can('attributes.create')
                                        <p>Get started by creating your first attribute.</p>
                                        <a href="{{ route('admin.attributes.create') }}" class="ci-btn ci-btn--primary">
                                            <i class="bi bi-plus-lg"></i> Add Attribute
                                        </a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($attributes->hasPages())
        <div class="ci-pagination">
            <div class="ci-pagination__info">
                Showing <strong>{{ $attributes->firstItem() ?? 0 }}</strong>–<strong>{{ $attributes->lastItem() ?? 0 }}</strong>
                of <strong>{{ $attributes->total() }}</strong>
            </div>
            <div>
                {{ $attributes->links('vendor.pagination.admin-categories') }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection