@extends('layout.mainlayout')
    @section('content')
    @if (Auth::check())
 
        <!-- Page Wrapper -->
        <div class="page-wrapper cardhead">
            <div class="content">

                <div class="row">
                    <div class="col-md-12">
                        @component('components.breadcrumb')
                            @slot('title')
                                Dashboard
                            @endslot
                        @endcomponent
                    </div>
                </div>
     
                    <div class="row">
                        @can('recent-onboarding-charts')
                        <div class="col-md-6 d-flex">
                            <div class="card flex-fill">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                                        <h4><i class="ti ti-grip-vertical me-1"></i>Recent Onboarding</h4>

                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="table-responsive custom-table">
                                        <table class="table dataTable">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Phone</th>
                                                    <th>Designation</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                                @forelse($recent_onbording as $recent_onbording)
                                                    <tr>
                                                        <td>{{ $recent_onbording->first_name . ' ' . $recent_onbording->last_name }}
                                                        </td>
                                                        <td>{{ $recent_onbording->professional_email }}</td>
                                                        <td>{{ $recent_onbording->phone }}</td>
                                                        <td>{{ $recent_onbording->designationDetails->name ?? 'N/A' }}</td>
                                                        <td>
                                                            @if ($recent_onbording->onboarding_status == 1)
                                                                <span class="badge bg-success">Pending</span>
                                                            @elseif($recent_onbording->onboarding_status == 2)
                                                                <span class="badge bg-danger">Approved</span>
                                                            @endif
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" class="text-center">No Onboarding today</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endcan

                        @can('recent-resignation-charts')
                        <div class="col-md-6 d-flex">
                            <div class="card flex-fill">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                                        <h4><i class="ti ti-grip-vertical me-1"></i>Recent Resignation</h4>
                                        <div class="d-flex align-items-center flex-wrap row-gap-2">

                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="won-chart"></div>
                                    <div class="table-responsive custom-table">
                                        <table class="table dataTable">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Phone</th>
                                                    <th>Designation</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endcan
                    </div>
               

               

                    <div class="row">
                        @can('today-birthday-charts')
                          <div class="col-md-6 d-flex">
                            <div class="card flex-fill">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                                        <h4><i class="ti ti-grip-vertical me-1"></i>Today Birthday's</h4>
                                        <div class="d-flex align-items-center flex-wrap row-gap-2">

                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="deals-chart"></div>
                                    <div class="table-responsive custom-table">
                                        <table class="table dataTable">
                                            <thead class="thead-light">
                                                <tr><th>Action</th>
                                                    <th>Name</th>
                                                    <th>Designation</th>
                                                    <th>Location</th>
                                                   
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $wishedIds = session('wished_ids', []);
                                                @endphp
                                                @forelse($birthdays as $birthday)
                                                    <tr>
                                                           <td>
                                                            @if(!in_array($birthday->id, $wishedIds))
                                                                <form method="POST" action="{{ route('send-birthday-wish', $birthday->id) }}">
                                                                    @csrf
                                                                    <button type="submit" class="btn btn-sm btn-success">Send Birthday Wish</button>
                                                                </form>
                                                            @else
                                                                <span class="badge bg-info">Wished</span>
                                                            @endif
                                                        </td>
                                                        <td>{{ $birthday->first_name . ' ' . $birthday->last_name }}</td>
                                                        <td>{{ $birthday->designationDetails->name ?? 'N/A' }}</td>
                                                        <td>{{ $birthday->locationDetails->name ?? 'N/A' }}</td>
                                                     
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="5" class="text-center">No birthdays today</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endcan

                        @can('recent-notifiction-chart')
                        <div class="col-md-6 d-flex">
                            <div class="card flex-fill">
                                <div class="card-header border-0 pb-0">
                                    <div class="d-flex align-items-center justify-content-between flex-wrap row-gap-3">
                                        <h4><i class="ti ti-grip-vertical me-1"></i>Recent Notifications</h4>
                                        <div class="d-flex align-items-center flex-wrap row-gap-2">
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="last-chart"></div>
                                    <div class="table-responsive custom-table">
                                        <table class="table dataTable">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Notification</th>
                                                    <th>Status</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                @php
                                                    $recentNotifications = auth()->user()->notifications()->orderBy('created_at', 'desc')->take(5)->get();
                                                @endphp
                                                @forelse($recentNotifications as $notification)
                                                    <tr style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('notif-form-{{ $notification->id }}').submit();">
                                                        <td>{{ $notification->created_at->format('d M Y, h:i A') }}</td>
                                                        <td>
                                                            <strong>{{ $notification->data['title'] ?? 'Notification' }}</strong>
                                                            <div class="small text-muted">{!! $notification->data['message'] ?? '' !!}</div>
                                                        </td>
                                                        <td>
                                                            @if(!$notification->read_at)
                                                                <span class="badge bg-primary">New</span>
                                                            @else
                                                                <span class="badge bg-secondary">Read</span>
                                                            @endif
                                                        </td>
                                                        <form id="notif-form-{{ $notification->id }}" method="POST" action="{{ route('notifications.markAsRead', $notification->id) }}" style="display:none;">
                                                            @csrf
                                                        </form>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" class="text-center">No notifications found.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                        <div class="mt-3 text-end">
                                            <a href="{{ route('notifications.index') }}" class="btn btn-outline-primary btn-sm">View All Notifications</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                            @endcan
                    </div>


                    <div class="row">
                    @can('user-department-wise-chart')
                        <!-- Chart -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Users Department Wise</div>
                                </div>
                                <div class="card-body chart-set">
                                    <div class="h-250" id="UserDepartmentWise"></div>
                                </div>
                            </div>
                        </div>
                        @endcan
                        <!-- /Chart -->

                        <!-- Chart -->
                        @can('user-onboarding-status-chart')
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Onboarding Status</div>
                                </div>
                                <div class="card-body chart-set">
                                    <div class="h-250" id="OnboardingStatus"></div>
                                </div>
                            </div>
                        </div>
                        @endcan
                        <!-- /Chart -->
                    </div>

                    <div class="row">
                        
                        <!-- Chart -->
                        {{-- <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Resignations Designation wise wrt Months</div>
                                </div>
                                <div class="card-body chart-set">
                                    <div class="h-250" id="flotArea1"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /Chart -->

                        <!-- Chart -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Onboarding Designation wise wrt Months</div>
                                </div>
                                <div class="card-body chart-set">
                                    <div class="h-250" id="flotArea2"></div>
                                </div>
                            </div>
                        </div> --}}

                        @can('onboarding-department-wise-chart')
                           <div class="col-md-12">	
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Onboarding Department wise wrt Months</div>
                                </div>
                                <div class="card-body chart-set">
                                    <div class="h-250" id="OnbordingDepartWise"></div>
                                </div>
                            </div>
                        </div>
                        @endcan
{{-- 
                            <div class="col-md-12">	
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title">Resignations Department wise wrt Months</div>
                                </div>
                                <div class="card-body chart-set">
                                    <div  class="h-250" id="flotBar3"></div>
                                </div>
                            </div>
                        </div> --}}

                        
                        <!-- /Chart -->
                 </div>
            </div>
        </div>
    </div>
@endif
    <!-- /Page Wrapper -->
@endsection

@push('scripts')
<script>
    $(function() {
        // Department Wise Pie Chart (dynamic)
        var departmentPieData = @json($departmentWiseUsers ?? []);
        $.plot('#UserDepartmentWise', departmentPieData, {
            series: {
                pie: {
                    show: true,
                    label: {
                        show: false // Hide labels by default
                    }
                },
                legend: {
                    show: true
                }
            }
        });

        // Onboarding Status Donut Chart (dynamic)
        var onboardingStatusData = [
            {
                label: "Pending",
                data: {{ isset($onboardingStatus['pending']) ? $onboardingStatus['pending'] : 0 }},
                color: "#ffc107"
            },
            {
                label: "Approved",
                data: {{ isset($onboardingStatus['approved']) ? $onboardingStatus['approved'] : 0 }},
                color: "#28a745"
            }
        ];
        $.plot('#OnboardingStatus', onboardingStatusData, {
            series: {
                pie: {
                    innerRadius: 0.5,
                    show: true,
                    label: {
                        show: true,
                        radius: 0.8,
                        formatter: function(label, series) {
                            return '<div style="font-size:13px;text-align:center;padding:2px;color:white;">'
                                + label + '<br/>' + series.data[0][1] + '</div>';
                        },
                        background: {
                            opacity: 0.6,
                            color: '#000'
                        }
                    }
                }
            },
            legend: {
                show: true
            }
        });

    
        // Example data for Onboarding Department wise wrt Months
        // You should generate this data in your controller and pass as $onboardingDeptMonthData
        var onboardingDeptMonthData = {!! json_encode($onboardingDeptMonthData ?? []) !!};
        var months = {!! json_encode($onboardingDeptMonthLabels ?? ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']) !!};

        $.plot('#OnbordingDepartWise', onboardingDeptMonthData, {
            series: {
                bars: {
                    show: true,
                    barWidth: 0.1,
                    align: "center"
                }
            },
            xaxis: {
                ticks: months.map(function(m, i) { return [i, m]; }),
                tickLength: 0
            },
            grid: {
                borderWidth: 1,
                borderColor: '#f0f0f0'
            },
            legend: {
                show: true
            }
        });

        // ...add other chart initializations as needed...
    });


     // Line Chart Example (fix for color error)
        var lineData = [{
            label: "Line 1",
            color: "#007bff",
            data: [
                [0, 1],
                [1, 5],
                [2, 3],
                [3, 7],
                [4, 9],
                [5, 8]
            ]
        }];
        $.plot('#flotArea1', lineData, {
            series: {
                lines: {
                    show: true,
                    fill: true
                },
                points: {
                    show: true
                }
            },
            grid: {
                borderWidth: 1,
                borderColor: '#f0f0f0'
            },
            yaxis: {
                min: 0,
                max: 10
            },
            xaxis: {
                min: 0,
                max: 5
            }
        });

        // Area Chart Points Example
        var areaPointsData = [{
            label: "Area Points",
            color: "#28a745",
            data: [
                [0, 2],
                [1, 4],
                [2, 2],
                [3, 6],
                [4, 5],
                [5, 7]
            ]
        }];
        $.plot('#flotArea2', areaPointsData, {
            series: {
                lines: {
                    show: true,
                    fill: true
                },
                points: {
                    show: true
                }
            },
            grid: {
                borderWidth: 1,
                borderColor: '#f0f0f0'
            },
            yaxis: {
                min: 0,
                max: 10
            },
            xaxis: {
                min: 0,
                max: 5
            }
        });

</script>
@endpush