@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="page-title">
        <h1>DECT Discovery Diagnostics</h1>
        <p>Device discovery troubleshooting and status</p>
    </div>
    <div class="page-actions">
        <form action="{{ route('dect.diagnostics.run') }}" method="POST" class="d-inline">
            @csrf
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i> Run Discovery
            </button>
        </form>
    </div>
</div>

<!-- Discovery Status Cards -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-lg-4 col-md-6">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="kpi-icon kpi-icon-soft-blue">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="kpi-content">
                    <h6 class="kpi-label">Last Discovery Run</h6>
                    <h3 class="kpi-value">{{ $lastDiscoveryRun ? $lastDiscoveryRun->diffForHumans() : 'Never' }}</h3>
                    <div class="kpi-trend">
                        <span class="badge bg-light text-secondary">Status</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-lg-4 col-md-6">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="kpi-icon kpi-icon-soft-green">
                    <i class="fas fa-search"></i>
                </div>
                <div class="kpi-content">
                    <h6 class="kpi-label">Devices Scanned</h6>
                    <h3 class="kpi-value">{{ $devicesScanned }}</h3>
                    <div class="kpi-trend">
                        <span class="badge bg-light text-secondary">Total</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-lg-4 col-md-6">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="kpi-icon kpi-icon-soft-green">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="kpi-content">
                    <h6 class="kpi-label">Imported</h6>
                    <h3 class="kpi-value">{{ $importedCount }}</h3>
                    <div class="kpi-trend">
                        <span class="badge bg-light text-success">Complete</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-lg-4 col-md-6">
        <div class="card kpi-card">
            <div class="card-body">
                <div class="kpi-icon kpi-icon-soft-amber">
                    <i class="fas fa-hourglass-half"></i>
                </div>
                <div class="kpi-content">
                    <h6 class="kpi-label">Pending Import</h6>
                    <h3 class="kpi-value">{{ $pendingCount }}</h3>
                    <div class="kpi-trend">
                        <span class="badge bg-light text-warning">Action Required</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Discovered Devices Table -->
<div class="card">
    <div class="card-header">
        <h5 class="card-title">Discovered Devices</h5>
        <span class="badge bg-light text-secondary">{{ $devicesScanned }} devices</span>
    </div>
    <div class="card-body">
        @if($discoveries->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Device Type</th>
                        <th>Model</th>
                        <th>Manufacturer</th>
                        <th>IP Address</th>
                        <th>User Agent</th>
                        <th>Extension</th>
                        <th>Last Seen</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($discoveries as $discovery)
                    <tr>
                        <td>
                            @if($discovery->device_type == 'base_station')
                            <span class="badge bg-light text-primary">Base Station</span>
                            @else
                            <span class="badge bg-light text-info">Handset</span>
                            @endif
                        </td>
                        <td><strong>{{ $discovery->model }}</strong></td>
                        <td>{{ $discovery->manufacturer }}</td>
                        <td>{{ $discovery->ip_address ?? '-' }}</td>
                        <td><small>{{ $discovery->user_agent }}</small></td>
                        <td>{{ $discovery->extension ? $discovery->extension->exten : '-' }}</td>
                        <td>{{ $discovery->last_seen->diffForHumans() }}</td>
                        <td>
                            @if($discovery->status == 'discovered')
                            <span class="badge bg-light text-warning">Discovered</span>
                            @elseif($discovery->status == 'imported')
                            <span class="badge bg-light text-success">Imported</span>
                            @elseif($discovery->status == 'ignored')
                            <span class="badge bg-light text-secondary">Ignored</span>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('dect.diagnostics.show', $discovery->id) }}" class="btn btn-outline-secondary">
                                    View
                                </a>
                                @if($discovery->status == 'discovered')
                                <a href="{{ route('dect.discoveries.import', $discovery->id) }}" class="btn btn-outline-success">
                                    Import
                                </a>
                                <a href="{{ route('dect.discoveries.ignore', $discovery->id) }}" class="btn btn-outline-secondary">
                                    Ignore
                                </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center py-5">
            <i class="fas fa-search fa-3x text-muted mb-3"></i>
            <p class="text-muted">No devices discovered yet</p>
            <form action="{{ route('dect.diagnostics.run') }}" method="POST" class="d-inline">
                @csrf
                <button type="submit" class="btn btn-primary">Run Discovery</button>
            </form>
        </div>
        @endif
    </div>
</div>

<style>
.kpi-card {
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.kpi-card .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #495057;
    flex-shrink: 0;
}

.kpi-icon-soft-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1976d2;
}

.kpi-icon-soft-green {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #388e3c;
}

.kpi-icon-soft-amber {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    color: #f57c00;
}

.kpi-content {
    flex: 1;
}

.kpi-label {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #212529;
}

.kpi-trend {
    font-size: 0.8125rem;
}
</style>
@endsection