@extends('layouts.app')

@section('title', 'Mark Staff Attendance | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> /
    <span><a href="{{ route('schooladmin.staff.attendance.index') }}">Attendance</a></span> /
    <span class="active-page">Mark Attendance</span>
@endsection

@section('navbar-right')
    <div class="notification-icon"><i class="fas fa-bell"></i><span class="badge-notify">5</span></div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=e54027&color=fff&name=Admin" class="avatar-sm">
            <span>{{ auth()->user()->name }}</span>
            <i class="fas fa-chevron-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item text-danger" href="{{ route('logout') }}">Logout</a></li>
        </ul>
    </div>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0"><i class="fas fa-clipboard-list me-2 text-primary"></i>Mark Staff Attendance</h4>
        <small class="text-muted">Bulk-mark attendance for all active staff</small>
    </div>
    <a href="{{ route('schooladmin.staff.attendance.index') }}" class="btn btn-outline-secondary rounded-pill px-3">
        <i class="fas fa-arrow-left me-1"></i>Back
    </a>
</div>

@foreach(['success','error'] as $msg)
    @if(session($msg))
    <div class="alert alert-{{ $msg === 'error' ? 'danger' : 'success' }} alert-dismissible fade show">
        {{ session($msg) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif
@endforeach

<form action="{{ route('schooladmin.staff.attendance.store') }}" method="POST">
    @csrf

    {{-- Date Selector --}}
    <div class="card shadow-sm border-0 rounded-4 mb-4">
        <div class="card-body d-flex align-items-center gap-3">
            <label class="fw-semibold mb-0">Date:</label>
            <input type="date" name="date" id="attendanceDate" class="form-control w-auto"
                   value="{{ $date }}" max="{{ now()->toDateString() }}">
            <a href="{{ route('schooladmin.staff.attendance.mark', ['date' => now()->toDateString()]) }}"
               class="btn btn-outline-secondary btn-sm">Today</a>

            {{-- Quick mark all buttons --}}
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-success" onclick="markAll('present')">
                    <i class="fas fa-check-double me-1"></i>All Present
                </button>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="markAll('absent')">
                    <i class="fas fa-times me-1"></i>All Absent
                </button>
            </div>
        </div>
    </div>

    {{-- Attendance Table --}}
    <div class="card shadow-sm border-0 rounded-4">
        <div class="card-header bg-white py-3">
            <h6 class="mb-0 fw-semibold">{{ $staffList->count() }} Active Staff Members</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Staff Member</th>
                            <th>Dept</th>
                            <th style="width:180px">Status</th>
                            <th>Check-In</th>
                            <th>Check-Out</th>
                            <th>Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($staffList as $member)
                        @php $existing_att = $existing->get($member->id); @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ $member->avatar_url }}" class="rounded-circle" width="32" height="32">
                                    <div>
                                        <div class="fw-semibold">{{ $member->full_name }}</div>
                                        <small class="text-muted">{{ $member->staff_number }}</small>
                                    </div>
                                </div>
                            </td>
                            <td><small>{{ $member->department ?? '—' }}</small></td>
                            <td>
                                <select name="attendance[{{ $member->id }}]" class="form-select form-select-sm status-select"
                                        data-id="{{ $member->id }}">
                                    @foreach(['present','absent','late','half_day'] as $s)
                                    <option value="{{ $s }}"
                                        {{ ($existing_att?->status ?? 'present') === $s ? 'selected' : '' }}>
                                        {{ ucwords(str_replace('_',' ',$s)) }}
                                    </option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="time" name="check_in[{{ $member->id }}]"
                                       class="form-control form-control-sm w-auto"
                                       value="{{ $existing_att?->check_in_time ?? '' }}">
                            </td>
                            <td>
                                <input type="time" name="check_out[{{ $member->id }}]"
                                       class="form-control form-control-sm w-auto"
                                       value="{{ $existing_att?->check_out_time ?? '' }}">
                            </td>
                            <td>
                                <input type="text" name="notes[{{ $member->id }}]"
                                       class="form-control form-control-sm"
                                       placeholder="Optional note"
                                       value="{{ $existing_att?->notes ?? '' }}">
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted py-5">
                                No active staff found. <a href="{{ route('schooladmin.staff.create') }}">Add staff</a>.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($staffList->isNotEmpty())
        <div class="card-footer bg-white d-flex justify-content-end gap-2">
            <a href="{{ route('schooladmin.staff.attendance.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
            <button type="submit" class="btn btn-primary px-5 rounded-pill">
                <i class="fas fa-save me-2"></i>Save Attendance
            </button>
        </div>
        @endif
    </div>
</form>
@endsection

@section('custom-scripts')
<script>
function markAll(status) {
    document.querySelectorAll('.status-select').forEach(sel => sel.value = status);
}
</script>
@endsection