@extends('layouts.app')

@section('title', 'Gestion des Rayons')

@section('content')
<div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8 pb-32"
     x-data="checklistComponent({
         canModerate: {{ auth()->user()->isAdmin() || auth()->user()->canSuperviseTeam() ? 'true' : 'false' }},
         storeId: {{ $activeStoreId ?? 'null' }},
         userId: {{ auth()->id() }},
         userName: '{{ trim(auth()->user()->first_name . ' ' . auth()->user()->last_name) }}'
     })"
     x-init="@if(auth()->user()->isAdmin() || auth()->user()->canSuperviseTeam()) loadTeam(); loadStoreDepartments(); @else loadMyDepartments(); @endif"
     x-cloak>

    <!-- En-tête -->
    <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-indigo-600 to-indigo-700 rounded-2xl mb-4 shadow-lg">
            <i data-lucide="package" class="w-8 h-8 text-white"></i>
        </div>
        <h1 class="text-3xl font-display font-bold text-boulanger-dark">
            Gestion des Rayons
        </h1>
        <p class="mt-2 text-gray-600">
            @if(auth()->user()->isAdmin() || auth()->user()->canSuperviseTeam())
                Créez des rayons et assignez les vendeurs
            @else
                Consultez vos rayons attribués
            @endif
        </p>
    </div>

    @if(auth()->user()->isAdmin() || auth()->user()->isManager() || auth()->user()->isAnimateur())
        <!-- Vue Manager/Animateur -->
        @include('checklists.partials.manager-departments-tab')
    @else
        <!-- Vue Vendeur -->
        @include('checklists.partials.vendor-departments-tab')
    @endif
</div>
@endsection