@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="page-title">
        <h1>Add Handset</h1>
        <p>Create a new DECT handset</p>
    </div>
    <div class="page-actions">
        <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">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Handset Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('dect.handsets.store') }}" method="POST">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">DECT System *</label>
                            <select name="dect_system_id" class="form-select" required>
                                <option value="">Select System</option>
                                @foreach($systems as $system)
                                <option value="{{ $system->id }}">{{ $system->name }}</option>
                                @endforeach
                            </select>
                            @error('dect_system_id')
                            <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Base Station</label>
                            <select name="dect_base_station_id" class="form-select">
                                <option value="">Select Base Station</option>
                                @foreach($baseStations as $station)
                                <option value="{{ $station->id }}">{{ $station->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Name *</label>
                            <input type="text" name="name" class="form-control" required placeholder="e.g., John's Handset">
                            @error('name')
                            <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Manufacturer</label>
                            <select name="manufacturer" class="form-select">
                                <option value="Yealink">Yealink</option>
                                <option value="Snom">Snom</option>
                                <option value="Gigaset">Gigaset</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Model</label>
                            <input type="text" name="model" class="form-control" placeholder="e.g., W78H">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status *</label>
                            <select name="status" class="form-select" required>
                                <option value="registered">Registered</option>
                                <option value="unregistered">Unregistered</option>
                                <option value="error">Error</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Extension</label>
                            <select name="extension_id" class="form-select">
                                <option value="">Select Extension</option>
                                @foreach($extensions as $extension)
                                <option value="{{ $extension->id }}">{{ $extension->exten }} - {{ $extension->description ?? 'No description' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Assigned User</label>
                            <input type="text" name="assigned_user" class="form-control" placeholder="e.g., John Doe">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">MAC Address</label>
                            <input type="text" name="mac_address" class="form-control" placeholder="00:11:22:33:44:55">
                            @error('mac_address')
                            <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Serial Number</label>
                            <input type="text" name="serial_number" class="form-control" placeholder="SN123456789">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Firmware Version</label>
                            <input type="text" name="firmware_version" class="form-control" placeholder="e.g., 46.80.0.25">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Signal Strength (%)</label>
                            <input type="number" name="signal_strength" class="form-control" min="0" max="100" placeholder="0-100">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Settings (JSON)</label>
                            <textarea name="settings" class="form-control" rows="3" placeholder='{"key": "value"}'></textarea>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i> Create Handset
                            </button>
                            <a href="{{ route('dect.handsets.index') }}" class="btn btn-secondary">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Supported Models</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Yealink W57R</li>
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Yealink W59R</li>
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Yealink W78H</li>
                    <li><i class="fas fa-check text-success me-2"></i> Yealink W73H</li>
                </ul>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title">Tips</h5>
            </div>
            <div class="card-body">
                <ul class="small text-muted">
                    <li>Assign an extension to enable calling functionality</li>
                    <li>Link to a base station for registration</li>
                    <li>Assigned user helps with device identification</li>
                    <li>Battery and signal levels update automatically when available</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection