@extends('eliteadmin::layouts.app')

@section('title', 'Staff & Permissions')
@section('page_class', 'page-staff page-roles')

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Staff &amp; Permissions</h1>
            <nav class="breadcrumb">
                <a href="{{ route('dashboard') }}" class="breadcrumb-item">Home</a>
                <span class="breadcrumb-item active">Staff &amp; Permissions</span>
            </nav>
        </div>
        <div class="page-header-actions">
            @if ($activeTab === 'staff' && ($canStaff ?? false))
                @can('create', \App\Models\User::class)
                    <a href="{{ route('staff.create') }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-plus-lg me-1"></i> Add Staff
                    </a>
                @endcan
            @elseif ($activeTab === 'roles' && ($canRoles ?? false))
                @can('create', \App\Models\Role::class)
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRoleModal">
                        <i class="bi bi-plus-lg me-1"></i> Add Role
                    </button>
                @endcan
            @endif
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-body p-2">
            <ul class="nav nav-tabs nav-tabs-bordered flex-column flex-sm-row" role="tablist">
                @if ($canStaff ?? false)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ $activeTab === 'staff' ? 'active' : '' }}"
                           href="{{ route('staff.index', array_merge(['tab' => 'staff'], request()->only('search'))) }}"
                           role="tab">
                            <i class="bi bi-people me-1"></i> Staff
                        </a>
                    </li>
                @endif
                @if ($canRoles ?? false)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ $activeTab === 'roles' ? 'active' : '' }}"
                           href="{{ route('staff.index', ['tab' => 'roles', 'role' => $selectedRole?->id]) }}"
                           role="tab">
                            <i class="bi bi-shield-check me-1"></i> Roles &amp; Permissions
                        </a>
                    </li>
                @endif
                @if ($canStaff ?? false)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {{ $activeTab === 'customers' ? 'active' : '' }}"
                           href="{{ route('staff.index', ['tab' => 'customers']) }}"
                           role="tab">
                            <i class="bi bi-person-badge me-1"></i> Customers
                        </a>
                    </li>
                @endif
            </ul>
        </div>
    </div>

    @if ($activeTab === 'staff' && ($canStaff ?? false))
        @include('staff.partials.staff-list')
    @elseif ($activeTab === 'customers' && ($canStaff ?? false))
        @include('staff.partials.customers-list', ['customers' => $customers ?? collect()])
    @elseif ($activeTab === 'roles' && ($canRoles ?? false))
        @include('roles.partials.permissions-panel')
    @endif
@endsection

@if (($activeTab ?? '') === 'roles' && ($errors->has('name') || session('success')))
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var modal = document.getElementById('addRoleModal');
                if (modal && @json($errors->has('name'))) {
                    bootstrap.Modal.getOrCreateInstance(modal).show();
                }
            });
        </script>
    @endpush
@endif