@extends('layouts.app')

@section('title', 'Daily Attendance Report')

@section('panel-actions')
    <div class="d-flex align-items-center">
        <input type="date" id="report_date" class="form-control form-control-sm mr-2" value="{{ $date }}">
        <button onclick="refreshTable()" class="btn btn-primary btn-sm"><i class="fas fa-sync-alt mr-1"></i> Refresh</button>
    </div>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <!-- Summary Widgets -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="info-box premium-info-box bg-premium-primary shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">Total Employees</span>
                        <span class="info-box-number h5 mb-0" id="widget_total">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box premium-info-box bg-premium-success shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-user-check"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">Present Today</span>
                        <span class="info-box-number h5 mb-0" id="widget_present">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box premium-info-box bg-premium-danger shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-user-xmark"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">Absent</span>
                        <span class="info-box-number h5 mb-0" id="widget_absent">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box premium-info-box bg-premium-info shadow-sm">
                    <span class="info-box-icon"><i class="fa-solid fa-umbrella-beach"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text text-uppercase">On Leave</span>
                        <span class="info-box-number h5 mb-0" id="widget_leave">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-primary shadow-sm">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-calendar-day mr-2 text-primary"></i>Attendance Records</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-bordered table-striped w-100 mb-0" id="dailyReportTable">
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Designation</th>
                        <th>Status</th>
                        <th>Punch In</th>
                        <th>Punch Out</th>
                        <th>Working Hours</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let table;
    $(document).ready(function() {
        table = $('#dailyReportTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('reports.attendance.daily') }}",
                data: function (d) {
                    d.date = $('#report_date').val();
                }
            },
            columns: [
                { data: 'name', name: 'name', render: function(data){ return '<strong>'+data+'</strong>'; } },
                { data: 'designation', name: 'designation' },
                { 
                    data: 'status', 
                    name: 'status',
                    render: function(data) {
                        let badgeClass = 'badge-secondary';
                        if (data === 'Present') badgeClass = 'badge-success';
                        else if (data === 'Absent') badgeClass = 'badge-danger';
                        else if (data.includes('Leave')) badgeClass = 'badge-info';
                        return `<span class="badge ${badgeClass}" title="${data}">${data}</span>`;
                    }
                },
                { data: 'punch_in', name: 'punch_in' },
                { data: 'punch_out', name: 'punch_out' },
                { data: 'duration', name: 'duration' }
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search report...",
                paginate: {
                    previous: '<i class="fas fa-chevron-left"></i>',
                    next: '<i class="fas fa-chevron-right"></i>'
                }
            },
            drawCallback: function(settings) {
                $('.dataTables_paginate > .pagination').addClass('pagination-sm');
                $('[data-toggle="tooltip"]').tooltip();

                // Update widgets from AJAX response
                if (settings.json && settings.json.aggregates) {
                    const agg = settings.json.aggregates;
                    $('#widget_total').text(agg.total);
                    $('#widget_present').text(agg.present);
                    $('#widget_absent').text(agg.absent);
                    $('#widget_leave').text(agg.leave);
                }
            },
            dom: '<"p-3 d-flex justify-content-between align-items-center"Bf>t<"p-3 d-flex justify-content-between align-items-center"ip>',
            buttons: [
                {
                    extend: 'excel',
                    text: '<i class="fas fa-file-excel mr-2"></i><b>EXCEL EXPORT</b>',
                    className: 'btn btn-success px-4 shadow-sm mr-2'
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print mr-2"></i><b>PRINT REPORT</b>',
                    className: 'btn btn-info px-4 shadow-sm'
                }
            ]
        });
    });

    function refreshTable() {
        table.ajax.reload();
    }
</script>
@endpush