@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="page-title">
        <h1>{{ $handset->name }}</h1>
        <p>{{ $handset->model ?? 'Unknown' }} - {{ $handset->extension->exten ?? 'No Extension' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('dect.handsets.edit', $handset->id) }}" class="btn btn-warning">
            <i class="fas fa-edit"></i> Edit
        </a>
        <a href="{{ route('dect.handsets.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Handsets
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Handset Details</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Name</label>
                        <div><strong>{{ $handset->name }}</strong></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Status</label>
                        <div>
                            @if($handset->status == 'registered')
                            <span class="badge bg-success">Registered</span>
                            @elseif($handset->status == 'unregistered')
                            <span class="badge bg-secondary">Unregistered</span>
                            @else
                            <span class="badge bg-danger">Error</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Model</label>
                        <div>{{ $handset->model ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Manufacturer</label>
                        <div>{{ $handset->manufacturer ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Extension</label>
                        <div>{{ $handset->extension->exten ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Assigned User</label>
                        <div>{{ $handset->assigned_user ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Base Station</label>
                        <div>{{ $handset->dectBaseStation->name ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">MAC Address</label>
                        <div>{{ $handset->mac_address ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Serial Number</label>
                        <div>{{ $handset->serial_number ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Firmware Version</label>
                        <div>{{ $handset->firmware_version ?? '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Last Registered</label>
                        <div>{{ $handset->last_registered ? $handset->last_registered->format('Y-m-d H:i:s') : '-' }}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Last Sync</label>
                        <div>{{ $handset->last_sync ? $handset->last_sync->format('Y-m-d H:i:s') : '-' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title">Health Metrics</h5>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label">Firmware Version</label>
                        <div><code>{{ $handset->firmware_version ?? 'Unknown' }}</code></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Signal Strength</label>
                        @if($handset->signal_strength)
                        <div class="progress mb-2" style="height: 20px;">
                            <div class="progress-bar {{ $handset->signal_strength > 50 ? 'bg-success' : ($handset->signal_strength > 20 ? 'bg-warning' : 'bg-danger') }}" style="width: {{ $handset->signal_strength }}%">
                                {{ $handset->signal_strength }}%
                            </div>
                        </div>
                        @if($handset->signal_strength < 30)
                        <small class="text-danger"><i class="fas fa-exclamation-triangle"></i> Weak signal</small>
                        @endif
                        @else
                        <div class="text-muted">Unknown</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button onclick="locateHandset()" class="btn btn-success">
                        <i class="fas fa-map-marker-alt me-2"></i> Locate Handset
                    </button>
                    <button onclick="rebootHandset()" class="btn btn-primary">
                        <i class="fas fa-sync me-2"></i> Reboot Handset
                    </button>
                    <button onclick="resyncHandset()" class="btn btn-info">
                        <i class="fas fa-sync-alt me-2"></i> Re-Sync
                    </button>
                    <button onclick="deregisterHandset()" class="btn btn-warning">
                        <i class="fas fa-phone-slash me-2"></i> Deregister
                    </button>
                    <a href="{{ route('dect.provisioning.index') }}" class="btn btn-secondary">
                        <i class="fas fa-cog me-2"></i> Push Provisioning
                    </a>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title">Handset Information</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Created</label>
                    <div>{{ $handset->created_at->format('Y-m-d H:i:s') }}</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Last Updated</label>
                    <div>{{ $handset->updated_at->format('Y-m-d H:i:s') }}</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Last Provisioned</label>
                    <div>{{ $handset->last_provisioned ? $handset->last_provisioned->format('Y-m-d H:i:s') : '-' }}</div>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title">Call Statistics</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <label class="form-label">Calls Today</label>
                        <div class="h4">-</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Total Calls</label>
                        <div class="h4">-</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Avg Duration</label>
                        <div class="h4">-</div>
                    </div>
                    <div class="col-6">
                        <label class="form-label">Last Call</label>
                        <div class="h4">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function locateHandset() {
    if(confirm('Send locate signal to this handset? The handset will ring for 60 seconds.')) {
        alert('Locate signal sent');
    }
}

function rebootHandset() {
    if(confirm('Reboot this handset?')) {
        alert('Reboot command sent');
    }
}

function resyncHandset() {
    if(confirm('Re-sync this handset with the base station?')) {
        alert('Re-sync initiated');
    }
}

function deregisterHandset() {
    if(confirm('Deregister this handset from the base station?')) {
        alert('Deregistration command sent');
    }
}
</script>
@endsection