@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Call Details</h1>
            <p class="text-muted mb-0">View detailed call information</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('dect.calls.edit', $call->id) }}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-edit"></i> Edit
            </a>
            <a href="{{ route('dect.calls.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Back to Calls
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Call Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Handset</label>
                                <div class="fw-semibold">{{ $call->handset->name ?? 'Unknown' }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Base Station</label>
                                <div class="fw-semibold">{{ $call->baseStation->name ?? 'N/A' }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Call Direction</label>
                                <div class="fw-semibold">{{ ucfirst($call->call_direction) }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Remote Number</label>
                                <div class="fw-semibold">{{ $call->remote_number ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-muted">Start Time</label>
                                <div class="fw-semibold">{{ $call->start_time->format('Y-m-d H:i:s') }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">End Time</label>
                                <div class="fw-semibold">{{ $call->end_time ? $call->end_time->format('Y-m-d H:i:s') : 'Still Active' }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Duration</label>
                                <div class="fw-semibold">{{ $call->duration_formatted ?? 'In Progress' }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Call Status</label>
                                <div>
                                    <span class="badge {{ $call->call_status === 'answered' ? 'bg-success' : ($call->call_status === 'missed' ? 'bg-danger' : ($call->call_status === 'ringing' ? 'bg-warning' : 'bg-secondary')) }}">
                                        {{ ucfirst($call->call_status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if($call->quality_score)
                    <div class="mt-3">
                        <label class="form-label text-muted">Quality Score</label>
                        <div>
                            <span class="badge {{ $call->quality_score >= 4 ? 'bg-success' : ($call->quality_score >= 3 ? 'bg-warning' : 'bg-danger') }} fs-6">
                                {{ $call->quality_score }}/5.0
                            </span>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">Actions</h5>
                </div>
                <div class="card-body">
                    @if($call->call_status === 'ringing' || $call->call_status === 'answered')
                        <form action="{{ route('dect.calls.end', $call->id) }}" method="POST" class="mb-2">
                            @csrf
                            <button type="submit" class="btn btn-danger w-100" onclick="return confirm('End this call?')">
                                <i class="fas fa-phone-slash me-2"></i>End Call
                            </button>
                        </form>
                    @endif
                    
                    <div class="d-grid gap-2">
                        <a href="{{ route('dect.calls.edit', $call->id) }}" class="btn btn-outline-primary">
                            <i class="fas fa-edit me-2"></i>Edit Call
                        </a>
                        <form action="{{ route('dect.calls.destroy', $call->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger" onclick="return confirm('Delete this call record?')">
                                <i class="fas fa-trash me-2"></i>Delete Call
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection