@extends('layouts.principal')

@section('titulo', 'Admin - Licenças - MNGD Sistemas')

@section('conteudo')
<div class="dashboard-container">
    <div class="dashboard-header">
        <div class="dashboard-welcome">
            <h1>Gerenciar Licenças</h1>
            <p>Visualize e gerencie todas as licenças</p>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i>
            {{ session('error') }}
        </div>
    @endif

    <div class="admin-table-container">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Cliente</th>
                    <th>Produto</th>
                    <th>Status</th>
                    <th>Validade</th>
                    <th>Chave</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @forelse($licencas as $licenca)
                    <tr>
                        <td>{{ $licenca->id }}</td>
                        <td>{{ $licenca->cliente->nome }}</td>
                        <td>{{ $licenca->produto->nome }}</td>
                        <td>
                            <span class="status-badge {{ $licenca->status }}">
                                {{ ucfirst($licenca->status) }}
                            </span>
                        </td>
                        <td>
                            @if($licenca->license_ends_at)
                                {{ $licenca->license_ends_at->format('d/m/Y') }}
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                        </td>
                        <td>
                            <code class="license-key-small">{{ substr($licenca->chave ?? $licenca->license_key ?? 'N/A', 0, 20) }}...</code>
                        </td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn-action btn-status" onclick="showStatusModal({{ $licenca->id }}, '{{ $licenca->status }}')">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn-action btn-date" onclick="showDateModal({{ $licenca->id }})">
                                    <i class="fas fa-calendar"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center">Nenhuma licença encontrada</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Status -->
<div id="statusModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeStatusModal()">&times;</span>
        <h2>Alterar Status</h2>
        <form id="statusForm" method="POST">
            @csrf
            <div class="form-group">
                <label for="status">Status:</label>
                <select name="status" id="status" required>
                    <option value="ativa">Ativa</option>
                    <option value="pendente">Pendente</option>
                    <option value="expirado">Expirado</option>
                    <option value="cancelado">Cancelado</option>
                    <option value="trial">Trial</option>
                </select>
            </div>
            <button type="submit" class="btn-primary">Salvar</button>
        </form>
    </div>
</div>

<!-- Modal Data -->
<div id="dateModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeDateModal()">&times;</span>
        <h2>Ajustar Validade</h2>
        <form id="dateForm" method="POST">
            @csrf
            <div class="form-group">
                <label for="license_ends_at">Data de Validade:</label>
                <input type="datetime-local" name="license_ends_at" id="license_ends_at" required>
            </div>
            <button type="submit" class="btn-primary">Salvar</button>
        </form>
    </div>
</div>

<style>
.admin-table-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: #f7fafc;
}

.admin-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #2d3748;
    border-bottom: 2px solid #e2e8f0;
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.admin-table tr:hover {
    background: #f7fafc;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.status-badge.ativa {
    background: #c6f6d5;
    color: #22543d;
}

.status-badge.pendente {
    background: #fed7d7;
    color: #742a2a;
}

.status-badge.expirado {
    background: #e2e8f0;
    color: #2d3748;
}

.status-badge.cancelado {
    background: #fed7d7;
    color: #742a2a;
}

.status-badge.trial {
    background: #feebc8;
    color: #7c2d12;
}

.license-key-small {
    background: #2d3748;
    color: #68d391;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-action {
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.btn-status {
    background: #667eea;
    color: white;
}

.btn-date {
    background: #48bb78;
    color: white;
}

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

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 2rem;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #000;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #2d3748;
    font-weight: 600;
}

.form-group select,
.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: #667eea;
}

@media (max-width: 768px) {
    .admin-table-container {
        padding: 1rem;
    }

    .admin-table {
        font-size: 0.875rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.5rem;
    }
}
</style>

<script>
function showStatusModal(id, currentStatus) {
    document.getElementById('statusModal').style.display = 'block';
    document.getElementById('statusForm').action = '{{ url("admin/licencas") }}/' + id + '/status';
    document.getElementById('status').value = currentStatus;
}

function closeStatusModal() {
    document.getElementById('statusModal').style.display = 'none';
}

function showDateModal(id) {
    document.getElementById('dateModal').style.display = 'block';
    document.getElementById('dateForm').action = '{{ url("admin/licencas") }}/' + id + '/validade';
}

function closeDateModal() {
    document.getElementById('dateModal').style.display = 'none';
}

window.onclick = function(event) {
    const statusModal = document.getElementById('statusModal');
    const dateModal = document.getElementById('dateModal');
    if (event.target == statusModal) {
        statusModal.style.display = 'none';
    }
    if (event.target == dateModal) {
        dateModal.style.display = 'none';
    }
}
</script>
@endsection