@extends('layouts.app')

@section('title', 'Solicitudes de Acceso')

@section('breadcrumbs')
    <li class="breadcrumb-item">Empresa</li>
    <li class="breadcrumb-item active">Solicitudes de Acceso</li>
@endsection

@section('content')
<!-- Mensajes de estado -->
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-user-plus"></i> Solicitudes de Acceso
    </h2>
    <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle" 
                data-bs-toggle="dropdown">
            <i class="fas fa-cog"></i> Acciones
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" onclick="refreshData()">
                <i class="fas fa-sync-alt"></i> Actualizar
            </a></li>
            <li><a class="dropdown-item" href="#" onclick="exportRequests()">
                <i class="fas fa-download"></i> Exportar
            </a></li>
        </ul>
    </div>
</div>

<!-- Estadísticas Rápidas -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card mini">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['total'] ?? 0 }}</h4>
                    <small>Total</small>
                </div>
                <i class="fas fa-user-plus fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card mini info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['new'] ?? 0 }}</h4>
                    <small>Nuevas</small>
                </div>
                <i class="fas fa-star fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card mini success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['approved'] ?? 0 }}</h4>
                    <small>Aprobadas</small>
                </div>
                <i class="fas fa-check-circle fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card mini danger">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['rejected'] ?? 0 }}</h4>
                    <small>Rechazadas</small>
                </div>
                <i class="fas fa-times-circle fs-3"></i>
            </div>
        </div>
    </div>
</div>

<!-- Filtros -->
<div class="card mb-4">
    <div class="card-body">
        <form id="filterForm" method="GET">
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Buscar</label>
                    <input type="text" class="form-control" name="search" 
                           value="{{ request('search') }}" placeholder="Empresa, nombre o email...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Estado</label>
                    <select class="form-select" name="status">
                        <option value="">Todos</option>
                        <option value="new" {{ request('status') === 'new' ? 'selected' : '' }}>Nuevas</option>
                        <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Aprobadas</option>
                        <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rechazadas</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tipo de Negocio</label>
                    <select class="form-select" name="business_type">
                        <option value="">Todos</option>
                        <option value="retail" {{ request('business_type') === 'retail' ? 'selected' : '' }}>Retail</option>
                        <option value="services" {{ request('business_type') === 'services' ? 'selected' : '' }}>Servicios</option>
                        <option value="manufacturing" {{ request('business_type') === 'manufacturing' ? 'selected' : '' }}>Manufactura</option>
                        <option value="technology" {{ request('business_type') === 'technology' ? 'selected' : '' }}>Tecnología</option>
                        <option value="other" {{ request('business_type') === 'other' ? 'selected' : '' }}>Otro</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Tamaño</label>
                    <select class="form-select" name="company_size">
                        <option value="">Todos</option>
                        <option value="1-10" {{ request('company_size') === '1-10' ? 'selected' : '' }}>1-10</option>
                        <option value="11-50" {{ request('company_size') === '11-50' ? 'selected' : '' }}>11-50</option>
                        <option value="51-200" {{ request('company_size') === '51-200' ? 'selected' : '' }}>51-200</option>
                        <option value="200+" {{ request('company_size') === '200+' ? 'selected' : '' }}>200+</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <div class="btn-group w-100">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Filtrar
                        </button>
                        <a href="{{ route('access-requests.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Tabla de Solicitudes -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Lista de Solicitudes</h5>
        <div class="d-flex align-items-center">
            <span class="badge bg-secondary me-2">{{ $pagination['total_items'] ?? count($requests) }} resultados</span>
        </div>
    </div>
    <div class="card-body p-0">
        @if(isset($requests) && count($requests) > 0)
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>
                            <div class="d-flex align-items-center">
                                <span>Empresa</span>
                                <i class="fas fa-sort ms-1 text-muted" style="font-size: 0.8em;"></i>
                            </div>
                        </th>
                        <th>Solicitante</th>
                        <th>
                            <div class="d-flex align-items-center">
                                <span>Prioridad/Score</span>
                                <i class="fas fa-sort ms-1 text-muted" style="font-size: 0.8em;"></i>
                            </div>
                        </th>
                        <th>Calificación</th>
                        <th>
                            <div class="d-flex align-items-center">
                                <span>Fecha</span>
                                <i class="fas fa-sort ms-1 text-muted" style="font-size: 0.8em;"></i>
                            </div>
                        </th>
                        <th>Estado</th>
                        <th class="text-end">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($requests as $requestData)
                    @php
                        // Extraer valores directamente del array
                        $requestId = $requestData['_id'] ?? '';
                        $createdAt = $requestData['created_at'] ?? '';
                        $updatedAt = $requestData['updated_at'] ?? '';
                    @endphp
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="business-avatar me-3">
                                    {{ substr($requestData['company'] ?? 'N/A', 0, 2) }}
                                </div>
                                <div>
                                    <strong>{{ $requestData['company'] ?? 'N/A' }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-industry"></i> {{ ucfirst($requestData['business_type'] ?? 'N/A') }}
                                    </small>
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-users"></i> {{ $requestData['company_size'] ?? 'N/A' }} empleados
                                    </small>
                                    @if(isset($requestData['source']))
                                        <br><small class="badge badge-outline-info">{{ $requestData['source'] }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <div>
                                <strong>{{ $requestData['name'] ?? 'N/A' }}</strong>
                                @if(isset($requestData['position']))
                                    <br><small class="text-muted"><i class="fas fa-briefcase"></i> {{ $requestData['position'] }}</small>
                                @endif
                                <br>
                                <small class="text-muted"><i class="fas fa-envelope"></i> {{ $requestData['email'] ?? 'N/A' }}</small>
                                @if(isset($requestData['phone']))
                                    <br><small class="text-muted"><i class="fas fa-phone"></i> {{ $requestData['phone'] }}</small>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="text-center">
                                @php
                                    $priority = $requestData['priority'] ?? 3;
                                    $leadScore = $requestData['lead_score'] ?? 0;
                                    $priorityColor = $priority <= 2 ? 'success' : ($priority == 3 ? 'warning' : 'danger');
                                    $scoreColor = $leadScore >= 70 ? 'success' : ($leadScore >= 40 ? 'warning' : 'danger');
                                @endphp
                                <div class="mb-2">
                                    <span class="badge bg-{{ $priorityColor }}">
                                        <i class="fas fa-star"></i> P{{ $priority }}
                                    </span>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar bg-{{ $scoreColor }}" 
                                         style="width: {{ $leadScore }}%"
                                         title="Lead Score: {{ $leadScore }}%"></div>
                                </div>
                                <small class="text-muted">{{ $leadScore }}% score</small>
                            </div>
                        </td>
                        <td>
                            @php
                                $qualificationStatus = $requestData['qualification_status'] ?? 'unqualified';
                                $qualificationColor = $qualificationStatus === 'qualified' ? 'success' : 'warning';
                                $qualificationText = $qualificationStatus === 'qualified' ? 'Calificado' : 'Sin calificar';
                                $qualificationIcon = $qualificationStatus === 'qualified' ? 'fas fa-check-circle' : 'fas fa-clock';
                            @endphp
                            <span class="badge bg-{{ $qualificationColor }}">
                                <i class="{{ $qualificationIcon }}"></i> {{ $qualificationText }}
                            </span>
                            @if(isset($requestData['demo_scheduled']) && $requestData['demo_scheduled'])
                                <br><small class="badge bg-info mt-1">
                                    <i class="fas fa-calendar"></i> Demo programada
                                </small>
                            @endif
                        </td>
                        <td>
                            <div>
                                {{ date('d/m/Y', strtotime($createdAt)) }}
                                <br>
                                <small class="text-muted">{{ date('H:i', strtotime($createdAt)) }}</small>
                                @if($createdAt !== $updatedAt)
                                    <br><small class="text-muted">
                                        <i class="fas fa-edit"></i> {{ \Carbon\Carbon::parse($updatedAt)->diffForHumans() }}
                                    </small>
                                @endif
                            </div>
                        </td>
                        <td>
                            @php
                                $statusClass = 'secondary';
                                $statusText = 'Desconocido';
                                $statusIcon = 'fas fa-question';
                                
                                switch($requestData['status'] ?? '') {
                                    case 'new':
                                        $statusClass = 'info';
                                        $statusText = 'Nueva';
                                        $statusIcon = 'fas fa-star';
                                        break;
                                    case 'pending':
                                        $statusClass = 'warning';
                                        $statusText = 'Pendiente';
                                        $statusIcon = 'fas fa-clock';
                                        break;
                                    case 'approved':
                                        $statusClass = 'success';
                                        $statusText = 'Aprobada';
                                        $statusIcon = 'fas fa-check';
                                        break;
                                    case 'rejected':
                                        $statusClass = 'danger';
                                        $statusText = 'Rechazada';
                                        $statusIcon = 'fas fa-times';
                                        break;
                                }
                            @endphp
                            <span class="badge bg-{{ $statusClass }}">
                                <i class="{{ $statusIcon }}"></i> {{ $statusText }}
                            </span>
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('access-requests.show', $requestId) }}" 
                                   class="btn btn-outline-primary" title="Ver detalles">
                                    <i class="fas fa-eye"></i>
                                </a>
                                
                                @if(in_array($requestData['status'] ?? '', ['new', 'pending']))
                                <button type="button" class="btn btn-outline-success" 
                                        onclick="approveRequest('{{ $requestId }}')" title="Aprobar">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" 
                                        onclick="rejectRequest('{{ $requestId }}')" title="Rechazar">
                                    <i class="fas fa-times"></i>
                                </button>
                                @endif
                                
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                                            data-bs-toggle="dropdown">
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item" href="{{ route('access-requests.show', $requestId) }}">
                                            <i class="fas fa-eye"></i> Ver Detalles
                                        </a></li>
                                        @if(isset($requestData['message']) && trim($requestData['message']))
                                        <li><a class="dropdown-item" href="#" onclick="showMessage(`{{ addslashes($requestData['message']) }}`)">
                                            <i class="fas fa-comment"></i> Ver Mensaje
                                        </a></li>
                                        @endif
                                        @if(in_array($requestData['status'] ?? '', ['new', 'pending']))
                                        <li><hr class="dropdown-divider"></li>
                                        <li><a class="dropdown-item text-success" href="#" onclick="approveRequest('{{ $requestId }}')">
                                            <i class="fas fa-check"></i> Aprobar
                                        </a></li>
                                        <li><a class="dropdown-item text-danger" href="#" onclick="rejectRequest('{{ $requestId }}')">
                                            <i class="fas fa-times"></i> Rechazar
                                        </a></li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        @if(isset($pagination) && isset($pagination['total_pages']) && $pagination['total_pages'] > 1)
        <div class="card-footer">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0">
                    @if($pagination['current_page'] > 1)
                        <li class="page-item">
                            <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] - 1]) }}">
                                <i class="fas fa-chevron-left"></i> Anterior
                            </a>
                        </li>
                    @endif
                    
                    @for($i = 1; $i <= $pagination['total_pages']; $i++)
                        <li class="page-item {{ $i == $pagination['current_page'] ? 'active' : '' }}">
                            <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $i]) }}">{{ $i }}</a>
                        </li>
                    @endfor
                    
                    @if($pagination['current_page'] < $pagination['total_pages'])
                        <li class="page-item">
                            <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] + 1]) }}">
                                Siguiente <i class="fas fa-chevron-right"></i>
                            </a>
                        </li>
                    @endif
                </ul>
            </nav>
            <div class="text-center mt-2">
                <small class="text-muted">
                    Página {{ $pagination['current_page'] }} de {{ $pagination['total_pages'] }} 
                    ({{ $pagination['total_items'] }} registros total)
                </small>
            </div>
        </div>
        @endif
        @else
        <div class="text-center py-5">
            <i class="fas fa-user-plus fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No se encontraron solicitudes</h5>
            <p class="text-muted">No hay solicitudes de acceso que coincidan con los filtros aplicados.</p>
        </div>
        @endif
    </div>
</div>

@endsection

@push('styles')
<style>
    .business-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 14px;
    }
    
    .stats-card.mini {
        padding: 15px;
        margin-bottom: 0;
    }
    
    .stats-card.mini h4 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    
    .stats-card.mini.info {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
    }
    
    .stats-card.mini.info i {
        color: rgba(255, 255, 255, 0.8);
    }
    
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    
    .badge-outline-info {
        border: 1px solid #17a2b8;
        color: #17a2b8;
        background: transparent;
        font-size: 0.75em;
        padding: 2px 6px;
        border-radius: 3px;
    }
    
    .progress {
        background-color: #e9ecef;
        border-radius: 3px;
    }
    
    .progress-bar {
        border-radius: 3px;
        transition: width 0.3s ease;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
</style>
@endpush

@push('scripts')
<script>
    function approveRequest(requestId) {
        if (confirm('¿Estás seguro de que deseas aprobar esta solicitud?\n\nEsto creará un nuevo usuario business y activará su plan.')) {
            // Crear formulario para enviar POST
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/access-requests/${requestId}/approve`;
            
            // Token CSRF
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Agregar al DOM y enviar
            document.body.appendChild(form);
            form.submit();
        }
    }
    
    function rejectRequest(requestId) {
        if (confirm('¿Estás seguro de que deseas rechazar esta solicitud?\n\nEsta acción no se puede deshacer.')) {
            // Crear formulario para enviar DELETE
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/access-requests/${requestId}`;
            
            // Token CSRF
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Método DELETE
            const methodInput = document.createElement('input');
            methodInput.type = 'hidden';
            methodInput.name = '_method';
            methodInput.value = 'DELETE';
            form.appendChild(methodInput);
            
            // Agregar al DOM y enviar
            document.body.appendChild(form);
            form.submit();
        }
    }
    
    function showMessage(message) {
        alert('Mensaje del solicitante:\n\n' + message);
    }
    
    function exportRequests() {
        const params = new URLSearchParams(window.location.search);
        const exportUrl = `/access-requests/export?${params.toString()}`;
        alert('Funcionalidad de exportación en desarrollo. URL: ' + exportUrl);
    }
    
    function refreshData() {
        location.reload();
    }
</script>
@endpush