@extends('layouts.vpm-mobile-app', ['active' => 'account'])

@section('title', 'Push Notifications')

@section('content')
@php
    $websitePermission = old(
        'website_permission',
        $notifications['push_website_permission'] ?? 'granted'
    );
@endphp

<div class="vpm-push-notifications">
    <div class="vpm-push-notifications__intro">
        <h2 class="vpm-push-notifications__title">Manage Push Notifications</h2>
        <p class="vpm-push-notifications__desc">Manage and update your account push notifications below.</p>
    </div>

    <div class="vpm-push-notifications__card-wrap">
        <div class="vpm-push-notifications__card">
            @include('partials.vpm.flash-messages')

            <p class="vpm-push-notifications__note">
                You may disable notifications permission from your browser settings. Your browser settings will override the website settings.
            </p>

            <p class="vpm-push-notifications__status">
                Notifications Permission (Browser):
                <span id="vpm-browser-notification-permission" data-default="unknown">Checking…</span>
            </p>

            <form
                method="POST"
                action="{{ route('app.account.notifications.update') }}"
                class="vpm-push-notifications__form"
            >
                @csrf
                @method('PUT')

                <div class="vpm-push-notifications__field">
                    <label class="vpm-push-notifications__label" for="website_permission">
                        Notifications Permission (Website)
                    </label>
                    <select
                        id="website_permission"
                        name="website_permission"
                        class="vpm-push-notifications__select{{ $errors->has('website_permission') ? ' vpm-push-notifications__select--error' : '' }}"
                        required
                    >
                        <option value="" disabled @selected(! filled($websitePermission))>Select your permission</option>
                        <option value="granted" @selected($websitePermission === 'granted')>Granted</option>
                        <option value="denied" @selected($websitePermission === 'denied')>Denied</option>
                    </select>
                    @error('website_permission')
                        <span class="vpm-field__error" role="alert">{{ $message }}</span>
                    @enderror
                </div>

                <button type="submit" class="vpm-push-notifications__submit">Update</button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(() => {
    const el = document.getElementById('vpm-browser-notification-permission');
    if (!el) return;

    if (!('Notification' in window)) {
        el.textContent = 'unsupported';
        return;
    }

    const label = Notification.permission || el.dataset.default || 'unknown';
    el.textContent = label;
})();
</script>
@endpush