@extends('layouts.admin')

@section('title', 'Attributes')

@section('content')
<div class="admin-page-header">
    <h1>Attributes</h1>
    @can('attributes.create')
    <a href="{{ route('admin.attributes.create') }}" class="admin-btn-primary">
        <i class="bi bi-plus"></i> Add Attribute
    </a>
    @endcan
</div>

<div class="admin-card">
    <div class="card-body">
        @if($attributes->count() > 0)
            <div class="table-responsive">
                <table class="admin-table table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Status</th>
                            <th>Values</th>
                            <th>Created At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($attributes as $attribute)
                            <tr>
                                <td>
                                    <strong>{{ $attribute->name }}</strong>
                                </td>
                                <td>
                                    @if($attribute->status === 'active')
                                        <span class="badge-modern badge-modern-success">Active</span>
                                    @else
                                        <span class="badge-modern badge-modern-primary">Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    @if($attribute->values->count() > 0)
                                        <div class="d-flex flex-wrap gap-1">
                                            @foreach($attribute->values->take(5) as $value)
                                                <span class="badge-modern badge-modern-info">{{ $value->value }}</span>
                                            @endforeach
                                            @if($attribute->values->count() > 5)
                                                <span class="badge-modern badge-modern-primary">+{{ $attribute->values->count() - 5 }} more</span>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-muted">No values</span>
                                    @endif
                                </td>
                                <td>{{ $attribute->created_at->format('M d, Y') }}</td>
                                <td>
                                    <div class="d-flex gap-2">
                                        @can('attributes.update')
                                        <a href="{{ route('admin.attributes.edit', $attribute->id) }}" 
                                           class="admin-action-btn admin-action-btn-sm admin-btn-primary"
                                           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="admin-action-btn admin-action-btn-sm"
                                                    style="background: #ef4444; height: -webkit-fill-available; color: white;"
                                                    title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Pagination - Right Aligned -->
            @if($attributes->hasPages())
            <div class="pagination-wrapper mt-4">
                <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                    <div class="pagination-info-text">
                        Showing <strong>{{ $attributes->firstItem() ?? 0 }}</strong>–<strong>{{ $attributes->lastItem() ?? 0 }}</strong> 
                        of <strong>{{ $attributes->total() }}</strong> attributes
                    </div>
                    <div class="pagination-controls">
                        {{ $attributes->links('vendor.pagination.admin-categories') }}
                    </div>
                </div>
            </div>
            @endif
        @else
            <div class="admin-empty-state">
                <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="admin-btn-primary">
                    <i class="bi bi-plus"></i> Add Attribute
                </a>
                @endcan
            </div>
        @endif
    </div>
</div>
@endsection