@extends('customer.layout')

@section('title','Settings')

@section('content')

<h3 class="fw-bold mb-4">Account Settings</h3>

{{-- SUCCESS MESSAGE --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        {{ session('success') }}
        <button class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row g-4">

    <!-- LEFT: SETTINGS MENU -->
    <div class="col-lg-4">
        <div class="card shadow-sm">
            <div class="list-group list-group-flush">

                <a href="#notifications"
                   class="list-group-item list-group-item-action active"
                   data-bs-toggle="tab">
                    <i class="bi bi-bell me-2"></i> Notifications
                </a>

                <a href="#security"
                   class="list-group-item list-group-item-action"
                   data-bs-toggle="tab">
                    <i class="bi bi-shield-lock me-2"></i> Security
                </a>

                <a href="#preferences"
                   class="list-group-item list-group-item-action"
                   data-bs-toggle="tab">
                    <i class="bi bi-sliders me-2"></i> Preferences
                </a>

            </div>
        </div>
    </div>

    <!-- RIGHT: SETTINGS CONTENT -->
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-body tab-content">

                <!-- NOTIFICATIONS -->
                <div class="tab-pane fade show active" id="notifications">

                    <h6 class="fw-bold mb-3">Notification Settings</h6>

                    <form method="POST" action="#">
                        @csrf

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="orderUpdates"
                                   checked>
                            <label class="form-check-label" for="orderUpdates">
                                Order status updates
                            </label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="deliveryAlerts"
                                   checked>
                            <label class="form-check-label" for="deliveryAlerts">
                                Delivery alerts
                            </label>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="promotions">
                            <label class="form-check-label" for="promotions">
                                Promotions & offers
                            </label>
                        </div>

                        <button class="btn btn-primary mt-2">
                            Save Notifications
                        </button>

                    </form>

                </div>

                <!-- SECURITY -->
                <div class="tab-pane fade" id="security">

                    <h6 class="fw-bold mb-3">Security</h6>

                    <form method="POST" action="#">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">Current Password</label>
                            <input type="password"
                                   class="form-control"
                                   placeholder="••••••••">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">New Password</label>
                            <input type="password"
                                   class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Confirm New Password</label>
                            <input type="password"
                                   class="form-control">
                        </div>

                        <button class="btn btn-warning">
                            Update Password
                        </button>

                    </form>

                </div>

                <!-- PREFERENCES -->
                <div class="tab-pane fade" id="preferences">

                    <h6 class="fw-bold mb-3">Preferences</h6>

                    <form method="POST" action="#">
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">Language</label>
                            <select class="form-select">
                                <option selected>English</option>
                                <option>Sinhala</option>
                                <option>Tamil</option>
                            </select>
                        </div>

                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="darkMode">
                            <label class="form-check-label" for="darkMode">
                                Enable Dark Mode
                            </label>
                        </div>

                        <button class="btn btn-primary">
                            Save Preferences
                        </button>

                    </form>

                </div>

            </div>
        </div>
    </div>

</div>

@endsection