@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/components/roles.css') }}">
@endpush

@section('content')
<div class="modern-page-container">
    <!-- Header da página -->
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <h1 class="page-title">Papéis</h1>
                <p class="page-subtitle">Gerencie os papéis e permissões do sistema</p>
            </div>
            @can('roles.create')
            <a href="{{ route('roles.create') }}" class="btn-modern btn-primary">
                <i class="bi bi-plus-lg"></i>
                <span>Novo Papel</span>
            </a>
            @endcan
        </div>
    </div>

    <!-- Filtros -->
    <div class="filters-card">
        <form action="{{ route('roles.index') }}" method="GET" class="filters-form">
            <div class="filters-grid">
                <div class="filter-group filter-search">
                    <div class="search-input-wrapper">
                        <i class="bi bi-search search-icon"></i>
                        <input type="text" 
                               class="form-control-modern search-input" 
                               placeholder="Buscar por nome ou descrição..." 
                               name="search" 
                               value="{{ request('search') }}">
                        <button type="submit" class="search-button">
                            Buscar
                        </button>
                        @if(request()->hasAny(['search', 'per_page']))
                            <a href="{{ route('roles.index') }}" class="clear-filters-btn">
                                <i class="bi bi-x-lg"></i>
                            </a>
                        @endif
                    </div>
                </div>
                <div class="filter-group">
                    <select name="per_page" class="form-select-modern" onchange="this.form.submit()">
                        @foreach($perPageOptions as $option)
                            <option value="{{ $option }}" {{ request('per_page', 10) == $option ? 'selected' : '' }}>
                                {{ $option }} por página
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
    </div>

    <!-- Tabela de papéis -->
    <div class="data-card">
        <div class="table-wrapper">
            <table class="table-modern">
                <thead>
                    <tr>
                        <th>
                            <a href="{{ route('roles.index', array_merge(request()->query(), [
                                'sort' => 'name',
                                'direction' => request('sort') === 'name' && request('direction') === 'asc' ? 'desc' : 'asc'
                            ])) }}" class="table-sort-link">
                                Nome
                                @if(request('sort') === 'name')
                                    <i class="bi bi-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} sort-icon"></i>
                                @endif
                            </a>
                        </th>
                        <th>
                            <a href="{{ route('roles.index', array_merge(request()->query(), [
                                'sort' => 'description',
                                'direction' => request('sort') === 'description' && request('direction') === 'asc' ? 'desc' : 'asc'
                            ])) }}" class="table-sort-link">
                                Descrição
                                @if(request('sort') === 'description')
                                    <i class="bi bi-arrow-{{ request('direction') === 'asc' ? 'up' : 'down' }} sort-icon"></i>
                                @endif
                            </a>
                        </th>
                        <th>Usuários</th>
                        <th class="actions-column">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($roles as $role)
                    <tr class="table-row">
                        <td>
                            <div class="role-info">
                                <div class="role-icon">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                                <span class="role-name">{{ $role->name }}</span>
                            </div>
                        </td>
                        <td>
                            <span class="role-description">{{ $role->description }}</span>
                        </td>
                        <td>
                            <span class="users-count-badge">{{ $role->users_count }} usuário(s)</span>
                        </td>
                        <td>
                            <div class="action-buttons">
                                @can('roles.edit')
                                <a href="{{ route('roles.edit', $role) }}" 
                                   class="action-btn edit-btn" 
                                   title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                @endcan

                                @can('roles.delete')
                                <form action="{{ route('roles.destroy', $role) }}" 
                                      method="POST" 
                                      class="d-inline"
                                      onsubmit="return confirm('Tem certeza que deseja excluir este papel?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="action-btn delete-btn" 
                                            title="Excluir">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4">
                            <div class="empty-state">
                                <div class="empty-state-icon">
                                    <i class="bi bi-shield-check"></i>
                                </div>
                                <h3 class="empty-state-title">
                                    @if(request()->hasAny(['search', 'per_page']))
                                        Nenhum papel encontrado
                                    @else
                                        Nenhum papel cadastrado
                                    @endif
                                </h3>
                                <p class="empty-state-description">
                                    @if(request()->hasAny(['search', 'per_page']))
                                        Nenhum papel encontrado com os filtros aplicados.
                                    @else
                                        Comece criando o primeiro papel do sistema.
                                    @endif
                                </p>
                                @if(request()->hasAny(['search', 'per_page']))
                                    <a href="{{ route('roles.index') }}" class="btn-modern btn-outline">
                                        <i class="bi bi-x-lg"></i>
                                        <span>Limpar filtros</span>
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($roles->hasPages())
        <div class="pagination-wrapper">
            <div class="pagination-info">
                Mostrando {{ $roles->firstItem() ?? 0 }}-{{ $roles->lastItem() ?? 0 }} de {{ $roles->total() }} registros
            </div>
            <div class="pagination-links">
                {{ $roles->links() }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection