@extends('layouts.employee')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">My Attendance</h1>
                    <p class="text-muted mb-0">Track your daily attendance and working hours</p>
                </div>
                <div>
                    <a href="{{ route('employee.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Today's Quick Actions -->
    @if($todayAttendance)
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-light">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h6 class="card-title mb-2">
                                <i class="bi bi-calendar-day me-2"></i>Today's Status
                            </h6>
                            <div class="row">
                                <div class="col-md-3">
                                    <small class="text-muted">Clock In</small>
                                    <div class="fw-bold">
                                        {{ $todayAttendance->clock_in ? $todayAttendance->clock_in->format('H:i') : '--:--' }}
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <small class="text-muted">Clock Out</small>
                                    <div class="fw-bold">
                                        {{ $todayAttendance->clock_out ? $todayAttendance->clock_out->format('H:i') : '--:--' }}
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <small class="text-muted">Total Hours</small>
                                    <div class="fw-bold">
                                        {{ $todayAttendance->total_hours ? number_format($todayAttendance->total_hours, 1) . 'h' : '0.0h' }}
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <small class="text-muted">Status</small>
                                    <div>
                                        @if($todayAttendance->status === 'present')
                                            <span class="badge bg-success">Present</span>
                                        @elseif($todayAttendance->status === 'late')
                                            <span class="badge bg-warning">Late</span>
                                        @else
                                            <span class="badge bg-secondary">{{ ucfirst($todayAttendance->status) }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end">
                            @if(!$todayAttendance->clock_in)
                                <button class="btn btn-success" onclick="clockIn()">
                                    <i class="bi bi-play-circle me-2"></i>Clock In
                                </button>
                            @elseif(!$todayAttendance->clock_out)
                                <button class="btn btn-warning me-2" onclick="toggleBreak()">
                                    <i class="bi bi-pause-circle me-2"></i>
                                    {{ $todayAttendance->break_start ? 'End Break' : 'Take Break' }}
                                </button>
                                <button class="btn btn-danger" onclick="clockOut()">
                                    <i class="bi bi-stop-circle me-2"></i>Clock Out
                                </button>
                            @else
                                <div class="alert alert-success mb-0">
                                    <i class="bi bi-check-circle me-2"></i>Day completed!
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-primary mb-2">
                        <i class="bi bi-calendar-check fs-1"></i>
                    </div>
                    <h4>{{ $stats['present_days_this_month'] }}</h4>
                    <p class="text-muted mb-0">Present Days This Month</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-warning mb-2">
                        <i class="bi bi-clock fs-1"></i>
                    </div>
                    <h4>{{ $stats['late_days_this_month'] }}</h4>
                    <p class="text-muted mb-0">Late Days This Month</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-success mb-2">
                        <i class="bi bi-stopwatch fs-1"></i>
                    </div>
                    <h4>{{ number_format($stats['total_hours_this_month'], 1) }}h</h4>
                    <p class="text-muted mb-0">Total Hours This Month</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body text-center">
                    <div class="text-info mb-2">
                        <i class="bi bi-graph-up fs-1"></i>
                    </div>
                    <h4>{{ number_format($stats['average_hours_per_day'], 1) }}h</h4>
                    <p class="text-muted mb-0">Average Hours/Day</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Start Date</label>
                            <input type="date" class="form-control" name="start_date" 
                                   value="{{ request('start_date') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">End Date</label>
                            <input type="date" class="form-control" name="end_date" 
                                   value="{{ request('end_date') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Month</label>
                            <input type="month" class="form-control" name="month" 
                                   value="{{ request('month') }}">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-funnel me-2"></i>Filter
                            </button>
                            <a href="{{ route('employee.attendance') }}" class="btn btn-outline-secondary ms-2">
                                <i class="bi bi-x-circle me-2"></i>Clear
                            </a>
                            <a href="{{ route('employee.attendance.history') }}" class="btn btn-outline-info ms-2">
                                <i class="bi bi-clock-history me-2"></i>View History
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Attendance Records -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Attendance Records</h5>
                </div>
                <div class="card-body">
                    @if($attendanceRecords->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Clock In</th>
                                        <th>Clock Out</th>
                                        <th>Break Time</th>
                                        <th>Total Hours</th>
                                        <th>Status</th>
                                        <th>Method</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($attendanceRecords as $record)
                                    <tr>
                                        <td>
                                            <strong>{{ $record->date->format('M j, Y') }}</strong>
                                            <br><small class="text-muted">{{ $record->date->format('l') }}</small>
                                        </td>
                                        <td>
                                            {{ $record->clock_in ? $record->clock_in->format('H:i') : '--' }}
                                        </td>
                                        <td>
                                            {{ $record->clock_out ? $record->clock_out->format('H:i') : '--' }}
                                        </td>
                                        <td>
                                            {{ $record->break_duration ? number_format($record->break_duration / 60, 1) . 'h' : '--' }}
                                        </td>
                                        <td>
                                            <strong>{{ $record->total_hours ? number_format($record->total_hours, 1) . 'h' : '--' }}</strong>
                                            @if($record->overtime_hours > 0)
                                                <br><small class="text-info">OT: {{ number_format($record->overtime_hours, 1) }}h</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($record->status === 'present')
                                                <span class="badge bg-success">Present</span>
                                            @elseif($record->status === 'late')
                                                <span class="badge bg-warning">Late</span>
                                            @elseif($record->status === 'absent')
                                                <span class="badge bg-danger">Absent</span>
                                            @else
                                                <span class="badge bg-secondary">{{ ucfirst($record->status) }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ ucfirst($record->clock_in_method ?? 'N/A') }}
                                            </small>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-3">
                            {{ $attendanceRecords->withQueryString()->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="bi bi-calendar-x text-muted" style="font-size: 3rem;"></i>
                            <h5 class="text-muted mt-3">No attendance records found</h5>
                            <p class="text-muted">Your attendance records will appear here once you start clocking in.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Reuse attendance functions from dashboard
function clockIn() {
    fetch('{{ route("employee.clock-in") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast('error', data.error || 'Failed to clock in');
        }
    })
    .catch(error => {
        showToast('error', 'Network error occurred');
    });
}

function clockOut() {
    fetch('{{ route("employee.clock-out") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast('error', data.error || 'Failed to clock out');
        }
    })
    .catch(error => {
        showToast('error', 'Network error occurred');
    });
}

function toggleBreak() {
    fetch('{{ route("employee.take-break") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast('error', data.error || 'Failed to process break');
        }
    })
    .catch(error => {
        showToast('error', 'Network error occurred');
    });
}

function showToast(type, message) {
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0`;
    toast.setAttribute('role', 'alert');
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    let toastContainer = document.getElementById('toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.id = 'toast-container';
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        toastContainer.style.zIndex = '9999';
        document.body.appendChild(toastContainer);
    }
    
    toastContainer.appendChild(toast);
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
    });
}
</script>
@endpush