@extends('layouts.app')
@section('title', $pon?->exists ? 'Edit '.$pon->pon_port : 'Add PON port')

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $pon?->exists ? 'Edit '.$pon->pon_port : 'Add PON port' }}</h1>
            <p>A splitter port on an OLT, and how many of its positions are taken.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('fibre.index') }}" class="btn secondary">Back</a>
        </div>
    </div>

    <form method="POST" action="{{ $pon?->exists ? route('fibre.update', $pon) : route('fibre.store') }}">
        @csrf
        @if ($pon?->exists) @method('PUT') @endif

        <div class="card">
            <div class="card-head"><h3>Port</h3></div>
            <div class="card-body">
                <div class="grid grid-4">
                    <div class="field">
                        <label>OLT device <span class="req">*</span></label>
                        <select name="olt_device_id" required>
                            <option value="">Select…</option>
                            @foreach ($olts as $olt)
                                <option value="{{ $olt->id }}" @selected(old('olt_device_id', $pon?->olt_device_id) == $olt->id)>{{ $olt->name }}</option>
                            @endforeach
                        </select>
                        @error('olt_device_id')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>PON port <span class="req">*</span></label>
                        <input type="text" name="pon_port" class="mono" maxlength="40" required
                               value="{{ old('pon_port', $pon?->pon_port) }}" placeholder="1/1/3">
                        @error('pon_port')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Splitter</label>
                        <input type="text" name="splitter" maxlength="60"
                               value="{{ old('splitter', $pon?->splitter) }}" placeholder="SP-TEMA-04">
                    </div>
                    <div class="field">
                        <label>Cabinet</label>
                        <input type="text" name="cabinet" maxlength="60"
                               value="{{ old('cabinet', $pon?->cabinet) }}" placeholder="CAB-TEMA-02">
                    </div>
                    <div class="field">
                        <label>Split ratio <span class="req">*</span></label>
                        <input type="number" name="split_ratio" min="1" max="256" required
                               value="{{ old('split_ratio', $pon?->split_ratio ?? 32) }}">
                        @error('split_ratio')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Ports total <span class="req">*</span></label>
                        <input type="number" name="ports_total" min="1" max="65535" required
                               value="{{ old('ports_total', $pon?->ports_total ?? 32) }}">
                        @error('ports_total')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Ports used <span class="req">*</span></label>
                        <input type="number" name="ports_used" min="0" max="65535" required
                               value="{{ old('ports_used', $pon?->ports_used ?? 0) }}">
                        <span class="hint">Cannot exceed ports total. Deleting an ONT resyncs this.</span>
                        @error('ports_used')<span class="err">{{ $message }}</span>@enderror
                    </div>
                    <div class="field">
                        <label>Distance (km)</label>
                        <input type="number" name="distance_km" step="0.01" min="0"
                               value="{{ old('distance_km', $pon?->distance_km) }}">
                    </div>
                    <div class="field">
                        <label>Status <span class="req">*</span></label>
                        <select name="status" required>
                            @foreach ($statuses as $s)
                                <option value="{{ $s }}" @selected(old('status', $pon?->status ?? 'active') === $s)>{{ title_case_words($s) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-foot">
                <button type="submit" class="btn">{{ $pon?->exists ? 'Save changes' : 'Add port' }}</button>
                <a href="{{ route('fibre.index') }}" class="btn secondary">Cancel</a>
            </div>
        </div>
    </form>
@endsection