@extends('layouts.app')
@section('title', 'Attributes')

@section('breadcrumb')
<li class="breadcrumb-item active">Attributes</li>
@endsection

@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title">
            <i class="bi bi-sliders me-2" style="color:#1d4ed8;"></i>Attributes
        </h1>
        <p class="page-subtitle">Variation attributes (Color, Size, RAM ইত্যাদি) ও তাদের values manage করুন</p>
    </div>
    @can_permission('attributes.create')
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createAttributeModal">
        <i class="bi bi-plus-lg me-1"></i> Add Attribute
    </button>
    @endcan_permission
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="d-flex gap-2">
            <input type="text" name="search" class="form-control" style="max-width:320px;"
                   placeholder="Search attributes..." value="{{ $search }}">
            <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
            @if($search)
            <a href="{{ route('attributes.index') }}" class="btn btn-outline-danger"><i class="bi bi-x"></i></a>
            @endif
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-sliders me-2"></i>All Attributes ({{ $attributes->total() }})</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Attribute Name</th>
                        <th>Values</th>
                        <th width="90">Sort</th>
                        <th width="100">Status</th>
                        <th width="150">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($attributes as $attribute)
                    <tr>
                        <td class="fw-semibold">{{ $attribute->name }}</td>
                        <td>
                            @forelse($attribute->values->take(8) as $val)
                            <span class="badge bg-light text-dark border" style="font-size:.7rem;">{{ $val->value }}</span>
                            @empty
                            <span class="text-muted" style="font-size:.8rem;">কোনো value যোগ করা হয়নি</span>
                            @endforelse
                            @if($attribute->values->count() > 8)
                            <span class="text-muted" style="font-size:.75rem;">+{{ $attribute->values->count() - 8 }} more</span>
                            @endif
                        </td>
                        <td>{{ $attribute->sort_order }}</td>
                        <td>
                            <span class="badge {{ $attribute->is_active ? 'bg-success' : 'bg-danger' }}">
                                {{ $attribute->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <div class="d-flex gap-1 flex-wrap">
                                @can_permission('attributes.edit')
                                <a href="{{ route('attributes.edit', $attribute) }}"
                                   class="btn btn-sm btn-outline-primary" title="Manage Values">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endcan_permission
                                @can_permission('attributes.delete')
                                <form method="POST" action="{{ route('attributes.destroy', $attribute) }}"
                                      onsubmit="return confirm('Delete \'{{ $attribute->name }}\'?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endcan_permission
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="bi bi-sliders" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                            কোনো attribute পাওয়া যায়নি।
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($attributes->hasPages())
    <div class="card-footer">
        {{ $attributes->links() }}
    </div>
    @endif
</div>

{{-- ══ CREATE ATTRIBUTE MODAL ══════════════════════════════════════════════ --}}
@can_permission('attributes.create')
<div class="modal fade" id="createAttributeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius:14px;border:none;">
            <form method="POST" action="{{ route('attributes.store') }}">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">
                        <i class="bi bi-sliders me-2 text-primary"></i>Add Attribute
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Attribute Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g. Color, Size, RAM">
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Sort Order</label>
                            <input type="number" name="sort_order" class="form-control" value="0" min="0">
                        </div>
                        <div class="col-6 d-flex align-items-end pb-1">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="is_active" value="1" checked>
                                <label class="form-check-label">Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-1"></i>Save Attribute
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endcan_permission

@endsection