{{-- resources/views/rooms/categories/index.blade.php --}}
@extends('layouts.app')
@section('title', 'Room Categories')
@section('page_title', 'Room Categories')
@section('page_subtitle', 'Manage room types and categories')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <span style="font-size:.8rem;color:var(--muted);">
            {{ $categories->count() }} categories
        </span>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ tenant_route('rooms.index') }}"
           class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-door-open me-1"></i>All Rooms
        </a>
        <a href="{{ tenant_route('rooms.categories.create') }}"
           class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg me-1"></i>New Category
        </a>
    </div>
</div>

@if($categories->isEmpty())
    <div class="card">
        <div class="card-body text-center py-5">
            <i class="bi bi-grid" style="font-size:2.5rem;color:var(--muted)"></i>
            <p class="fw-semibold mt-3 mb-1">No room categories yet</p>
            <p class="text-muted" style="font-size:.82rem;">
                Create categories like Standard, Deluxe, Suite etc.
            </p>
            <a href="{{ tenant_route('rooms.categories.create') }}"
               class="btn btn-primary btn-sm mt-2">
                Create First Category
            </a>
        </div>
    </div>
@else
    <div class="row g-3">
        @foreach($categories as $category)
            <div class="col-md-6 col-xl-4">
                <div class="card h-100">

                    {{-- Cover image --}}
                    @php $cover = $category->images->where('is_cover', true)->first()
                                ?? $category->images->first(); @endphp
                    @if($cover)
                        <div style="height:140px;overflow:hidden;
                                    border-radius:10px 10px 0 0;">
                            <img src="{{ asset('storage/' . $cover->path) }}"
                                 alt="{{ $category->name }}"
                                 style="width:100%;height:100%;object-fit:cover;">
                        </div>
                    @else
                        <div style="height:100px;background:var(--bg);
                                    border-radius:10px 10px 0 0;
                                    display:flex;align-items:center;
                                    justify-content:center;">
                            <i class="bi bi-door-open"
                               style="font-size:2rem;color:var(--border)"></i>
                        </div>
                    @endif

                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h6 class="fw-bold mb-0">{{ $category->name }}</h6>
                                @if($category->bed_type)
                                    <span style="font-size:.72rem;color:var(--muted);">
                                        {{ $category->bed_type }}
                                    </span>
                                @endif
                            </div>
                            @if(!$category->is_active)
                                <span style="font-size:.68rem;background:#fee2e2;
                                             color:#991b1b;padding:2px 8px;
                                             border-radius:20px;font-weight:600;">
                                    Inactive
                                </span>
                            @endif
                        </div>

                        @if($category->description)
                            <p style="font-size:.77rem;color:var(--muted);
                                      line-height:1.5;margin-bottom:10px;">
                                {{ Str::limit($category->description, 80) }}
                            </p>
                        @endif

                        <div style="display:flex;gap:14px;
                                    font-size:.75rem;color:var(--muted);
                                    margin-bottom:12px;">
                            <span>
                                <i class="bi bi-people me-1"></i>
                                Max {{ $category->max_occupancy }}
                            </span>
                            @if($category->size_sqm)
                                <span>
                                    <i class="bi bi-aspect-ratio me-1"></i>
                                    {{ $category->size_sqm }}m²
                                </span>
                            @endif
                            <span>
                                <i class="bi bi-door-open me-1"></i>
                                {{ $category->rooms_count }}
                                {{ Str::plural('room', $category->rooms_count) }}
                            </span>
                        </div>

                        @if(!empty($category->amenities))
                            <div style="display:flex;flex-wrap:wrap;gap:4px;
                                        margin-bottom:12px;">
                                @foreach(array_slice($category->amenities, 0, 4) as $amenity)
                                    <span style="font-size:.65rem;background:var(--bg);
                                                 color:var(--muted);padding:2px 7px;
                                                 border-radius:4px;border:1px solid var(--border);">
                                        {{ $amenity }}
                                    </span>
                                @endforeach
                                @if(count($category->amenities) > 4)
                                    <span style="font-size:.65rem;color:var(--muted);">
                                        +{{ count($category->amenities) - 4 }} more
                                    </span>
                                @endif
                            </div>
                        @endif

                        <div class="d-flex gap-2">
                            <a href="{{ tenant_route('rooms.categories.show', ['category' => $category->id]) }}"
                               class="btn btn-sm btn-outline-secondary flex-fill">
                                View
                            </a>
                            <a href="{{ tenant_route('rooms.categories.edit', ['category' => $category->id]) }}"
                               class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form method="POST"
                                  action="{{ tenant_route('rooms.categories.destroy', ['category' => $category->id]) }}"
                                  onsubmit="return confirm('Delete this category?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger"
                                        type="submit">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
@endif

@endsection