@extends('layouts.app', ['title' => 'Controles de acesso'])
@section('content')

<style>
.modern-list-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.modern-list-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px 32px;
    color: white;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.modern-list-header h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-add-modern {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    color: white;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-add-modern:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    color: white;
    transform: translateY(-2px);
}

.search-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-card label {
    color: #e2e8f0;
    font-weight: 600;
    margin-bottom: 8px;
}

.search-card .form-control {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    padding: 10px 16px;
    color: #1e293b;
}

.search-card .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}

.btn-search-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-search-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-clear-modern {
    background: rgba(220, 53, 69, 0.9);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-clear-modern:hover {
    background: rgba(220, 53, 69, 1);
    transform: translateY(-2px);
    color: white;
}

.table-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.total-count {
    color: #a5b4fc;
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 600;
}

.total-count strong {
    color: #10b981;
    font-size: 18px;
}

.modern-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.modern-table thead th {
    background: rgba(102, 126, 234, 0.2);
    color: #a5b4fc;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 16px;
    border: none;
    white-space: nowrap;
}

.modern-table thead th:first-child {
    border-radius: 10px 0 0 10px;
}

.modern-table thead th:last-child {
    border-radius: 0 10px 10px 0;
}

.modern-table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.modern-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.1);
    transform: scale(1.01);
}

.modern-table tbody td {
    padding: 16px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.btn-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s ease;
    padding: 0;
}

.btn-action:hover {
    transform: translateY(-2px);
}

.btn-action-edit {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.btn-action-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}
</style>

<div class="modern-list-container">
    <div class="modern-list-header">
        <h4>
            <i class="ri-shield-keyhole-line"></i>
            Controles de Acesso
        </h4>
        @can('controle_acesso_create')
        <a href="{{ route('controle-acesso.create') }}" class="btn-add-modern">
            <i class="ri-add-circle-fill"></i>
            Novo Controle de Acesso
        </a>
        @endcan
    </div>

    <div class="search-card">
        {!!Form::open()->fill(request()->all())->get()!!}
        <div class="row align-items-end g-3">
            <div class="col-md-6">
                {!!Form::text('descricao', 'Pesquisar por descrição')!!}
            </div>
            <div class="col-md-6">
                <button class="btn-search-modern" type="submit">
                    <i class="ri-search-line"></i>
                    Pesquisar
                </button>
                <a class="btn-clear-modern" href="{{ route('controle-acesso.index') }}">
                    <i class="ri-eraser-fill"></i>
                    Limpar
                </a>
            </div>
        </div>
        {!!Form::close()!!}
    </div>

    <div class="table-card">
        <div class="total-count">
            Total de registros: <strong>{{ $data->total() }}</strong>
        </div>

        <div class="table-responsive">
            <table class="modern-table">
                <thead>
                    <tr>
                        <th>Descrição</th>
                        <th>Data de cadastro</th>
                        <th>Data de atualização</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data as $item)
                    <tr>
                        <td><strong>{{ $item->description }}</strong></td>
                        <td>{{ __data_pt($item->created_at) }}</td>
                        <td>{{ __data_pt($item->updated_at) }}</td>
                        <td>
                            <form action="{{ route('controle-acesso.destroy', $item->id) }}" method="post" id="form-{{$item->id}}">
                                @method('delete')
                                @csrf
                                <div class="action-buttons">
                                    @can('controle_acesso_edit')
                                    <a class="btn-action btn-action-edit" href="{{ route('controle-acesso.edit', [$item->id]) }}" title="Editar">
                                        <i class="ri-pencil-fill"></i>
                                    </a>
                                    @endcan
                                    @can('controle_acesso_delete')
                                    <button type="button" class="btn-action btn-action-delete btn-delete" title="Excluir">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                    @endcan
                                </div>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4">
                            <div class="empty-state">
                                <i class="ri-shield-keyhole-line"></i>
                                <p>Nenhum controle de acesso encontrado</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="mt-4">
            {!! $data->appends(request()->all())->links() !!}
        </div>
    </div>
</div>
@endsection