@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-xl px-4">
                <div class="page-header-content pt-4">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto mt-4">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="activity"></i>
                                </div>
                                Dashboard
                            </h1>
                            <div class="page-header-subtitle">
                                Tóm tắt ngắn gọn về các số liệu chính, xu hướng và thông tin chi tiết quan trọng về quản lý
                                nhân sự
                            </div>
                        </div>

                        {{--                        <div class="col-12 col-xl-auto mt-4"> --}}
                        {{--                            <div --}}
                        {{--                                class="input-group input-group-joined border-0" --}}
                        {{--                                style="width: 16.5rem" --}}
                        {{--                            > --}}
                        {{--                      <span class="input-group-text" --}}
                        {{--                      ><i class="text-primary" data-feather="calendar"></i --}}
                        {{--                          ></span> --}}
                        {{--                                <input --}}
                        {{--                                    class="form-control ps-0 pointer" --}}
                        {{--                                    id="litepickerRangePlugin" --}}
                        {{--                                    placeholder="Select date range..." --}}
                        {{--                                /> --}}
                        {{--                            </div> --}}
                        {{--                        </div> --}}
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-full px-4 mt-n10">
            <div class="row">
                <div class="col-xxl-4 col-xl-12 mb-4">
                    <div class="card h-100">
                        <div class="card-body h-100 p-5">
                            <div class="row align-items-center">
                                <div class="col-xl-8 col-xxl-12">
                                    <div class="text-center text-xl-start text-xxl-center mb-4 mb-xl-0 mb-xxl-4">
                                        <h1 class="text-primary">Chào mừng bạn đến với Bảng điều khiển quản lý nhân sự của
                                            bạn!</h1>
                                        <p class="text-gray-700 mb-0">
                                            Quản lý nhân viên, hợp lý hóa quy trình làm việc và tối ưu hóa hoạt động nhân sự
                                            một cách dễ dàng bằng các công cụ và tài nguyên mạnh mẽ của chúng tôi.
                                        </p>
                                    </div>
                                </div>
                                {{--                                <div class="col-xl-4 col-xxl-12 text-center"> --}}
                                {{--                                    <img --}}
                                {{--                                        class="img-fluid" --}}
                                {{--                                        src="{{ asset('assets/img/illustrations/at-work.svg') }}" --}}
                                {{--                                        style="max-width: 26rem" --}}
                                {{--                                    /> --}}
                                {{--                                </div> --}}
                            </div>
                        </div>
                    </div>
                </div>


                {{-- -------------------- Announcements -------------------- --}}

                <div class="col-xxl-8 col-xl-12 mb-4">
                    <div class="card card-header-actions h-100">
                        <div class="card-header">
                            Quy định
                        </div>

                        <div class="card-body">
                            <div class="timeline timeline-xs">

                                @foreach ($notices as $announcement)
                                    <!-- Timeline Item 1-->
                                    <div class="timeline-item">
                                        <div class="timeline-item-marker">
                                            <div class="timeline-item-marker-text">
                                                {{ $announcement->created_at->diffForHumans() }}</div>
                                            <div class="timeline-item-marker-indicator bg-green"></div>
                                        </div>
                                        <div class="timeline-item-content">
                                            <a class="fw-bold text-dark"
                                                href="{{ route('notices.index') }}">{{ $announcement->title }} -</a>
                                            {{ \Illuminate\Support\Str::limit($announcement->description, 200, '...') }}
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xxl-4 col-xl-12 mb-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                <span class="fw-semibold">📊 Vi phạm
                                    @if ($viewMode === 'year')
                                        năm {{ $currentYear }}
                                    @else
                                        tháng {{ $currentMonth }}/{{ $currentYear }}
                                    @endif
                                </span>
                                <form method="GET" action="{{ request()->url() }}"
                                    class="d-flex flex-wrap align-items-center gap-2 mb-0">
                                    <select name="view_mode" class="form-select form-select-sm" style="min-width:110px;"
                                        onchange="this.form.submit()">
                                        <option value="month" {{ $viewMode === 'month' ? 'selected' : '' }}>Theo tháng
                                        </option>
                                        <option value="year" {{ $viewMode === 'year' ? 'selected' : '' }}>Theo năm
                                        </option>
                                    </select>
                                    @if ($viewMode === 'month')
                                        <select name="month" class="form-select form-select-sm" style="min-width:100px;"
                                            onchange="this.form.submit()">
                                            @foreach (range(1, 12) as $m)
                                                <option value="{{ $m }}"
                                                    {{ $selectedMonth == $m ? 'selected' : '' }}>Tháng {{ $m }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                    <select name="year" class="form-select form-select-sm" style="width: auto;"
                                        onchange="this.form.submit()">
                                        @foreach (range(\Carbon\Carbon::now()->year - 3, \Carbon\Carbon::now()->year) as $y)
                                            <option value="{{ $y }}"
                                                {{ $selectedYear == $y ? 'selected' : '' }}>{{ $y }}</option>
                                        @endforeach
                                    </select>
                                </form>
                            </div>
                        </div>
                        <div class="card-body">
                            <table id="datatablesSimple2">
                                <thead>
                                    <tr>
                                        <th>Nhân viên</th>
                                        <th>Nghỉ phép</th>
                                        <th>Đi muộn/về sớm</th>
                                        <th>Tổng vi phạm</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($employeeStats as $stat)
                                        <tr>
                                            <td>{{ $stat['name'] }}</td>
                                            <td>
                                                @if ($stat['leave'] > 0)
                                                    <span class="badge bg-info">{{ $stat['leave'] }} ngày</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($stat['late'] > 0 || $stat['early_leave'] > 0)
                                                    <span
                                                        class="badge bg-warning text-dark">{{ $stat['late'] + $stat['early_leave'] }}
                                                        lần</span>
                                                @else
                                                    <span class="text-muted">—</span>
                                                @endif
                                            </td>
                                            <td>
                                                @php $total = $stat['leave'] + $stat['late'] + $stat['early_leave']; @endphp
                                                @if ($total >= 5)
                                                    <span class="badge bg-danger">{{ $total }}</span>
                                                @elseif($total >= 3)
                                                    <span class="badge bg-warning text-dark">{{ $total }}</span>
                                                @else
                                                    <span class="badge bg-success">{{ $total }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-3">Không có dữ liệu vi phạm
                                                đã duyệt trong tháng này</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-8 col-xl-12 mb-4">
                    <div class="card mb-4">
                        <div class="card-header">Xem tất cả chấm công hôm nay</div>
                        <div class="card-body">

                            <table id="datatablesSimple">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Ngày</th>
                                        <th>Giờ vào</th>
                                        <th>Giờ ra</th>
                                        <th>Trạng thái</th>
                                        <th>Giờ làm việc</th>
                                        <th>Thao tác</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($attendances as $attendance)
                                        <tr>
                                            <td>{{ $attendance->employee->name ?? '' }}</td>
                                            <td>{{ \Carbon\Carbon::parse($attendance->date)->format('d/m/Y') ?? '' }}</td>
                                            <td>
                                                {{ $attendance->check_in_time ? \Carbon\Carbon::parse($attendance->check_in_time)->format('h:i A') : '' }}
                                            </td>
                                            <td>
                                                {{ $attendance->check_out_time ? \Carbon\Carbon::parse($attendance->check_out_time)->format('h:i A') : '' }}
                                            </td>
                                            <td>
                                                @if ($attendance->status == 'Late')
                                                    <span class="badge bg-warning">Đi muộn</span>
                                                @elseif($attendance->status == 'EarlyLeave')
                                                    <span class="badge bg-warning">Về sớm</span>
                                                @elseif($attendance->status == 'Present')
                                                    <span class="badge bg-success">Có mặt</span>
                                                @elseif($attendance->status == 'MissingPunch')
                                                    <span class="badge bg-info">Quên chấm công</span>
                                                @else
                                                    {{ $attendance->status }}
                                                @endif
                                            </td>


                                            {{-- -------------------------- Natural hour to minuite convertion -------------------------- --}}

                                            <td>
                                                @php
                                                    $hours = floor($attendance->working_hours);
                                                    $minutes = round(($attendance->working_hours - $hours) * 60);

                                                    $parts = [];

                                                    if ($hours > 0) {
                                                        $parts[] = $hours . ' ' . ($hours === 1 ? 'hr' : 'hrs');
                                                    }

                                                    if ($minutes > 0) {
                                                        $parts[] = $minutes . ' ' . ($minutes === 1 ? 'min' : 'mins');
                                                    }

                                                    $formattedTime = count($parts) ? implode(' ', $parts) : '0 min';
                                                @endphp

                                                {{ $formattedTime }}
                                            </td>


                                            {{-- -------------------------- Natural hour to minuite convertion -------------------------- --}}

                                            @if (auth()->user()->hasRole('manager') || auth()->user()->hasRole('employee'))
                                                <td></td>
                                            @else
                                                <td>
                                                    <a href="{{ route('attendance_edit', $attendance->id) }}"
                                                        class="btn btn-datatable btn-icon btn-transparent-dark"
                                                        title="Edit">
                                                        <i data-feather="edit"></i>
                                                    </a>
                                                </td>
                                            @endif


                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>


                        </div>
                    </div>
                </div>
            </div>




        </div>
    </main>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Override datatablesSimple cho trang này: hiển thị 25 dòng
            if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                $('#datatablesSimple').DataTable().destroy();
            }
            if ($('#datatablesSimple').length > 0) {
                $('#datatablesSimple').DataTable({
                    pageLength: 25,
                    rowReorder: { selector: 'td:nth-child(2)' },
                    responsive: true,
                });
            }

            if ($('#datatablesSimple2').length > 0) {
                $('#datatablesSimple2').DataTable({
                    responsive: true,
                    pageLength: 25,
                    language: {
                        search: "Tìm kiếm:",
                        lengthMenu: "Hiển thị _MENU_ dòng",
                        info: "Hiển thị _START_ - _END_ / _TOTAL_ nhân viên",
                        paginate: {
                            first: "Đầu",
                            last: "Cuối",
                            next: "Sau",
                            previous: "Trước"
                        },
                        zeroRecords: "Không có dữ liệu vi phạm trong tháng này",
                        emptyTable: "Không có dữ liệu vi phạm đã duyệt trong tháng này"
                    },
                    columnDefs: [{
                            orderable: false,
                            targets: [1, 2]
                        } // Không sort cột badge
                    ],
                    order: [
                        [3, 'desc']
                    ] // Sắp xếp theo cột Tổng vi phạm giảm dần
                });
            }
        });
    </script>
@endpush