@extends('adminlte::page')

@section('title', 'Retail Dashboard')

@section('content_header')
    <h1 class="mt-4">Welcome, {{ auth()->user()->name }}</h1>
@stop

@section('content')
    <div id="notifications-container">
        @include('partials.notifications')
    </div>

    <div class="row">
        <div class="col-md-6">
            <x-adminlte-small-box title="Sales Management" icon="fas fa-user-plus text-white"
                                  theme="primary" url="/sales" url-text="View all Sales"/>
        </div>
       
    </div>

@stop

@section('js')
    @section('js')
    <script>
        function fetchNotifications() {
            $.ajax({
                url: '{{ route('check.new.orders') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#notifications-container').html(response.html);
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching notifications:', error);
                }
            });
        }

        $(document).ready(function() {
            fetchNotifications();
        });

        setInterval(fetchNotifications, 5000);
        $(document).on('close.bs.alert', '.alert', function() {
            var notificationId = $(this).data('notification-id');
            var token = "{{ csrf_token() }}"; 
            $.ajax({
                url: '/notifications/' + notificationId + '/mark-as-read',
                type: 'POST',
                data: {_token: token}, 
                success: function(response) {
                    if (response.success) {
                        console.log('Notification marked as read');
                    } else {
                        console.error('Failed to mark notification as read');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error marking notification as read:', error);
                }
            });
        });
    </script>
@stop


@stop