@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>


                @can('overseas-management')
                    <div class="col-md-12 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">
                                    <h4>
                                        <i class="ti ti-alert-triangle me-1 text-warning"></i>
                                        Contracts Expiring Soon (Next 30 Days)
                                    </h4>
                                    <span class="badge bg-warning text-dark">
                                        {{ $contractExpiringSoon->count() }} Upcoming
                                    </span>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="table-responsive custom-table">
                                    <table class="table table-hover">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Country</th>
                                                <th>Contract End Date</th>
                                                <th>Days Left</th>
                                                <th>Reporting Manager</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($contractExpiringSoon as $item)
                                                <tr
                                                    class="{{ $item['days_left'] <= 7 ? 'table-danger' : ($item['days_left'] <= 15 ? 'table-warning' : '') }}">
                                                    <td>{{ $item['name'] }}</td>
                                                    <td>{{ $item['email'] }}</td>
                                                    <td>{{ $item['country'] }}</td>
                                                    <td>{{ $item['ced'] }}</td>
                                                    <td>
                                                        @if ($item['days_left'] <= 0)
                                                            <span class="badge bg-danger">Expired</span>
                                                        @elseif($item['days_left'] <= 7)
                                                            <span class="badge bg-danger">{{ $item['days_left'] }} days</span>
                                                        @elseif($item['days_left'] <= 15)
                                                            <span class="badge bg-warning text-dark">{{ $item['days_left'] }}
                                                                days</span>
                                                        @else
                                                            <span class="badge bg-success">{{ $item['days_left'] }} days</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $item['manager'] }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="6" class="text-center text-muted">
                                                        No contracts expiring in next 30 days 🎉
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                @endcan





                <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