@extends('layouts.app')
@section('title', $plan->name.' — add-ons')

@section('content')
    <div class="page-head">
        <div>
            <h1>{{ $plan->name }} — add-ons</h1>
            <p>Optional extras this plan offers. A <em>default</em> is attached automatically when a service is created on this plan.</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('settings.catalog') }}" class="btn secondary">Catalog</a>
        </div>
    </div>

    <div class="grid grid-3 mb-2">
        @include('components.kpi', ['label' => 'Add-ons offered', 'value' => (string) $stats['offered'], 'variant' => 'info'])
        @include('components.kpi', ['label' => 'Attached by default', 'value' => (string) $stats['defaults'],
            'variant' => $stats['defaults'] ? 'good' : ''])
        @include('components.kpi', ['label' => 'Live services with an add-on', 'value' => (string) $stats['live']])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Offered on this plan</h3></div>
            <div class="card-body" style="padding:0;">
                @if ($attached->isEmpty())
                    @include('components.empty-state', [
                        'icon' => '&#10133;',
                        'title' => 'No add-ons offered',
                        'message' => 'Attach an add-on from the list to offer it to customers on this plan.',
                    ])
                @else
                    <table class="data">
                        <thead>
                        <tr><th>Add-on</th><th class="num">List price</th><th class="num">On this plan</th><th>Default</th><th></th></tr>
                        </thead>
                        <tbody>
                        @foreach ($attached as $pivot)
                            @php $addon = $pivot->addon; @endphp
                            <tr>
                                <td>{{ $addon->name }}
                                    <div class="tiny muted mono">{{ $addon->code }} · {{ $addon->type }}</div></td>
                                <td class="num">{{ money($addon->price) }}</td>
                                <td class="num strong">
                                    {{ $pivot->price_override !== null ? money($pivot->price_override) : '—' }}
                                    @if ($pivot->price_override !== null)
                                        <div class="tiny muted">override</div>
                                    @endif
                                </td>
                                <td>
                                    @if ($pivot->is_default)<span class="badge success">yes</span>
                                    @else <span class="badge muted">no</span> @endif
                                </td>
                                <td class="right nowrap">
                                    <form method="POST" action="{{ route('plan-addons.detach', [$plan, $addon]) }}"
                                          data-confirm="Stop offering {{ $addon->name }} on {{ $plan->name }}?"
                                          style="display:inline;">
                                        @csrf @method('DELETE')
                                        <button class="btn xs danger" type="submit">Remove</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Available add-ons</h3></div>
            <div class="card-body" style="padding:0;">
                <table class="data">
                    <thead>
                    <tr><th>Add-on</th><th>Type</th><th class="num">Price</th><th style="width:36%;">Offer on this plan</th></tr>
                    </thead>
                    <tbody>
                    @foreach ($addons as $addon)
                        @php $isAttached = $attached->has($addon->id); @endphp
                        <tr>
                            <td>{{ $addon->name }}
                                <div class="tiny muted mono">{{ $addon->code }}</div></td>
                            <td class="small">{{ title_case_words($addon->type) }}</td>
                            <td class="num">{{ money($addon->price) }}
                                <div class="tiny muted">{{ $addon->billing_period }}</div></td>
                            <td>
                                @if ($isAttached)
                                    <form method="POST" action="{{ route('plan-addons.update', [$plan, $addon]) }}" class="inline-form">
                                        @csrf @method('PUT')
                                        <input type="number" name="price_override" step="0.01" min="0"
                                               value="{{ $attached[$addon->id]->price_override }}"
                                               placeholder="Override" style="width:96px;">
                                        <label class="check" style="margin:0;">
                                            <input type="checkbox" name="is_default" value="1"
                                                   @checked($attached[$addon->id]->is_default)>
                                            <span>Default</span>
                                        </label>
                                        <button class="btn xs" type="submit">Save</button>
                                    </form>
                                @else
                                    <form method="POST" action="{{ route('plan-addons.attach', $plan) }}" class="inline-form">
                                        @csrf
                                        <input type="hidden" name="addon_id" value="{{ $addon->id }}">
                                        <input type="number" name="price_override" step="0.01" min="0"
                                               placeholder="Override" style="width:96px;">
                                        <label class="check" style="margin:0;">
                                            <input type="checkbox" name="is_default" value="1">
                                            <span>Default</span>
                                        </label>
                                        <button class="btn xs" type="submit">Offer</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection