@extends("website.layouts.layout")
@section('title',"My Account")
@section("body")

<!-- Banner -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!-- Breadcrumb -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Notifications</li>
            </ol>
        </nav>
    </div>
</section>

<!-- Main Content -->
<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")

            <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <div class="profile-notification d-flex flex-column">
                        <h3 class="font-size-18">Notifications</h3>
                        <div class="notification d-flex flex-column">
                            <div class="push-notification-block d-flex flex-column">
                                <div class="push-notification-items d-flex flex-column">
                                    <h3 class="font-size-18">Push Notification</h3>
                                    <div class="d-flex push-notification-inner-items justify-content-between">
                                        <p class="notification-paragraph">
                                            Project Idea & Offers Job Recommendations & <br>
                                            promotional offers
                                        </p>
                                        <div class="authentication-switch">
                                            <label class="switch">
                                                <input type="checkbox" name="push_notification">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="push-notification-items d-flex flex-column">
                                    <h3 class="font-size-18">Text Message</h3>
                                    <div class="d-flex push-notification-inner-items justify-content-between">
                                        <p class="notification-paragraph">Project Updates</p>
                                        <div class="authentication-switch">
                                            <label class="switch">
                                                <input type="checkbox" name="text_notification_project">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="d-flex push-notification-inner-items justify-content-between">
                                        <p class="notification-paragraph">Project Idea & Offers</p>
                                        <div class="authentication-switch">
                                            <label class="switch">
                                                <input type="checkbox" name="text_notification_offers">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="push-notification-items d-flex flex-column">
                                    <h3 class="font-size-18">Email Notification</h3>
                                    <div class="d-flex push-notification-inner-items justify-content-between">
                                        <p class="notification-paragraph">Project Updates</p>
                                        <div class="authentication-switch">
                                            <label class="switch">
                                                <input type="checkbox" name="email_notification_updates">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="d-flex push-notification-inner-items justify-content-between">
                                        <p class="notification-paragraph">Project Idea & Offers</p>
                                        <div class="authentication-switch">
                                            <label class="switch">
                                                <input type="checkbox" name="email_notification_offers">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('footerItems')
    <!-- Include Toastr CSS and JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

    <script>
        // Fetch the notification settings when the page loads
        $(document).ready(function() {
            // Call the API to get the user's notification settings
            $.ajax({
                url: "{{ route('get.notification.client') }}",
                method: 'GET',
                success: function(response) {
                    if(response.success) {
                        // Set the checkbox values based on the API response
                        $('input[name="push_notification"]').prop('checked', response.success.data.push_notification == '1');
                        $('input[name="text_notification_project"]').prop('checked', response.success.data.text_notification_project == '1');
                        $('input[name="text_notification_offers"]').prop('checked', response.success.data.text_notification_offers == '1');
                        $('input[name="email_notification_updates"]').prop('checked', response.success.data.email_notification_updates == '1');
                        $('input[name="email_notification_offers"]').prop('checked', response.success.data.email_notification_offers == '1');
                    } else {
                        toastr.error(response.error.message); // Show error message via Toastr
                    }
                },
                error: function() {
                    toastr.error('Error fetching notification settings.'); // Show error message via Toastr
                }
            });
        });

        // Handle checkbox change event to update notification settings
        $('.authentication-switch input[type="checkbox"]').on('change', function() {
            let key = $(this).attr('name');  // Get the name (key) of the notification
            let value = $(this).is(':checked') ? '1' : '0';  // Get the value (true/false)

            // Call the API to update the notification settings
            $.ajax({
                url: "{{ route('notification.update.client.web') }}",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',  // CSRF token for security
                    key: key,
                    value: value
                },
                success: function(response) {
                    if(response.success) {
                        toastr.success('Notification updated successfully.'); // Success message via Toastr
                    } else {
                        toastr.error('Error updating notification.'); // Error message via Toastr
                    }
                },
                error: function() {
                    toastr.error('An error occurred while updating notification.'); // Show error via Toastr
                }
            });
        });
    </script>

@endsection