@extends('layouts.app')
@section('title', 'Provision service')

@section('content')
    <div class="page-head">
        <div><h1>Provision a service</h1>
            <p>Creates the subscription, pushes the RADIUS record and raises the setup invoice.</p></div>
        <a href="{{ route('services.index') }}" class="btn secondary">&larr; Back</a>
    </div>

    <form method="POST" action="{{ route('services.store') }}">
        @csrf
        <div class="card">
            <div class="card-head"><h3>Subscriber &amp; plan</h3></div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="field span-2">
                        <label>Customer <span class="req">*</span></label>
                        <select name="customer_id" required>
                            <option value="">Select a customer…</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" @selected(old('customer_id', request('customer')) == $customer->id)>
                                    {{ $customer->customer_number }} — {{ $customer->display_name }} ({{ $customer->phone }})
                                </option>
                            @endforeach
                        </select>
                        <span class="hint"><a href="{{ route('customers.create') }}" target="_blank">Create a new customer &rarr;</a></span>
                    </div>
                    <div class="field span-2">
                        <label>Plan <span class="req">*</span></label>
                        <select name="plan_id" required id="plan-select">
                            <option value="">Select a plan…</option>
                            @foreach ($plans as $plan)
                                <option value="{{ $plan->id }}" data-price="{{ $plan->price }}"
                                        data-type="{{ $plan->serviceType?->technology }}"
                                        @selected(old('plan_id') == $plan->id)>
                                    {{ $plan->name }} — {{ money($plan->price) }}/{{ str_replace('_',' ',$plan->billing_period) }} ({{ $plan->speed_label }})
                                    @if ($plan->isFull()) [FULL] @endif
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Start date</label>
                        <input type="date" name="start_date" value="{{ old('start_date', now()->toDateString()) }}">
                    </div>
                    <div class="field">
                        <label>Billing cycle <span class="req">*</span></label>
                        <select name="billing_cycle" required>
                            <option value="calendar" @selected(old('billing_cycle','calendar') === 'calendar')>Calendar (bills on a fixed day each month)</option>
                            <option value="anniversary" @selected(old('billing_cycle') === 'anniversary')>Anniversary (bills relative to start date)</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>Monthly price override</label>
                        <input type="number" name="price" id="price-input" step="0.01" min="0" value="{{ old('price') }}"
                               placeholder="Leave blank to use plan price">
                        <span class="hint">Use for negotiated enterprise pricing.</span>
                    </div>
                    <div class="field">
                        <label>IP pool</label>
                        <select name="ip_pool_id">
                            <option value="">None / static</option>
                            @foreach ($pools as $pool)
                                <option value="{{ $pool->id }}" @selected(old('ip_pool_id') == $pool->id)>{{ $pool->name }} ({{ $pool->network }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>RADIUS / AAA credentials</h3></div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="field">
                        <label>Username</label>
                        <input type="text" name="username" value="{{ old('username') }}" class="mono"
                               placeholder="auto-generated from the customer name">
                        <span class="hint">Letters, numbers, dot, dash and underscore only.</span>
                    </div>
                    <div class="field">
                        <label>Password</label>
                        <div class="flex gap-1">
                            <input type="password" name="password" id="svc-password" value="{{ old('password') }}" class="mono grow">
                            <button type="button" class="btn secondary sm" data-generate-password="#svc-password">Generate</button>
                            <button type="button" class="btn ghost sm" data-toggle-password="#svc-password">Show</button>
                        </div>
                        <span class="hint">Minimum 6 characters. Stored for the subscriber and pushed to FreeRADIUS.</span>
                    </div>
                    <div class="field">
                        <label>Static IP</label>
                        <input type="text" name="static_ip" value="{{ old('static_ip') }}" class="mono" placeholder="Leave blank for dynamic">
                    </div>
                    <div class="field">
                        <label>NAS / BNG address</label>
                        <select name="nas_ip">
                            <option value="">Auto-detect</option>
                            @foreach ($nasDevices as $nas)
                                <option value="{{ $nas->management_ip }}" @selected(old('nas_ip') === $nas->management_ip)>
                                    {{ $nas->name }} ({{ $nas->management_ip }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Subscriber MAC</label>
                        <input type="text" name="mac_address" value="{{ old('mac_address') }}" class="mono" placeholder="AA:BB:CC:DD:EE:FF">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Installation site</h3></div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="field span-2">
                        <label>Installation address <span class="req">*</span></label>
                        <input type="text" name="installation_address" value="{{ old('installation_address') }}" required>
                    </div>
                    <div class="field"><label>City / town</label>
                        <input type="text" name="city" value="{{ old('city') }}"></div>
                    <div class="field"><label>Region</label>
                        <input type="text" name="region" value="{{ old('region') }}"></div>
                    <div class="field"><label>Latitude</label>
                        <input type="number" name="latitude" step="any" min="-90" max="90" value="{{ old('latitude') }}"></div>
                    <div class="field"><label>Longitude</label>
                        <input type="number" name="longitude" step="any" min="-180" max="180" value="{{ old('longitude') }}"></div>
                </div>
            </div>
            <div class="card-foot">
                <div class="flex gap-2 flex-wrap">
                    <label class="check"><input type="checkbox" name="raise_setup_invoice" value="1" checked> Raise setup &amp; first-period invoice</label>
                    <label class="check"><input type="checkbox" name="create_install_work_order" value="1" checked> Create installation work order</label>
                </div>
            </div>
        </div>

        <div class="flex-between">
            <a href="{{ route('services.index') }}" class="btn secondary">Cancel</a>
            <button type="submit" class="btn">Provision service</button>
        </div>
    </form>
@endsection

@push('scripts')
<script>
(function () {
    var sel = document.getElementById('plan-select');
    var price = document.getElementById('price-input');
    if (sel && price) {
        sel.addEventListener('change', function () {
            var opt = sel.options[sel.selectedIndex];
            price.placeholder = opt.value ? 'Plan price: ' + opt.getAttribute('data-price') : 'Leave blank to use plan price';
        });
    }
})();
</script>
@endpush