@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 chung
                        </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('public_notice_data') }}">{{ $announcement->title }} -</a>
                                            {{ \Illuminate\Support\Str::limit($announcement->description, 200, '...') }}
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Example Colored Cards for Dashboard Demo-->


            {{-- ------------------------- Attendaces Data ------------------------- --}}
            <div class="row">
                <div class="col-xxl-4 col-xl-12 mb-4">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <span>Vi phạm của tôi tháng {{ $empSelectedMonth }}/{{ $empSelectedYear }}</span>
                            <form method="GET" action="{{ request()->url() }}" class="d-flex align-items-center gap-2 mb-0">
                                <select name="month" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                                    @foreach(range(1, 12) as $m)
                                        <option value="{{ $m }}" {{ $empSelectedMonth == $m ? 'selected' : '' }}>Tháng {{ $m }}</option>
                                    @endforeach
                                </select>
                                <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 }}" {{ $empSelectedYear == $y ? 'selected' : '' }}>{{ $y }}</option>
                                    @endforeach
                                </select>
                            </form>
                        </div>
                        <div class="card-body">
                            <div class="row text-center g-3">
                                <div class="col-12">
                                    <div class="p-3 rounded bg-light">
                                        <div class="fs-4 fw-bold text-warning">{{ $empStats['late'] + $empStats['early_leave'] }}</div>
                                        <div class="text-muted small">Đi muộn / Về sớm</div>
                                        <div class="text-muted" style="font-size:0.75rem">
                                            {{ $empStats['late'] }} lần muộn &bull; {{ $empStats['early_leave'] }} lần về sớm
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="p-3 rounded bg-light">
                                        <div class="fs-4 fw-bold text-info">{{ $empStats['leave'] }}</div>
                                        <div class="text-muted small">Ngày nghỉ phép</div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="p-3 rounded {{ ($empStats['late'] + $empStats['early_leave'] + $empStats['leave']) >= 5 ? 'bg-danger bg-opacity-10' : 'bg-light' }}">
                                        <div class="fs-4 fw-bold {{ ($empStats['late'] + $empStats['early_leave'] + $empStats['leave']) >= 5 ? 'text-danger' : 'text-success' }}">
                                            {{ $empStats['late'] + $empStats['early_leave'] + $empStats['leave'] }}
                                        </div>
                                        <div class="text-muted small">Tổng vi phạm</div>
                                    </div>
                                </div>
                            </div>
                        </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</div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="datatablesSimple" class="table table-hover table-sm mb-0">
                                    <thead>
                                        <tr>
                                            <th>Họ tên</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>
                                            @if (auth()->user()->hasRole('admin') || auth()->user()->hasRole('hr'))
                                                <th>Thao tác</th>
                                            @endif
                                        </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('admin') || auth()->user()->hasRole('hr'))
                                                    <td>
                                                        <a href="{{ route('attendance_edit', $attendance->id) }}"
                                                            class="btn btn-datatable btn-icon btn-transparent-dark"
                                                            title="Sửa">
                                                            <i data-feather="edit"></i>
                                                        </a>
                                                    </td>
                                                @endif


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


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

        </div>
    </main>
@endsection