@extends('dashboard.layouts.app')

@section('content')
    <div class="container-fluid">
        @include('components.alert')

        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card h-100 border-0 shadow-sm overflow-hidden p-3">
                    <div class="card-header border-bottom py-3 px-5 d-flex align-items-center justify-content-between">
                        <h5 class="mb-0">Manual Attendance Check</h5>
                    </div>

                    <div class="card-body p-4">
                        <div class="alert alert-info mb-4">
                            <div class="d-flex">
                                <iconify-icon icon="mdi:information" class="fs-4 me-2"></iconify-icon>
                                <div>
                                    <h6 class="alert-heading fw-bold mb-1">About Daily Attendance Check</h6>
                                    <p class="mb-0 small">
                                        This process will analyze attendance logs, leaves, holidays, and permissions for all staff on the selected date.
                                        It will automatically generate compensations (penalties) for lateness, absence, or missing logs based on the defined rules.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <form action="{{ route('attendance-check.run') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label for="date" class="form-label fw-semibold">Select Date to Check <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white border-end-0">
                                        <iconify-icon icon="mdi:calendar"></iconify-icon>
                                    </span>
                                    <input type="date" name="date" id="date"
                                           class="form-control border-start-0"
                                           value="{{ old('date') }}"

                                           required>
                                    @error('date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-text text-muted small mt-2">
                                    You can only run checks for today or past dates.
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="submit" id="run-check-btn" class="btn btn-outline-primary py-2 fw-bold d-flex align-items-center justify-content-center flex-grow-1">
                                    <iconify-icon icon="mdi:play-circle" class="me-2 fs-5"></iconify-icon>
                                    Run Attendance Check
                                </button>
                                <button type="submit" formaction="{{ route('attendance-check.clear') }}"
                                        id="clear-check-btn"
                                        class="btn btn-outline-danger py-2 fw-bold d-flex align-items-center justify-content-center px-4"
                                        onclick="return confirm('Are you sure you want to clear all compensation records for the selected date? This cannot be undone.')">
                                    <iconify-icon icon="mdi:delete-sweep" class="me-2 fs-5"></iconify-icon>
                                    Clear Results
                                </button>
                            </div>
                        </form>

                        <div id="results-container" class="mt-5" style="display: none;">
                            <!-- AJAX results will be injected here -->
                        </div>
                    </div>

                    <div class="card-footer bg-light border-top-0 py-3 px-4">
                        <div class="d-flex align-items-center text-muted small">
                            <iconify-icon icon="mdi:shield-check" class="me-2"></iconify-icon>
                            <span>Security Note: This action is logged and will immediately affect staff payroll calculations.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        const dateInput = $('#date');
        const resultsContainer = $('#results-container');
        const runBtn = $('#run-check-btn');
        const clearBtn = $('#clear-check-btn');

        function fetchResults(date) {
            if (!date) return;

            resultsContainer.html('<div class="text-center py-4"><div class="spinner-border text-primary spinner-border-sm" role="status"></div><span class="ms-2">Loading data...</span></div>').show();

            $.ajax({
                url: "{{ route('attendance-check.get-data') }}",
                type: 'GET',
                data: { date: date },
                success: function(response) {
                    if (response.count > 0) {
                        let html = `
                            <h6 class="border-bottom pb-2 mb-3 fw-bold">Check Results for ${date}</h6>
                            <div class="table-responsive">
                                <table class="table table-hover align-middle border">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="small py-2">Employee</th>
                                            <th class="small py-2 text-center">Type</th>
                                            <th class="small py-2">Rule</th>
                                            <th class="small py-2 text-center">Level</th>
                                            <th class="small py-2 text-end">Value</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                        `;

                        response.results.forEach(result => {
                            const typeBadge = result.double_paid_day
                                ? '<span class="badge bg-success-subtle text-success border border-success-subtle">Double Paid Day</span>'
                                : '<span class="badge bg-danger-subtle text-danger border border-danger-subtle">Penalty</span>';

                            // Support both snake_case and camelCase for results
                            const ruleLevel = result.rule_level || result.ruleLevel;
                            const employee = result.employee;
                            const staff = employee ? employee.staff : null;
                            const rule = result.rule;
// console.log(employee);
                            const staffName = staff ? staff.full_name : (employee ? employee.full_name : 'N/A');
                            const levelNumber = ruleLevel ? ruleLevel.level_number : '-';

                            let ruleInfo = rule ? rule.name : '-';
                            if (ruleLevel && ruleLevel.penalty_type) {
                                let typeDisplay = ruleLevel.penalty_type.replace('_', ' ');
                                ruleInfo += ` <span class="text-muted small">(${typeDisplay})</span>`;
                            }

                            let valueDisplay = '-';
                            if (ruleLevel) {
                                if (ruleLevel.penalty_type === 'double_the_previous') {
                                    valueDisplay = '<span class="text-info">Double</span>';
                                } else if (ruleLevel.penalty_value !== null && ruleLevel.penalty_value !== undefined) {
                                    const type = ruleLevel.penalty_type || '';
                                    const unit = type === 'hours' ? 'Hrs' : (type === 'days' ? 'Days' : 'EGP');
                                    valueDisplay = `${ruleLevel.penalty_value} <span class="small text-muted">${unit}</span>`;
                                }
                            }

                            html += `
                                <tr>
                                    <td><div class="fw-semibold">${staffName}</div></td>
                                    <td class="text-center">${typeBadge}</td>
                                    <td><div class="small">${ruleInfo}</div></td>
                                    <td class="text-center"><span class="badge bg-light text-dark border">${levelNumber}</span></td>
                                    <td class="text-end fw-bold">${valueDisplay}</td>
                                </tr>
                            `;
                        });

                        html += `
                                    </tbody>
                                </table>
                            </div>
                        `;
                        resultsContainer.html(html);
                        clearBtn.show();
                    } else {
                        resultsContainer.html(`
                            <div class="alert alert-success d-flex align-items-center mb-0">
                                <iconify-icon icon="mdi:check-circle" class="fs-4 me-2"></iconify-icon>
                                <div>No penalties or double paid days were generated for this date. Everything looks good!</div>
                            </div>
                        `);
                        clearBtn.hide();
                    }
                },
                error: function() {
                    resultsContainer.html('<div class="alert alert-danger mb-0">An error occurred while fetching data.</div>');
                }
            });
        }

        dateInput.on('change', function() {
            fetchResults($(this).val());
        });

        // Trigger on load
        fetchResults(dateInput.val());
    });
</script>
@endpush

@push('styles')
<style>
    .card {
        border-radius: 12px;
    }
    .btn-primary {
        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
        border: none;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    .form-control:focus {
        box-shadow: none;
        border-color: #3b82f6;
    }
    .input-group-text {
        border-color: #dee2e6;
    }
</style>
@endpush