{{-- resources/views/admin/dashboard.blade.php --}}

@extends('adminlte::page')

@section('title', 'Attendances | ' . Config::get('adminlte.title'))

@section('content_header')
<h1>Attendances</h1>
@stop

@section('content')
{{--Show message if any--}}
@include('layouts.flash-message')

<div class="attendance-shell">
    <div class="attendance-hero">
        <div>
            <p class="hero-kicker">Attendance Operations</p>
            <h2>Review attendance records with cleaner filters and faster staff tracking.</h2>
        </div>
        <a href="{{ route('staff-attendance') }}" class="btn btn-dark">Open Staff Attendance</a>
    </div>

    <div class="row summary-grid">
        <div class="col-md-3 col-6">
            <div class="summary-card border-blue">
                <span>Total Records</span>
                <strong>{{ $summary['total'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card border-green">
                <span>Completed</span>
                <strong>{{ $summary['completed'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card border-amber">
                <span>Open</span>
                <strong>{{ $summary['open'] }}</strong>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card border-red">
                <span>Late</span>
                <strong>{{ $summary['late'] }}</strong>
            </div>
        </div>
    </div>

    <div class="card attendance-card">
        <div class="card-header live-report-header">
            <div>
                <h3 class="card-title">Live Attendance Report</h3>
                <p class="live-report-copy">Today’s attendance activity refreshes automatically on this screen.</p>
            </div>
            <span class="live-report-stamp" id="liveReportStamp">Refreshing...</span>
        </div>
        <div class="card-body">
            <div class="row summary-grid" id="liveSummaryCards">
                <div class="col-md-3 col-6">
                    <div class="summary-card border-blue">
                        <span>Today Records</span>
                        <strong>--</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="summary-card border-amber">
                        <span>Currently Open</span>
                        <strong>--</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="summary-card border-green">
                        <span>Checked Out</span>
                        <strong>--</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="summary-card border-red">
                        <span>Late Today</span>
                        <strong>--</strong>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 mb-4">
                    <div class="live-table-shell">
                        <div class="live-table-head">
                            <h4>Open Attendance</h4>
                            <span>Still checked in</span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0 live-table">
                                <thead>
                                    <tr>
                                        <th>Staff</th>
                                        <th>Check In</th>
                                        <th>Late</th>
                                        <th>In Location</th>
                                    </tr>
                                </thead>
                                <tbody id="liveOpenTable">
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">Loading live attendance...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-4">
                    <div class="live-table-shell">
                        <div class="live-table-head">
                            <h4>Recent Activity</h4>
                            <span>Latest updates today</span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm table-hover mb-0 live-table">
                                <thead>
                                    <tr>
                                        <th>Staff</th>
                                        <th>Check In</th>
                                        <th>Check Out</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="liveRecentTable">
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">Loading live attendance...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card attendance-card">
        <div class="card-header">
            <h3 class="card-title">Attendance List</h3>
        </div>

        <div class="card-body">
            <div id="date_filter">
                <div class="row">
                    @if($canChooseUsers)
                    <div class="col-lg-3 form-group">
                        <label for="user_id">Staff</label>
                        <select name="user_id" id="user_id" class="form-control">
                            <option value="">All Staff</option>
                            @foreach($userOptions as $id => $name)
                            <option value="{{ $id }}" @if((string) $selectedUserId === (string) $id) selected @endif>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div class="col-lg-3 form-group">
                        <label for="status">Status</label>
                        <select name="status" id="status" class="form-control">
                            <option value="">All Status</option>
                            <option value="completed" @if($selectedStatus === 'completed') selected @endif>Completed</option>
                            <option value="open" @if($selectedStatus === 'open') selected @endif>Open</option>
                            <option value="late" @if($selectedStatus === 'late') selected @endif>Late</option>
                        </select>
                    </div>
                    <div class="col-lg-3 form-group">
                        <label for="min">From Date</label>
                        <div class="input-group">
                            <input type="text" name="dateFrom" class="form-control" id="min" placeholder="From Date" autocomplete="off" value="{{ $dateFrom }}">
                            <div class="input-group-append" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 form-group">
                        <label for="max">To Date</label>
                        <div class="input-group">
                            <input type="text" name="dateTo" class="form-control" id="max" placeholder="To Date" autocomplete="off" value="{{ $dateTo }}">
                            <div class="input-group-append" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>

            <div class="table-responsive">
                {!! $html->table(['class' => 'table table-hover table-modern']) !!}
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<link href="{{ asset('vendor/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
<link href="{{ asset('vendor/datatables-plugins/buttons/css/buttons.bootstrap4.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('vendor/bootstrap-datepicker/css/bootstrap-datepicker.css') }}">
<style>
    .attendance-shell {
        display: grid;
        gap: 1.5rem;
    }

    .attendance-hero {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 1rem;
        padding: 1.8rem;
        border-radius: 20px;
        border: 1px solid #d9d7cf;
        background: linear-gradient(135deg, #f1ebdd 0%, #e1edf0 100%);
    }

    .hero-kicker {
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .72rem;
        font-weight: 700;
        color: #5f6978;
        margin-bottom: .3rem;
    }

    .attendance-hero h2 {
        margin: 0;
        font-size: 1.8rem;
        color: #1f2937;
    }

    .summary-card,
    .attendance-card {
        border-radius: 18px;
        border: 1px solid #ddd8cf;
        box-shadow: 0 16px 36px rgba(24, 38, 63, .07);
        background: #fff;
    }

    .summary-card {
        padding: 1rem;
        border-top-width: 4px;
        border-top-style: solid;
    }

    .summary-card span {
        display: block;
        color: #697586;
    }

    .summary-card strong {
        font-size: 2rem;
        color: #18212f;
        line-height: 1.1;
    }

    .border-blue { border-top-color: #2563eb; }
    .border-green { border-top-color: #059669; }
    .border-amber { border-top-color: #d97706; }
    .border-red { border-top-color: #dc2626; }

    .attendance-card .card-header {
        background: transparent;
        border-bottom: 1px solid #e5e7eb;
    }

    .attendance-card label {
        font-size: .8rem;
        color: #6b7280;
        margin-bottom: .45rem;
    }

    .live-report-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 1rem;
    }

    .live-report-copy {
        margin: .3rem 0 0;
        color: #6b7280;
    }

    .live-report-stamp {
        font-size: .78rem;
        color: #475569;
        background: #eef2f7;
        border-radius: 999px;
        padding: .45rem .8rem;
        white-space: nowrap;
    }

    .live-table-shell {
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        overflow: hidden;
        background: #fbfcfe;
    }

    .live-table-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1rem .85rem;
        border-bottom: 1px solid #e5e7eb;
        background: #fff;
    }

    .live-table-head h4 {
        margin: 0;
        font-size: 1rem;
        color: #18212f;
    }

    .live-table-head span {
        font-size: .78rem;
        color: #6b7280;
    }

    .live-table tbody td {
        vertical-align: middle;
    }

    .staff-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-weight: 600;
        color: #18212f;
    }

    .staff-badge-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex: 0 0 auto;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: .3rem .65rem;
        border-radius: 999px;
        font-size: .76rem;
        font-weight: 700;
    }

    .status-pill.open {
        background: #fef3c7;
        color: #92400e;
    }

    .status-pill.completed {
        background: #dcfce7;
        color: #166534;
    }

    .table-modern thead th {
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .76rem;
        color: #6b7280;
        border-top: 0;
    }

    @media (max-width: 991.98px) {
        .attendance-hero {
            flex-direction: column;
            align-items: start;
        }
    }
</style>
@stop

@section('js')
<!--Data tables-->
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/jszip/jszip.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/pdfmake/pdfmake.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/pdfmake/vfs_fonts.js') }}"></script>
{{--Button--}}
<script src="{{ asset('vendor/datatables-plugins/buttons/js/dataTables.buttons.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.colVis.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.html5.js') }}"></script>
<script src="{{ asset('vendor/datatables-plugins/buttons/js/buttons.print.js') }}"></script>
{!! $html->scripts() !!}
{{--Datepicker--}}
<script src="{{ asset('vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/main_index.js'). '?v=' . rand(99999,999999) }}"></script>
<script>
    $(document).ready(function() {
        const liveReportUrl = @json(route('attendances.live-report'));
        let liveReportTimer = null;

        function selectedUserId() {
            const userField = $('#user_id');
            return userField.length ? userField.val() : '';
        }

        function escapeHtml(value) {
            return $('<div>').text(value ?? '').html();
        }

        function renderStaffBadge(record) {
            return `
                <span class="staff-badge">
                    <span class="staff-badge-dot" style="background:${escapeHtml(record.shift_color || '#6c757d')}"></span>
                    ${escapeHtml(record.name || '--')}
                </span>
            `;
        }

        function renderLiveSummary(summary) {
            $('#liveSummaryCards').html(`
                <div class="col-md-3 col-6">
                    <div class="summary-card border-blue">
                        <span>Today Records</span>
                        <strong>${summary.today_total}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="summary-card border-amber">
                        <span>Currently Open</span>
                        <strong>${summary.currently_open}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="summary-card border-green">
                        <span>Checked Out</span>
                        <strong>${summary.checked_out}</strong>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="summary-card border-red">
                        <span>Late Today</span>
                        <strong>${summary.late_today}</strong>
                    </div>
                </div>
            `);
        }

        function renderOpenTable(records) {
            if (!records.length) {
                $('#liveOpenTable').html('<tr><td colspan="4" class="text-center text-muted py-4">No open attendance records right now.</td></tr>');
                return;
            }

            $('#liveOpenTable').html(records.map(function(record) {
                return `
                    <tr>
                        <td>${renderStaffBadge(record)}</td>
                        <td>${escapeHtml(record.in_time || '--')}</td>
                        <td>${escapeHtml(record.late_time || '--')}</td>
                        <td>${escapeHtml(record.in_location || '--')}</td>
                    </tr>
                `;
            }).join(''));
        }

        function renderRecentTable(records) {
            if (!records.length) {
                $('#liveRecentTable').html('<tr><td colspan="4" class="text-center text-muted py-4">No attendance activity found for today.</td></tr>');
                return;
            }

            $('#liveRecentTable').html(records.map(function(record) {
                const statusClass = (record.status || '').toLowerCase() === 'completed' ? 'completed' : 'open';
                return `
                    <tr>
                        <td>${renderStaffBadge(record)}</td>
                        <td>${escapeHtml(record.in_time || '--')}</td>
                        <td>${escapeHtml(record.out_time || '--')}</td>
                        <td><span class="status-pill ${statusClass}">${escapeHtml(record.status || '--')}</span></td>
                    </tr>
                `;
            }).join(''));
        }

        function refreshLiveAttendanceReport() {
            $('#liveReportStamp').text('Refreshing...');

            $.get(liveReportUrl, { user_id: selectedUserId() })
                .done(function(response) {
                    renderLiveSummary(response.summary);
                    renderOpenTable(response.open_records || []);
                    renderRecentTable(response.recent_records || []);
                    $('#liveReportStamp').text('Updated ' + (response.generated_at || 'just now'));
                })
                .fail(function() {
                    $('#liveReportStamp').text('Live report unavailable');
                });
        }

        function startLiveReportPolling() {
            refreshLiveAttendanceReport();

            if (liveReportTimer) {
                clearInterval(liveReportTimer);
            }

            liveReportTimer = setInterval(refreshLiveAttendanceReport, 20000);
        }

        $('#min, #max, #user_id, #status').change(function() {
            window.LaravelDataTables["dataTableBuilder"].draw();
            refreshLiveAttendanceReport();
        });

        $('#min').datepicker({
            format: 'yyyy-mm-dd',
            todayHighlight: 'TRUE',
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            onSelect: function() {
                window.LaravelDataTables["dataTableBuilder"].draw();
            },
        });

        $("#max").datepicker({
            format: 'yyyy-mm-dd',
            todayHighlight: 'TRUE',
            autoclose: true,
            changeMonth: true,
            changeYear: true,
            onSelect: function() {
                window.LaravelDataTables["dataTableBuilder"].draw();
            },
        });

        startLiveReportPolling();
    });
</script>
@stop