@extends($layout)

@section('title', $title.' · '.config('brand.name'))

@section('content')
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4 class="fw-bold">{{ $heading }}</h4>
                    <h6>{{ $summary }}</h6>
                </div>
            </div>
            <div class="page-btn">
                <a href="{{ $inboxUrl }}" class="btn btn-white">Back to notifications</a>
            </div>
        </div>

        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif

        @isset($showAccountTabs)
            @include('admin.account.partials.tabs')
        @endisset

        <div class="row">
            <div class="col-lg-8">
                <form method="POST" action="{{ $updateRoute }}">
                    @csrf
                    @method('PUT')
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="mb-0">In-app alerts</h5>
                        </div>
                        <div class="card-body">
                            @forelse ($keys as $key => $label)
                                <div class="form-check mb-3">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        name="prefs[{{ $key }}]"
                                        id="pref-{{ $key }}"
                                        value="1"
                                        @checked($prefs[$key] ?? true)
                                    >
                                    <label class="form-check-label" for="pref-{{ $key }}">{{ $label }}</label>
                                </div>
                            @empty
                                <p class="mb-0 text-muted">No preference options for this account.</p>
                            @endforelse
                        </div>
                        <div class="card-footer bg-white">
                            <button class="btn btn-primary" type="submit">Save preferences</button>
                        </div>
                    </div>
                </form>

                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Email</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-0 text-muted">Email notifications will be added later. Your in-app choices above already control the bell and Notification Centre.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection