@extends('layouts.contentNavbarLayout')

@section('title', 'Dashboard - Manage Employee Attendance')


@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/dashboard">Home</a>
            </li>
            {{--   <li class="breadcrumb-item">
        <a href="/complaints">Support Desk</a>
    </li> --}}
            <li class="breadcrumb-item active">
                Attendance
            </li>
        </ol>
    </nav>
    <div class="row">
        <div class="row">
            <div class="col-12">
                <div class="mb-4">
                    <h5>Attendance</h5>

                    @if (isset($userGroupPermissions['attendance']) && $userGroupPermissions['attendance']['views'] == 1)
                        <div class="row">
                            <div class="col-md-4 mt-3">
                                <div class="card">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <h5>Timesheet</h5>
                                            <p>{{ \Carbon\Carbon::now()->format('j F, Y') }}</p>
                                        </div>
                                    </div>

                                    <div class="card-body">
                                        <div class="punch-det">
                                            <h6>Punch In at</h6>
                                            @if ($latestAttendance && $latestAttendance->in_time)
                                                <p>{{ $latestAttendance->in_time->format('j F Y, h:i A') }}</p>
                                            @else
                                                <p>N/A</p>
                                            @endif
                                        </div>
                                        <div class="punch-info">
                                            <div class="punch-hours">
                                                <span>
                                                    {{ $totalHours ?? '0' }} hr{{ $totalHours != 1 ? 's' : '' }}
                                                    {{ $remainingMinutes ?? '0' }}
                                                    min{{ $remainingMinutes != 1 ? 's' : '' }}
                                                </span>
                                            </div>
                                        </div>

                                        <div class="punch-btn-section">
                                            @if (isset($userGroupPermissions['attendance']) && $userGroupPermissions['attendance']['adds'] == 1)
                                                @if ($latestAttendance && !$latestAttendance->out_time)
                                                    <!-- If punched in but not punched out -->
                                                    <form method="POST" action="{{ route('attendance.punchOut') }}">
                                                        @csrf
                                                        <button type="submit" class="btn1 btn-primary">Punch Out</button>
                                                    </form>
                                                @else
                                                    <!-- If not punched in or punched out -->
                                                    <form method="POST" action="{{ route('attendance.punchIn') }}">
                                                        @csrf
                                                        <button type="submit" class="btn1 btn-primary">Punch In</button>
                                                    </form>
                                                @endif
                                            @else
                                                <!-- No Permission Tooltip -->
                                                <button type="button" class="btn1 btn-secondary" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="You don't have permission. Contact admin"
                                                    disabled>
                                                    Punch In / Out
                                                </button>
                                            @endif

                                            <!-- Include Bootstrap JS for tooltips -->
                                            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
                                            <script>
                                                document.addEventListener('DOMContentLoaded', function() {
                                                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                                                    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                                                        return new bootstrap.Tooltip(tooltipTriggerEl)
                                                    })
                                                });
                                            </script>



                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mt-3">
                                <div class="card">
                                    <h5 class="card-header">Statistics</h5>
                                    <div class="card-body">
                                        <div class="demo-vertical-spacing demo-only-element">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    Today
                                                </div>
                                                <div>
                                                    Total:8Hrs
                                                </div>
                                            </div>
                                            <div class="progress bg-label-primary">
                                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                                                    role="progressbar" style="width: {{ $percentage }}%"
                                                    aria-valuenow="{{ $percentage }}" aria-valuemin="0"
                                                    aria-valuemax="100">
                                                    {{ number_format($percentage, 1) }}%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-5">
                                    @if (session('success'))
                                        <div class="alert alert-success fade-out" id="success-alert">
                                            {{ session('success') }}
                                        </div>
                                    @endif

                                    @if (session('error'))
                                        <div class="alert alert-danger fade-out" id="error-alert">
                                            {{ session('error') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-4 mt-3">
                                <div class="card recent-activity" style="max-height: 400px">

                                    <h5 class="card-header">Today Activity</h5>
                                    <div class="card-body scrollable-content" style="overflow-y: auto">
                                        <ul class="res-activity-list">
                                            @forelse ($activities as $activity)
                                                <li>
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <p class="mb-0">Punch In at</p>
                                                            <p class="res-activity-time">
                                                                <span class="mdi mdi-clock-outline"></span>
                                                                {{ $activity->in_time->format('h:i A') }}.
                                                            </p>
                                                        </div>
                                                        <div>{{ $activity->time ?? 'N/A' }}</div>
                                                        <div>
                                                            <p class="mb-0">Punch Out at</p>
                                                            <p class="res-activity-time">
                                                                <span class="mdi mdi-clock-outline"></span>
                                                                {{ $activity->out_time ? $activity->out_time->format('h:i A') : 'N/A' }}.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                            @empty
                                                <li>No activity for today.</li>
                                            @endforelse
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card p-3 my-4">
                            <table id="example" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Date</th>
                                        <th>Punch In</th>
                                        <th>Punch Out</th>
                                        <th>Total Working Hours</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($dailyAttendance as $index => $attendance)
                                        <tr>
                                            <td>{{ $index + 1 }}</td>
                                            <td>{{ \Carbon\Carbon::parse($attendance->date)->format('j F Y') }}</td>
                                            <td>{{ $attendance->first_in_time ? \Carbon\Carbon::parse($attendance->first_in_time)->format('h:i A') : 'N/A' }}
                                            </td>
                                            <td>{{ $attendance->last_out_time ? \Carbon\Carbon::parse($attendance->last_out_time)->format('h:i A') : 'N/A' }}
                                            </td>
                                            <td>{{ floor($attendance->total_minutes / 60) }} hrs
                                                {{ $attendance->total_minutes % 60 }} mins</td>
                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    @else
                        You Don't Have Permission to View the Attendance.
                    @endif


                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Function to show and fade out alert
                function showAlert(id) {
                    const alert = document.getElementById(id);
                    if (alert) {
                        alert.style.display = 'block';
                        setTimeout(function() {
                            alert.style.opacity = '0';
                            setTimeout(function() {
                                alert.style.display = 'none';
                            }, 500); // Match this with the CSS transition duration
                        }, 2000); // Show for 2 seconds
                    }
                }
                // Show success and error alerts if they exist
                showAlert('success-alert');
                showAlert('error-alert');
            });
        </script>

    </div>
    <!-- jQuery (required for DataTables) -->
@endsection
@section('page-script')

    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true
            });
        });
    </script>
@endsection