{{-- Everything the header actions open.

     Modals rather than panels stacked into the page: each of these is a
     decision the operator came here to make, and pushing the subscriber's
     details half a screen down while they make it loses the context they were
     reading. --}}

@if ($showPackage && $this->packageDetail)
    @php $pkg = $this->packageDetail['package']; @endphp

    <x-sub-modal :title="$pkg->package" closes="showPackage"
        :subtitle="__('What this plan includes, and how this subscriber uses it.')">

        <div class="row g-3">
            <div class="col-12 col-md-6">
                <dl class="sub-facts">
                    <div>
                        <dt>{{ __('Price') }}</dt>
                        <dd>{{ $pkg->price > 0 ? money($pkg->price, 0) : __('Free') }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Speed') }}</dt>
                        {{-- The rate limit is what the router enforces; the
                             speed label is only what the customer is told. --}}
                        <dd>{{ $pkg->mikrotik_rate_limit ?: ($pkg->speed ?: '—') }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Plan label') }}</dt>
                        <dd>{{ $pkg->plan_label ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Router') }}</dt>
                        <dd>{{ $pkg->router_name ?: '—' }}</dd>
                    </div>
                </dl>
            </div>

            <div class="col-12 col-md-6">
                <dl class="sub-facts">
                    <div>
                        <dt>{{ __('Times bought') }}</dt>
                        <dd>{{ $this->packageDetail['times_bought'] }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Spent on this plan') }}</dt>
                        <dd>{{ money($this->packageDetail['spent_on_it'], 0) }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('First bought') }}</dt>
                        <dd>{{ $this->packageDetail['first_bought']?->format('M j, Y') ?: '—' }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('Last bought') }}</dt>
                        <dd>{{ $this->packageDetail['last_bought']?->format('M j, Y') ?: '—' }}</dd>
                    </div>
                </dl>
            </div>

            @if ($pkg->description)
                <div class="col-12">
                    <span class="sub-card__label">{{ __('Description') }}</span>
                    <p class="mb-0 mt-1" style="font-size:0.84rem;">{{ $pkg->description }}</p>
                </div>
            @endif
        </div>

        <x-slot name="footer">
            <a href="{{ route('package-list-setup') }}" wire:navigate class="subs-btn">
                <i class="bi bi-pencil"></i>{{ __('Edit plans') }}
            </a>
        </x-slot>
    </x-sub-modal>
@endif

@if ($showEdit)
    <x-sub-modal :title="__('Edit login')" closes="showEdit"
        :subtitle="__('Changing the username removes the old one from the router and writes the new one.')">

        <form wire:submit="saveEdit" id="editLoginForm" class="row g-3">
            <div class="col-12">
                <label class="form-label small fw-semibold">{{ __('Phone') }}</label>
                <input type="text" class="form-control form-control-sm" wire:model="editPhone">
                <x-input-error for="editPhone" />
            </div>
            <div class="col-12 col-sm-6">
                <label class="form-label small fw-semibold">{{ __('Username') }}</label>
                <input type="text" class="form-control form-control-sm" wire:model="editUsername">
                <x-input-error for="editUsername" />
            </div>
            <div class="col-12 col-sm-6">
                <label class="form-label small fw-semibold">{{ __('Password') }}</label>
                <input type="text" class="form-control form-control-sm" wire:model="editPassword">
                <x-input-error for="editPassword" />
            </div>
        </form>

        <x-slot name="footer">
            <button type="button" class="subs-btn" wire:click="$set('showEdit', false)">
                {{ __('Cancel') }}
            </button>
            <button type="submit" form="editLoginForm" class="subs-btn subs-btn--primary"
                wire:loading.attr="disabled" wire:target="saveEdit">
                <span wire:loading.remove wire:target="saveEdit">{{ __('Save') }}</span>
                <span wire:loading wire:target="saveEdit">{{ __('Saving...') }}</span>
            </button>
        </x-slot>
    </x-sub-modal>
@endif

@if ($showSms)
    <x-sub-modal :title="__('Send a message')" closes="showSms"
        :subtitle="__('Goes to :phone and is recorded on the SMS tab.', ['phone' => $current?->phone ?: __('no number on record')])">

        <form wire:submit="sendSms" id="smsForm">
            <textarea class="form-control form-control-sm" rows="4" wire:model.live="smsBody"
                maxlength="480" placeholder="{{ __('Hi, your package expires soon...') }}"></textarea>
            <div class="d-flex justify-content-between mt-2">
                <span class="text-secondary" style="font-size:0.75rem;">
                    {{ __(':n characters — :p SMS', [
                        'n' => strlen($smsBody),
                        'p' => max(1, (int) ceil(max(1, strlen($smsBody)) / 160)),
                    ]) }}
                </span>
                <span class="text-secondary" style="font-size:0.75rem;">{{ strlen($smsBody) }} / 480</span>
            </div>
        </form>

        <x-slot name="footer">
            <button type="button" class="subs-btn" wire:click="$set('showSms', false)">
                {{ __('Cancel') }}
            </button>
            <button type="submit" form="smsForm" class="subs-btn subs-btn--primary"
                wire:loading.attr="disabled" wire:target="sendSms">
                <span wire:loading.remove wire:target="sendSms">
                    <i class="bi bi-send"></i>{{ __('Send SMS') }}
                </span>
                <span wire:loading wire:target="sendSms">{{ __('Sending...') }}</span>
            </button>
        </x-slot>
    </x-sub-modal>
@endif

@if ($showExpiry)
    <x-sub-modal :title="__('Change expiry')" closes="showExpiry"
        :subtitle="__('The router\'s own uptime limit is updated to match, so the change actually takes effect.')">

        <form wire:submit="changeExpiry" id="expiryForm">
            <label class="form-label small fw-semibold">{{ __('New expiry') }}</label>
            <input type="datetime-local" class="form-control form-control-sm" wire:model="newExpiry">
            <div class="sub-card__sub mt-2">
                {{ __('Currently :when.', ['when' => $current?->expires_at?->format('d M Y, H:i') ?: __('not set')]) }}
            </div>
        </form>

        <x-slot name="footer">
            <button type="button" class="subs-btn" wire:click="$set('showExpiry', false)">
                {{ __('Cancel') }}
            </button>
            <button type="submit" form="expiryForm" class="subs-btn subs-btn--primary">
                {{ __('Move expiry') }}
            </button>
        </x-slot>
    </x-sub-modal>
@endif

@if ($showCompensate)
    <x-sub-modal :title="__('Compensate')" closes="showCompensate"
        :subtitle="__('Added on top of what is left, not from now — an outage apology should not cost them time they paid for.')">

        <form wire:submit="compensate" id="compensateForm">
            <label class="form-label small fw-semibold">{{ __('Free minutes') }}</label>
            <input type="number" class="form-control form-control-sm" wire:model="compensateMinutes"
                min="1" max="43200" style="max-width:200px;">
        </form>

        <x-slot name="footer">
            <button type="button" class="subs-btn" wire:click="$set('showCompensate', false)">
                {{ __('Cancel') }}
            </button>
            <button type="submit" form="compensateForm" class="subs-btn subs-btn--primary">
                {{ __('Add time') }}
            </button>
        </x-slot>
    </x-sub-modal>
@endif