@extends('layouts.app')
@section('title', 'الحضور والانصراف - DOTS HR Pro')

@push('styles')
<style>
.attendance-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid #eee; cursor: pointer; transition: all 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,.12); border-color: #ccc; }
.stat-card .stat-number { font-size: 2rem; font-weight: 700; }
.stat-card .stat-label { color: #666; font-size: 0.9rem; margin-top: 4px; }
.stat-present .stat-number { color: #22c55e; }
.stat-present:hover { border-color: #22c55e; }
.stat-absent .stat-number { color: #ef4444; }
.stat-absent:hover { border-color: #ef4444; }
.stat-late .stat-number { color: #f59e0b; }
.stat-late:hover { border-color: #f59e0b; }
.stat-leave .stat-number { color: #3b82f6; }
.stat-leave:hover { border-color: #3b82f6; }

.attendance-form { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 1px solid #eee; margin-bottom: 24px; }
.attendance-form h3 { margin-bottom: 16px; color: #1B2A4A; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-row .form-group { flex: 1; min-width: 180px; }
.form-row .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: #555; }
.form-row .form-group select,
.form-row .form-group input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; }
.btn-checkin { background: #22c55e; color: #fff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.btn-checkin:hover { background: #16a34a; }
.btn-checkout { background: #E8502F; color: #fff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.btn-checkout:hover { background: #d4421f; }
.btn-manual { background: #1B2A4A; color: #fff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.btn-manual:hover { background: #132038; }
.btn-geo { background: #8b5cf6; color: #fff; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.btn-geo:hover { background: #7c3aed; }
.btn-geo:disabled { background: #c4b5fd; cursor: not-allowed; }

.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.status-present { background: #dcfce7; color: #166534; }
.status-late { background: #fef3c7; color: #92400e; }
.status-absent { background: #fee2e2; color: #991b1b; }
.status-on_leave { background: #dbeafe; color: #1e40af; }

.toggle-section { cursor: pointer; color: #E8502F; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.toggle-section:hover { text-decoration: underline; }
.hidden-section { display: none; }

/* Filter bar */
.filter-bar { display: none; margin-bottom: 16px; padding: 10px 16px; background: #fff3cd; border-radius: 8px; color: #856404; font-weight: 600; justify-content: space-between; align-items: center; }
.filter-bar.show { display: flex; }

/* Row highlight */
.row-highlight { animation: highlightRow 1.5s ease-out; }
@keyframes highlightRow { 0% { background-color: #fef3c7; } 100% { background-color: transparent; } }

/* Geo section */
.geo-section { background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%); border-radius: 12px; padding: 20px; margin-bottom: 24px; border: 1px solid #c7d2fe; }
.geo-section h3 { margin-bottom: 16px; color: #4c1d95; }
.geo-status { padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; margin-top: 10px; display: none; }
.geo-status.success { display: block; background: #dcfce7; color: #166534; }
.geo-status.error { display: block; background: #fee2e2; color: #991b1b; }
.geo-status.loading { display: block; background: #dbeafe; color: #1e40af; }
.geo-coords { font-size: 0.8rem; color: #666; margin-top: 6px; direction: ltr; text-align: right; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">الحضور والانصراف</h1>
        <p class="page-subtitle">{{ $date }}</p>
    </div>
</div>

{{-- Stats --}}
<div class="attendance-stats">
    <div class="stat-card stat-present" onclick="filterTable('present')">
        <div class="stat-number">{{ $stats['present'] ?? 0 }}</div>
        <div class="stat-label"><i class="fas fa-check-circle"></i> حاضر</div>
    </div>
    <div class="stat-card stat-absent" onclick="filterTable('absent')">
        <div class="stat-number">{{ $stats['absent'] ?? 0 }}</div>
        <div class="stat-label"><i class="fas fa-times-circle"></i> غائب</div>
    </div>
    <div class="stat-card stat-late" onclick="filterTable('late')">
        <div class="stat-number">{{ $stats['late'] ?? 0 }}</div>
        <div class="stat-label"><i class="fas fa-clock"></i> متأخر</div>
    </div>
    <div class="stat-card stat-leave" onclick="filterTable('on_leave')">
        <div class="stat-number">{{ $stats['on_leave'] ?? 0 }}</div>
        <div class="stat-label"><i class="fas fa-calendar-minus"></i> إجازة</div>
    </div>
</div>

{{-- Quick Check-in / Check-out --}}
<div class="attendance-form">
    <h3><i class="fas fa-fingerprint" style="color:#E8502F;"></i> تسجيل سريع</h3>
    <div class="form-row">
        <div class="form-group">
            <label>الموظف</label>
            <select id="quick-employee">
                <option value="">-- اختر الموظف --</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}">{{ $emp->full_name ?? $emp->first_name . ' ' . $emp->last_name }} ({{ $emp->employee_code }})</option>
                @endforeach
            </select>
        </div>
        <div class="form-group" style="flex:0;">
            <label>&nbsp;</label>
            <div style="display:flex; gap:8px;">
                <form method="POST" action="{{ route('attendance.checkin') }}" id="checkin-form">
                    @csrf
                    <input type="hidden" name="employee_id" id="checkin-emp-id">
                    <input type="hidden" name="latitude" class="geo-lat">
                    <input type="hidden" name="longitude" class="geo-lng">
                    <button type="submit" class="btn-checkin"><i class="fas fa-sign-in-alt"></i> تسجيل حضور</button>
                </form>
                <form method="POST" action="{{ route('attendance.checkout') }}" id="checkout-form">
                    @csrf
                    <input type="hidden" name="employee_id" id="checkout-emp-id">
                    <input type="hidden" name="latitude" class="geo-lat">
                    <input type="hidden" name="longitude" class="geo-lng">
                    <button type="submit" class="btn-checkout"><i class="fas fa-sign-out-alt"></i> تسجيل انصراف</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Geolocation Check-in --}}
<div class="geo-section">
    <h3><i class="fas fa-map-marker-alt"></i> تسجيل الحضور الجغرافي</h3>
    <p style="color:#555; font-size:0.9rem; margin-bottom:12px;">تسجيل الحضور باستخدام الموقع الجغرافي (GPS) — يتم إرسال إحداثيات الموقع مع بيانات التسجيل</p>
    <div class="form-row">
        <div class="form-group">
            <label>الموظف</label>
            <select id="geo-employee">
                <option value="">-- اختر الموظف --</option>
                @foreach($employees as $emp)
                    <option value="{{ $emp->id }}">{{ $emp->full_name ?? $emp->first_name . ' ' . $emp->last_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group" style="flex:0;">
            <label>&nbsp;</label>
            <div style="display:flex; gap:8px;">
                <button type="button" class="btn-geo" id="geo-checkin-btn" onclick="geoCheckIn()">
                    <i class="fas fa-map-marker-alt"></i> حضور بالموقع
                </button>
                <button type="button" class="btn-geo" id="geo-checkout-btn" onclick="geoCheckOut()" style="background:#E8502F;">
                    <i class="fas fa-map-marker-alt"></i> انصراف بالموقع
                </button>
            </div>
        </div>
    </div>
    <div class="geo-status" id="geo-status"></div>
    <div class="geo-coords" id="geo-coords"></div>
    <form method="POST" id="geo-checkin-form" action="{{ route('attendance.checkin') }}" style="display:none;">
        @csrf
        <input type="hidden" name="employee_id" id="geo-checkin-emp">
        <input type="hidden" name="latitude" id="geo-lat">
        <input type="hidden" name="longitude" id="geo-lng">
        <input type="hidden" name="check_in_method" value="geolocation">
    </form>
    <form method="POST" id="geo-checkout-form" action="{{ route('attendance.checkout') }}" style="display:none;">
        @csrf
        <input type="hidden" name="employee_id" id="geo-checkout-emp">
        <input type="hidden" name="latitude" id="geo-out-lat">
        <input type="hidden" name="longitude" id="geo-out-lng">
        <input type="hidden" name="check_in_method" value="geolocation">
    </form>
</div>

{{-- Manual Entry (collapsible) --}}
<div class="attendance-form">
    <span class="toggle-section" onclick="document.getElementById('manual-section').classList.toggle('hidden-section');">
        <i class="fas fa-chevron-down"></i> إدخال يدوي (تاريخ سابق)
    </span>
    <div id="manual-section" class="hidden-section">
        <form method="POST" action="{{ route('attendance.manual') }}">
            @csrf
            <div class="form-row">
                <div class="form-group">
                    <label>الموظف</label>
                    <select name="employee_id" required>
                        <option value="">-- اختر --</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->full_name ?? $emp->first_name . ' ' . $emp->last_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>التاريخ</label>
                    <input type="date" name="date" value="{{ date('Y-m-d') }}" required>
                </div>
                <div class="form-group">
                    <label>وقت الحضور</label>
                    <input type="time" name="check_in" required>
                </div>
                <div class="form-group">
                    <label>وقت الانصراف</label>
                    <input type="time" name="check_out">
                </div>
                <div class="form-group">
                    <label>الحالة</label>
                    <select name="status">
                        <option value="present">حاضر</option>
                        <option value="late">متأخر</option>
                        <option value="absent">غائب</option>
                        <option value="on_leave">إجازة</option>
                    </select>
                </div>
                <div class="form-group" style="flex:0;">
                    <label>&nbsp;</label>
                    <button type="submit" class="btn-manual"><i class="fas fa-plus"></i> إضافة</button>
                </div>
            </div>
            <div class="form-row" style="margin-top:10px;">
                <div class="form-group">
                    <label>ملاحظات</label>
                    <input type="text" name="notes" placeholder="ملاحظات اختيارية...">
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Filter bar --}}
<div class="filter-bar" id="filter-bar">
    <span id="filter-text"></span>
    <button onclick="clearFilter()" style="background:none; border:none; cursor:pointer; color:#856404; font-weight:700; font-size:1rem;"><i class="fas fa-times"></i></button>
</div>

{{-- Today's Records --}}
<div class="card" id="records-section">
    <div class="card-header">
        <h3><i class="fas fa-list"></i> سجل الحضور اليوم</h3>
    </div>
    <div class="table-responsive">
        <table class="data-table" id="attendance-table">
            <thead>
                <tr>
                    <th>الموظف</th>
                    <th>القسم</th>
                    <th>وقت الحضور</th>
                    <th>وقت الانصراف</th>
                    <th>ساعات العمل</th>
                    <th>الحالة</th>
                </tr>
            </thead>
            <tbody>
                @foreach($attendances as $record)
                <tr data-status="{{ $record->status }}">
                    <td>
                        @if($record->employee)
                            {{ $record->employee->full_name ?? $record->employee->first_name . ' ' . $record->employee->last_name }}
                        @else
                            موظف #{{ $record->employee_id }}
                        @endif
                    </td>
                    <td>{{ $record->employee->department->name ?? '—' }}</td>
                    <td>{{ $record->check_in ?? '—' }}</td>
                    <td>{{ $record->check_out ?? '—' }}</td>
                    <td>{{ $record->worked_hours ? number_format($record->worked_hours, 1) . ' ساعة' : '—' }}</td>
                    <td>
                        <span class="status-badge status-{{ $record->status }}">
                            @switch($record->status)
                                @case('present') حاضر @break
                                @case('late') متأخر @break
                                @case('absent') غائب @break
                                @case('on_leave') إجازة @break
                                @default {{ $record->status }}
                            @endswitch
                        </span>
                    </td>
                </tr>
                @endforeach
                {{-- Absent employees (no attendance record today) --}}
                @foreach($absentEmployees as $emp)
                <tr data-status="absent" style="display:none;">
                    <td>{{ $emp->full_name ?? $emp->first_name . ' ' . $emp->last_name }}</td>
                    <td>{{ $emp->department->name ?? '—' }}</td>
                    <td>—</td>
                    <td>—</td>
                    <td>—</td>
                    <td><span class="status-badge status-absent">غائب</span></td>
                </tr>
                @endforeach
                @if($attendances->isEmpty() && $absentEmployees->isEmpty())
                <tr>
                    <td colspan="6">
                        <div class="empty-state-sm">لا يوجد سجلات حضور لهذا اليوم</div>
                    </td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Employee select sync
document.getElementById('quick-employee').addEventListener('change', function() {
    document.getElementById('checkin-emp-id').value = this.value;
    document.getElementById('checkout-emp-id').value = this.value;
});
document.getElementById('checkin-form').addEventListener('submit', function(e) {
    if (!document.getElementById('checkin-emp-id').value) { e.preventDefault(); alert('اختر الموظف أولاً'); }
});
document.getElementById('checkout-form').addEventListener('submit', function(e) {
    if (!document.getElementById('checkout-emp-id').value) { e.preventDefault(); alert('اختر الموظف أولاً'); }
});

// --- Stat card filter ---
var activeFilter = null;
function filterTable(status) {
    var rows = document.querySelectorAll('#attendance-table tbody tr[data-status]');
    var bar = document.getElementById('filter-bar');
    var text = document.getElementById('filter-text');
    var section = document.getElementById('records-section');

    if (activeFilter === status) { clearFilter(); return; }
    activeFilter = status;

    var labels = { present: 'حاضر', absent: 'غائب', late: 'متأخر', on_leave: 'إجازة' };
    rows.forEach(function(r) {
        if (r.dataset.status === status) {
            r.style.display = '';
            r.classList.add('row-highlight');
        } else {
            r.style.display = 'none';
        }
    });
    text.textContent = 'تصفية: ' + (labels[status] || status);
    bar.classList.add('show');
    section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function clearFilter() {
    activeFilter = null;
    document.querySelectorAll('#attendance-table tbody tr[data-status]').forEach(function(r) {
        // Hide absent rows again (they are hidden by default)
        if (r.dataset.status === 'absent' && !r.dataset.hasRecord) {
            r.style.display = 'none';
        } else {
            r.style.display = '';
        }
    });
    document.getElementById('filter-bar').classList.remove('show');
}

// --- Geolocation attendance ---
function showGeoStatus(type, msg) {
    var el = document.getElementById('geo-status');
    el.className = 'geo-status ' + type;
    el.textContent = msg;
}

function geoCheckIn() {
    var empId = document.getElementById('geo-employee').value;
    if (!empId) { alert('اختر الموظف أولاً'); return; }

    var btn = document.getElementById('geo-checkin-btn');
    btn.disabled = true;
    showGeoStatus('loading', 'جاري تحديد الموقع...');

    if (!navigator.geolocation) {
        showGeoStatus('error', 'المتصفح لا يدعم تحديد الموقع الجغرافي');
        btn.disabled = false;
        return;
    }

    navigator.geolocation.getCurrentPosition(function(pos) {
        var lat = pos.coords.latitude;
        var lng = pos.coords.longitude;
        document.getElementById('geo-checkin-emp').value = empId;
        document.getElementById('geo-lat').value = lat;
        document.getElementById('geo-lng').value = lng;
        document.getElementById('geo-coords').textContent = 'الإحداثيات: ' + lat.toFixed(6) + ', ' + lng.toFixed(6);
        showGeoStatus('success', 'تم تحديد الموقع — جاري تسجيل الحضور...');
        document.getElementById('geo-checkin-form').submit();
    }, function(err) {
        var msgs = { 1: 'تم رفض إذن الموقع', 2: 'تعذر تحديد الموقع', 3: 'انتهت مهلة تحديد الموقع' };
        showGeoStatus('error', msgs[err.code] || 'خطأ في تحديد الموقع');
        btn.disabled = false;
    }, { enableHighAccuracy: true, timeout: 10000 });
}

function geoCheckOut() {
    var empId = document.getElementById('geo-employee').value;
    if (!empId) { alert('اختر الموظف أولاً'); return; }

    var btn = document.getElementById('geo-checkout-btn');
    btn.disabled = true;
    showGeoStatus('loading', 'جاري تحديد الموقع...');

    if (!navigator.geolocation) {
        showGeoStatus('error', 'المتصفح لا يدعم تحديد الموقع الجغرافي');
        btn.disabled = false;
        return;
    }

    navigator.geolocation.getCurrentPosition(function(pos) {
        var lat = pos.coords.latitude;
        var lng = pos.coords.longitude;
        document.getElementById('geo-checkout-emp').value = empId;
        document.getElementById('geo-out-lat').value = lat;
        document.getElementById('geo-out-lng').value = lng;
        document.getElementById('geo-coords').textContent = 'الإحداثيات: ' + lat.toFixed(6) + ', ' + lng.toFixed(6);
        showGeoStatus('success', 'تم تحديد الموقع — جاري تسجيل الانصراف...');
        document.getElementById('geo-checkout-form').submit();
    }, function(err) {
        var msgs = { 1: 'تم رفض إذن الموقع', 2: 'تعذر تحديد الموقع', 3: 'انتهت مهلة تحديد الموقع' };
        showGeoStatus('error', msgs[err.code] || 'خطأ في تحديد الموقع');
        btn.disabled = false;
    }, { enableHighAccuracy: true, timeout: 10000 });
}

// Auto-detect geolocation on page load (background)
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
        document.querySelectorAll('.geo-lat').forEach(function(el) { el.value = pos.coords.latitude; });
        document.querySelectorAll('.geo-lng').forEach(function(el) { el.value = pos.coords.longitude; });
    }, function(){}, { enableHighAccuracy: false, timeout: 5000 });
}
</script>
@endpush