@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="page-title">
        <h1>Add Base Station</h1>
        <p>Create a new DECT base station</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('dect.base-stations.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Stations
        </a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Base Station Information</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('dect.base-stations.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">Name *</label>
                            <input type="text" name="name" class="form-control" required placeholder="e.g., Office Main Base">
                            @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">Status *</label>
                            <select name="status" class="form-select" required>
                                <option value="online">Online</option>
                                <option value="offline">Offline</option>
                                <option value="error">Error</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">IP Address</label>
                            <input type="text" name="ip_address" class="form-control" placeholder="192.168.1.100">
                            @error('ip_address')
                            <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </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-12">
                            <label class="form-label">Location</label>
                            <input type="text" name="location" class="form-control" placeholder="e.g., Building A, Floor 2">
                        </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 Base Station
                            </button>
                            <a href="{{ route('dect.base-stations.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 W70B</li>
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Yealink W80B</li>
                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i> Yealink W90B</li>
                    <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><i class="fas fa-check text-success me-2"></i> Yealink W78H</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>Ensure the base station is on the same network as the PBX</li>
                    <li>MAC address is typically found on the device label</li>
                    <li>IP address can be set via DHCP or static configuration</li>
                    <li>Location helps with inventory management</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection