@extends('layouts.account', ['title' => 'Account - Notifications'])

@section('content')
    <!-- Notifications content -->
    <div class="col-lg-9">
        <div class="ps-lg-3 ps-xl-0">
            <!-- Page title + Master switch -->
            <div class="nav flex-nowrap align-items-center justify-content-between pb-3 mb-3 mb-lg-4">
                <h1 class="h2 me-3 mb-0">Notifications</h1>
                <div class="form-check form-switch nav-link animate-underline p-0 m-0"
                    data-master-checkbox='{"container": "#notifications", "label": "Select all", "labelChecked": "Unselect all"}'>
                    <label class="form-check-label animate-target me-5" for="notifications-master">Unselect
                        all</label>
                    <div class="ps-3">
                        <input checked="" class="form-check-input" id="notifications-master" type="checkbox" />
                    </div>
                </div>
            </div>
            <!-- Notification switches list -->
            <div class="vstack gap-4" id="notifications">
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" id="exclusive-offers" type="checkbox" />
                    <label class="form-check-label ps-2" for="exclusive-offers">
                        <span class="d-block h6 mb-2">Exclusive offers</span>
                        <span class="fs-sm">Receive alerts about exclusive discounts, promotions, and special
                            offers tailored just for you.</span>
                    </label>
                </div>
                <div class="form-check form-switch mb-0">
                    <input checked="" class="form-check-input" id="order-updates" type="checkbox" />
                    <label class="form-check-label ps-2" for="order-updates">
                        <span class="d-block h6 mb-2">Order updates</span>
                        <span class="fs-sm">Stay informed about the status of your orders, including
                            confirmations, shipping updates, and delivery notifications.</span>
                    </label>
                </div>
                <div class="form-check form-switch mb-0">
                    <input checked="" class="form-check-input" id="products-recommendations" type="checkbox" />
                    <label class="form-check-label ps-2" for="products-recommendations">
                        <span class="d-block h6 mb-2">Product recommendations</span>
                        <span class="fs-sm">Get personalized recommendations based on your browsing and purchase
                            history to discover new products you'll love.</span>
                    </label>
                </div>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" id="restock" type="checkbox" />
                    <label class="form-check-label ps-2" for="restock">
                        <span class="d-block h6 mb-2">Restock notifications</span>
                        <span class="fs-sm">Be the first to know when out-of-stock items are back in inventory,
                            ensuring you never miss out on your favorite products.</span>
                    </label>
                </div>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" id="events" type="checkbox" />
                    <label class="form-check-label ps-2" for="events">
                        <span class="d-block h6 mb-2">Event reminders</span>
                        <span class="fs-sm">Receive reminders about upcoming sales events, flash sales, or product
                            launches to make sure you're always in the loop.</span>
                    </label>
                </div>
                <div class="form-check form-switch mb-0">
                    <input checked="" class="form-check-input" id="account-security" type="checkbox" />
                    <label class="form-check-label ps-2" for="account-security">
                        <span class="d-block h6 mb-2">Account security alerts</span>
                        <span class="fs-sm">Receive notifications about any suspicious account activity or changes
                            to your login credentials for enhanced security.</span>
                    </label>
                </div>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" id="support" type="checkbox" />
                    <label class="form-check-label ps-2" for="support">
                        <span class="d-block h6 mb-2">Customer support updates</span>
                        <span class="fs-sm">Get updates on any inquiries or support tickets you've submitted,
                            ensuring timely resolution of any issues.</span>
                    </label>
                </div>
            </div>
            <!-- Communication channels -->
            <h2 class="h6 pt-5 mt-md-2">Communication channels</h2>
            <div class="d-flex flex-column gap-2">
                <div class="form-check">
                    <input class="form-check-input" id="sms" type="checkbox" />
                    <label class="form-check-label" for="sms">SMS</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" id="whatsapp" type="checkbox" />
                    <label class="form-check-label" for="whatsapp">Messages in WhatsApp</label>
                </div>
                <div class="form-check">
                    <input checked="" class="form-check-input" id="email" type="checkbox" />
                    <label class="form-check-label" for="email">Email</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" id="push" type="checkbox" />
                    <label class="form-check-label" for="push">App push notifications</label>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
@endsection