@extends('layouts.app')

@section('title', 'Invitaciones Pendientes')
@section('page-title', 'Invitaciones Pendientes')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <h2>Invitaciones Pendientes</h2>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newInvitationModal">
                <i class="bi bi-plus-circle me-2"></i>Generar Invitación
            </button>
        </div>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <div class="d-flex align-items-center">
        <i class="bi bi-check-circle me-2"></i>
        <div>
            {{ session('success') }}
        </div>
    </div>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Empresa</th>
                        <th>Proyecto</th>
                        <th>Fecha Creación</th>
                        <th>Link de Invitación</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pendingInvitations as $invitation)
                    <tr>
                        <td>
                            <i class="bi bi-envelope me-2"></i>
                            {{ $invitation->email }}
                        </td>
                        <td>{{ $invitation->company->name ?? 'N/A' }}</td>
                        <td>{{ $invitation->project->name ?? 'N/A' }}</td>
                        <td>{{ $invitation->created_at->format('d/m/Y H:i') }}</td>
                        <td>
                            <div class="input-group input-group-sm" style="max-width: 400px;">
                                <input type="text" class="form-control form-control-sm" 
                                       value="{{ route('invitation.show', $invitation->invitation_token) }}" 
                                       id="link-{{ $invitation->id }}" readonly>
                                <button class="btn btn-outline-secondary" type="button" 
                                        onclick="copyToClipboard('link-{{ $invitation->id }}')">
                                    <i class="bi bi-clipboard"></i>
                                </button>
                            </div>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <form action="{{ route('invitations.resend', $invitation) }}" method="POST" class="d-inline">
                                    @csrf
                                    <button type="submit" class="btn btn-outline-primary" title="Reenviar">
                                        <i class="bi bi-send"></i>
                                    </button>
                                </form>
                                <form action="{{ route('invitations.cancel', $invitation) }}" method="POST" class="d-inline"
                                      onsubmit="return confirm('¿Estás seguro de cancelar esta invitación?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger" title="Cancelar">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5">
                            <i class="bi bi-envelope-x display-4 text-muted d-block mb-3"></i>
                            <p class="text-muted">No hay invitaciones pendientes</p>
                            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#newInvitationModal">
                                <i class="bi bi-plus-circle me-2"></i>Generar Primera Invitación
                            </button>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal para nueva invitación -->
<div class="modal fade" id="newInvitationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Generar Nueva Invitación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="invitationForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="email" class="form-label">Email del Cliente</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                        <div class="form-text">El cliente recibirá un link para completar su registro</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="company_id" class="form-label">Empresa</label>
                        <select class="form-select" id="company_id" name="company_id" required>
                            <option value="">Seleccionar empresa...</option>
                            @foreach(\App\Models\Company::where('is_active', true)->get() as $company)
                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="project_id" class="form-label">Proyecto</label>
                        <select class="form-select" id="project_id" name="project_id" required>
                            <option value="">Primero selecciona una empresa...</option>
                        </select>
                        <div class="form-text">El cliente será asignado a este proyecto</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-send me-2"></i>Generar Invitación
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyToClipboard(elementId) {
    const input = document.getElementById(elementId);
    input.select();
    document.execCommand('copy');
    
    // Mostrar feedback
    const btn = event.target.closest('button');
    const originalHTML = btn.innerHTML;
    btn.innerHTML = '<i class="bi bi-check"></i>';
    setTimeout(() => {
        btn.innerHTML = originalHTML;
    }, 2000);
}

// Cargar proyectos según empresa seleccionada
document.getElementById('company_id').addEventListener('change', async function() {
    const companyId = this.value;
    const projectSelect = document.getElementById('project_id');
    
    projectSelect.innerHTML = '<option value="">Cargando...</option>';
    
    if (!companyId) {
        projectSelect.innerHTML = '<option value="">Primero selecciona una empresa...</option>';
        return;
    }
    
    try {
        // Aquí deberías hacer una petición AJAX a una ruta que devuelva proyectos por empresa
        // Por ahora, simulamos con datos estáticos
        const response = await fetch(`/api/companies/${companyId}/projects`);
        const projects = await response.json();
        
        projectSelect.innerHTML = '<option value="">Seleccionar proyecto...</option>';
        projects.forEach(project => {
            projectSelect.innerHTML += `<option value="${project.id}">${project.name}</option>`;
        });
    } catch (error) {
        projectSelect.innerHTML = '<option value="">Error al cargar proyectos</option>';
    }
});

// Enviar formulario de invitación
document.getElementById('invitationForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    try {
        const response = await fetch('{{ route('invitations.generate') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Cerrar modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('newInvitationModal'));
            modal.hide();
            
            // Mostrar mensaje y recargar página
            alert('Invitación generada exitosamente. Link: ' + result.invitation_link);
            window.location.reload();
        } else {
            alert('Error: ' + (result.message || 'No se pudo generar la invitación'));
        }
    } catch (error) {
        alert('Error al generar invitación: ' + error.message);
    }
});
</script>
@endpush
@endsection