@extends('content')

@section('page-content')

<x-wrapper-component>

    <div class="grid grid-cols-12 gap-4">

        <div class="col-span-6">
            <x-home.messages-from-workshop-component />
            <x-home.intercars-discrepancy-component />
            <x-home.intercars-canceled-component />
        </div>

        <div class="col-span-3">
            <x-home.mechanics-cases-component />
            <x-home.working-time-component />
        </div>

        <div class="col-span-3">
            <x-home.orders-chart-component />
        </div>

    </div>

{{--        <div x-data="notificationHandler()" x-init="init()" class="relative">--}}
{{--            <div x-show="visible" class="fixed bottom-15 right-5 bg-slate-800 text-white p-4 rounded shadow-xl max-w-sm space-y-2" style="display:none;">--}}
{{--                <button @click="close" class="absolute top-1 right-2 text-white text-xl">&times;</button>--}}
{{--                <template x-for="notification in notifications" :key="notification.id">--}}
{{--                    <div class="border-b border-slate-300 last:border-b-0 pb-2">--}}
{{--                        <div x-text="notification.message"></div>--}}
{{--                        <div class="text-xs opacity-70" x-text="notification.created_at"></div>--}}
{{--                    </div>--}}
{{--                </template>--}}
{{--            </div>--}}
{{--        </div>--}}
        <!-- Przykład: RefreshCw -->



    </x-wrapper-component>

@endsection

@push('custom-js')
<script>

// function notificationHandler() {
//     return {
//         visible: false,
//         notifications: [],
//         message: '',
//         init() {
//             this.poll()
//             setInterval(() => this.poll(), 30000) // co 30s
//         },
//         async poll() {
//             try {
//                 const res = await fetch('/api/notices/workshop');
//                 const data = await res.json();
//
//                 if (Array.isArray(data) && data.length > 0) {
//                     this.notifications = data;
//                     this.show();
//                 } else {
//                     this.visible = false; // brak powiadomień
//                 }
//             } catch (error) {
//                 console.error("Błąd pobierania powiadomienia", error);
//             }
//         },
//         async markAsRead() {
//             const ids = this.notifications.map(n => n.id);
//             try {
//                 await fetch('/api/notices/workshop/read', {
//                     method: 'POST',
//                     headers: {
//                         'Content-Type': 'application/json',
//                         'Accept': 'application/json',
//                     },
//                     body: JSON.stringify({ ids })
//                 });
//             } catch (e) {
//                 console.error("Nie udało się oznaczyć jako przeczytane", e);
//             }
//         },
//         close() {
//             this.visible = false;
//             //this.markAsRead(); // zamknięcie ręczne też oznacza jako przeczytane
//         },
//         show() {
//             this.visible = true;
//             // setTimeout(() => {
//             //     this.visible = false,
//             //     this.markAsRead()
//             // }, 20000); // znika po 20s
//         }
//     }
// }
// notificationHandler();
</script>
@endpush