@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-list me-2 text-primary"></i>Plan de Cuentas
                        </h3>
                        <a href="{{ route('admin.accounting.chart-of-accounts.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus me-2"></i>Nueva Cuenta
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Filtros de búsqueda -->
                    <form method="GET" action="{{ route('admin.accounting.chart-of-accounts.index') }}" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="fas fa-search text-muted"></i>
                                    </span>
                                    <input type="text" name="search" class="form-control" 
                                           placeholder="Buscar por código, nombre..." 
                                           value="{{ request('search') }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <select name="type" class="form-select" onchange="this.form.submit()">
                                    <option value="">Todos los tipos</option>
                                    <option value="asset" {{ request('type') == 'asset' ? 'selected' : '' }}>Activo</option>
                                    <option value="liability" {{ request('type') == 'liability' ? 'selected' : '' }}>Pasivo</option>
                                    <option value="equity" {{ request('type') == 'equity' ? 'selected' : '' }}>Patrimonio</option>
                                    <option value="revenue" {{ request('type') == 'revenue' ? 'selected' : '' }}>Ingresos</option>
                                    <option value="expense" {{ request('type') == 'expense' ? 'selected' : '' }}>Gastos</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select name="is_active" class="form-select" onchange="this.form.submit()">
                                    <option value="">Todos los estados</option>
                                    <option value="1" {{ request('is_active') == '1' ? 'selected' : '' }}>Activo</option>
                                    <option value="0" {{ request('is_active') == '0' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                @if(request()->hasAny(['search', 'type', 'is_active']))
                                    <a href="{{ route('admin.accounting.chart-of-accounts.index') }}" class="btn btn-outline-secondary w-100">
                                        <i class="fas fa-times me-1"></i>Limpiar
                                    </a>
                                @endif
                            </div>
                        </div>
                    </form>
                    
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 120px;">Código</th>
                                    <th>Nombre</th>
                                    <th style="width: 100px;">Tipo</th>
                                    <th style="width: 150px;">Categoría</th>
                                    <th style="width: 80px;" class="text-center">Nivel</th>
                                    <th style="width: 100px;" class="text-center">Estado</th>
                                    <th style="width: 120px;" class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($accounts as $account)
                                <tr>
                                    <td>
                                        <code class="text-primary">{{ $account->code }}</code>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($account->level > 1)
                                                <span class="text-muted me-2" style="width: {{ ($account->level - 1) * 20 }}px;">└</span>
                                            @endif
                                            <span>{{ $account->name }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        @php
                                            $typeColors = [
                                                'asset' => 'success',
                                                'liability' => 'danger',
                                                'equity' => 'info',
                                                'revenue' => 'warning',
                                                'expense' => 'secondary'
                                            ];
                                            $color = $typeColors[$account->type] ?? 'secondary';
                                        @endphp
                                        <span class="badge bg-{{ $color }}">
                                            {{ ucfirst($account->type) }}
                                        </span>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ $account->category ? ucfirst(str_replace('_', ' ', $account->category)) : 'N/A' }}
                                        </small>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-secondary">{{ $account->level }}</span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $account->is_active ? 'success' : 'danger' }}">
                                            {{ $account->is_active ? 'Activo' : 'Inactivo' }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ route('admin.accounting.chart-of-accounts.edit', $account) }}" 
                                               class="btn btn-outline-warning" 
                                               title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('admin.accounting.chart-of-accounts.toggle-status', $account) }}" 
                                                  method="POST" 
                                                  class="d-inline"
                                                  onsubmit="return confirm('¿Está seguro de cambiar el estado de esta cuenta?');">
                                                @csrf
                                                <button type="submit" 
                                                        class="btn btn-outline-{{ $account->is_active ? 'danger' : 'success' }}"
                                                        title="{{ $account->is_active ? 'Desactivar' : 'Activar' }}">
                                                    <i class="fas fa-{{ $account->is_active ? 'times' : 'check' }}"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-5">
                                        <i class="fas fa-inbox fa-3x text-muted mb-3 d-block"></i>
                                        <p class="text-muted mb-0">No se encontraron cuentas</p>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                
                @if($accounts->hasPages())
                <div class="card-footer bg-white border-top py-2">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <small class="text-muted">
                                Mostrando <strong>{{ $accounts->firstItem() ?? 0 }}</strong> a 
                                <strong>{{ $accounts->lastItem() ?? 0 }}</strong> de 
                                <strong>{{ $accounts->total() }}</strong> cuentas
                            </small>
                        </div>
                        <div>
                            {{ $accounts->links('vendor.pagination.compact') }}
                        </div>
                    </div>
                </div>
                @else
                <div class="card-footer bg-white border-top py-2">
                    <small class="text-muted">
                        Total: <strong>{{ $accounts->total() }}</strong> cuentas
                    </small>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Paginación compacta y mejor organizada */
    .pagination {
        margin-bottom: 0;
        font-size: 0.8rem;
        gap: 0.25rem;
    }
    
    .pagination .page-item {
        margin: 0;
    }
    
    .pagination .page-link {
        padding: 0.375rem 0.625rem;
        font-size: 0.8rem;
        line-height: 1.4;
        min-width: 2rem;
        text-align: center;
        border-radius: 0.25rem;
        border: 1px solid #dee2e6;
        color: #495057;
        background-color: #fff;
        transition: all 0.2s ease;
    }
    
    .pagination .page-link:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
        color: #495057;
    }
    
    .pagination .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
        font-weight: 500;
        z-index: 1;
    }
    
    .pagination .page-item.disabled .page-link {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: #f8f9fa;
    }
    
    /* Footer más compacto */
    .card-footer {
        padding: 0.5rem 1rem;
    }
    
    /* Ajustar tamaño de badges en la tabla */
    .table .badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        font-weight: 500;
    }
    
    /* Ajustar botones de acción */
    .btn-group-sm .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
    
    /* Mejorar espaciado del footer */
    .card-footer .d-flex {
        align-items: center;
    }
</style>
@endpush