@extends('layouts.app')

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

@section('panel-actions')
    <button id="exportBtn" class="btn btn-success btn-sm px-3 shadow-sm">
        <i class="fas fa-file-csv mr-1"></i> Export CSV
    </button>
@endsection

@section('content')
<div class="row">
    <!-- Info Boxes -->
    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box shadow-sm border-left-warning">
            <span class="info-box-icon bg-warning"><i class="fas fa-clock text-white"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Late Punches</span>
                <span class="info-box-number" id="totalLate">-</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box shadow-sm border-left-danger">
            <span class="info-box-icon bg-danger"><i class="fas fa-hourglass-half text-white"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Low Hours</span>
                <span class="info-box-number" id="totalLowHours">-</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-12" title="No punch out recorded">
        <div class="info-box shadow-sm border-left-secondary">
            <span class="info-box-icon bg-secondary"><i class="fas fa-exclamation-circle text-white"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Incomplete</span>
                <span class="info-box-number" id="totalIncomplete">-</span>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box shadow-sm border-left-primary">
            <span class="info-box-icon bg-primary"><i class="fas fa-list text-white"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total Flagged</span>
                <span class="info-box-number" id="totalIssues">-</span>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-danger">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-search mr-2"></i>Filter Exceptions</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">Start Date</label>
                    <input type="date" id="start_date" class="form-control form-control-sm" value="{{ now()->startOfMonth()->toDateString() }}">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="small font-weight-bold">End Date</label>
                    <input type="date" id="end_date" class="form-control form-control-sm" value="{{ now()->endOfMonth()->toDateString() }}">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="small font-weight-bold">Employee</label>
                    <select id="employee_filter" class="form-control form-control-sm select2-ajax">
                        <option value="">All Staff</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label class="small font-weight-bold">Issue Type</label>
                    <select id="issue_type_filter" class="form-control form-control-sm">
                        <option value="">All Flags</option>
                        <option value="late">Late Arrival</option>
                        <option value="low_hours">Short Working Hours</option>
                        <option value="incomplete">Missing Punch Out</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>&nbsp;</label>
                    <button id="applyFilter" class="btn btn-primary btn-sm btn-block">
                        <i class="fas fa-sync-alt mr-1"></i> Update
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-secondary">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-table mr-2"></i>Detailed Exception Logs</h3>
    </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="issuesTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Employee</th>
                        <th>Date</th>
                        <th>Punch In</th>
                        <th>Punch Out</th>
                        <th>Hours</th>
                        <th>Flag Reason</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    $('.select2-ajax').select2({
        theme: 'bootstrap4',
        ajax: {
            url: "{{ route('employees.search') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) { return { term: params.term }; },
            processResults: function (data) { return { results: data.results }; },
            cache: true
        },
        placeholder: 'Find staff...',
        allowClear: true
    });

    let table = $('#issuesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('reports.attendance.issues.data') }}",
            data: function(d) {
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.employee_id = $('#employee_filter').val();
                d.issue_type = $('#issue_type_filter').val();
            }
        },
        columns: [
            {data: 'employee_id_display', name: 'employee.employee_id'},
            {data: 'employee_name', name: 'employee.name', render: function(data){ return '<strong>'+data+'</strong>'; }},
            {data: 'date', name: 'date'},
            {data: 'punch_in_time', name: 'punch_in'},
            {data: 'punch_out_time', name: 'punch_out'},
            {data: 'worked_hours', name: 'worked_hours', orderable: false},
            {data: 'issues', name: 'issues', orderable: false}
        ],
        order: [[2, 'desc']],
        pageLength: 25,
        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) {
            updateSummary(settings.json);
            $('.dataTables_paginate > .pagination').addClass('pagination-sm');
        }
    });

    function updateSummary(data) {
        if (data && data.recordsFiltered !== undefined) {
            $('#totalIssues').text(data.recordsFiltered);
            // Summary logic can be expanded if backend provides specific counts
            $('#totalLate').text('-');
            $('#totalLowHours').text('-');
            $('#totalIncomplete').text('-');
        }
    }

    $('#applyFilter').click(function() { table.draw(); });

    $('#exportBtn').click(function() {
        const params = new URLSearchParams({
            start_date: $('#start_date').val(),
            end_date: $('#end_date').val(),
            employee_id: $('#employee_filter').val(),
            issue_type: $('#issue_type_filter').val()
        });
        window.location.href = "{{ route('reports.attendance.issues.export') }}?" + params.toString();
    });
});
</script>
<style>
    .border-left-warning { border-left: 4px solid #ffc107 !important; }
    .border-left-danger { border-left: 4px solid #dc3545 !important; }
    .border-left-secondary { border-left: 4px solid #6c757d !important; }
    .border-left-primary { border-left: 4px solid #007bff !important; }
</style>
@endpush