@extends('layouts.app')
@section('title','Timesheets')
@section('page-title','Timesheets')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>{{ auth()->user()->isEmployee() ? 'My Timesheets' : 'Timesheets' }}</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    Weekly activity logs for remote and flexible-schedule employees
                </li>
            </ol></nav>
        </div>
        <div class="d-flex gap-2 align-items-center">
            @if($pendingCount)
            <span class="badge py-2 px-3" style="background:#dc2626;font-size:.82rem;">
                <i class="bi bi-hourglass-split me-1"></i>{{ $pendingCount }} Awaiting Approval
            </span>
            @endif
            @if(!auth()->user()->isEmployee())
            <a href="{{ route('export.timesheets.summary', request()->only(['status','employee_id'])) }}"
               class="btn btn-sm btn-outline-success">
                <i class="bi bi-file-earmark-excel me-1"></i>Export Summary
            </a>
            <a href="{{ route('export.timesheets', request()->only(['status','employee_id'])) }}"
               class="btn btn-sm btn-outline-success">
                <i class="bi bi-file-earmark-excel me-1"></i>Export Detail
            </a>
            @else
            <a href="{{ route('export.timesheets') }}"
               class="btn btn-sm btn-outline-success">
                <i class="bi bi-file-earmark-excel me-1"></i>Export
            </a>
            @endif
            @if(auth()->user()->isEmployee() || auth()->user()->isHrOrAdmin())
            <a href="{{ route('timesheets.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-lg me-1"></i>New Timesheet
            </a>
            @endif
        </div>
    </div>
</div>

{{-- Info banner for employees --}}
@if(auth()->user()->isEmployee())
<div class="alert d-flex gap-3 mb-4"
     style="background:#e0f2fe;border:1.5px solid #bae6fd;border-radius:12px;">
    <i class="bi bi-info-circle-fill mt-1" style="color:#0284c7;font-size:1.2rem;flex-shrink:0;"></i>
    <div style="font-size:.87rem;">
        <div class="fw-bold" style="color:#0E2A47;">How Timesheets Work</div>
        <div style="color:#475569;margin-top:2px;">
            As a <strong>remote</strong> or <strong>flexible-schedule</strong> employee, you complete a weekly
            timesheet instead of clocking in. Log what you worked on each day, the hours spent, and your
            key deliverables. Submit by end of week. Your supervisor will approve or send it back for revision.
        </div>
    </div>
</div>
@endif

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            @if(!auth()->user()->isEmployee())
            <div class="col-12 col-sm-4">
                <select name="employee_id" class="form-select">
                    <option value="">All Employees</option>
                    @foreach($employees as $e)
                    <option value="{{ $e->id }}" {{ request('employee_id')==$e->id?'selected':'' }}>
                        {{ $e->full_name }}
                        ({{ $e->isRemote() ? 'Remote' : 'Not Required' }})
                    </option>
                    @endforeach
                </select>
            </div>
            @endif
            <div class="col-6 col-sm-3">
                <select name="status" class="form-select">
                    <option value="">All Statuses</option>
                    @foreach(['draft'=>'Draft','submitted'=>'Submitted','approved'=>'Approved','rejected'=>'Rejected'] as $k=>$v)
                    <option value="{{ $k }}" {{ request('status')===$k?'selected':'' }}>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-sm-2 d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill">
                    <i class="bi bi-search me-1"></i>Filter
                </button>
                <a href="{{ route('timesheets.index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-lg"></i>
                </a>
            </div>
        </form>
    </div>
</div>

{{-- Submitted timesheets that need action first --}}
@php
    $submitted = $timesheets->getCollection()->where('status','submitted');
    $others    = $timesheets->getCollection()->whereNotIn('status',['submitted']);
@endphp

@if($submitted->count() && !auth()->user()->isEmployee())
<div class="card mb-4" style="border:2px solid #f59e0b;">
    <div class="card-header" style="background:#fefce8;border-bottom-color:#fde68a;">
        <i class="bi bi-hourglass-split me-2" style="color:#d97706;"></i>
        <span style="color:#92400e;font-weight:700;">
            Awaiting Your Approval — {{ $submitted->count() }} Timesheet{{ $submitted->count()!=1?'s':'' }}
        </span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0" style="font-size:.85rem;">
            <thead><tr>
                <th>Employee</th>
                <th>Week</th>
                <th>Hours</th>
                <th class="text-end">Actions</th>
            </tr></thead>
            <tbody>
            @foreach($submitted as $ts)
            <tr>
                <td>
                    <div class="fw-semibold">{{ $ts->employee->full_name }}</div>
                    <div style="font-size:.73rem;color:var(--text-3);">
                        {{ $ts->employee->department?->name }} ·
                        {{ $ts->employee->isRemote() ? 'Remote' : 'Not Required' }}
                    </div>
                </td>
                <td>
                    <div class="fw-semibold">{{ $ts->week_label }}</div>
                    <div style="font-size:.72rem;color:var(--text-3);">{{ $ts->reference }}</div>
                </td>
                <td>
                    <span class="fw-bold">{{ number_format($ts->total_hours, 1) }}</span>
                    <span style="font-size:.78rem;color:var(--text-3);">hrs</span>
                </td>
                <td class="text-end">
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ route('timesheets.show', $ts) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye me-1"></i>Review
                        </a>
                        <form method="POST" action="{{ route('timesheets.approve', $ts) }}">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-success">
                                <i class="bi bi-check-lg me-1"></i>Approve
                            </button>
                        </form>
                        <button type="button" class="btn btn-sm btn-outline-danger"
                                data-bs-toggle="modal" data-bs-target="#rejectModal{{ $ts->id }}">
                            <i class="bi bi-x-lg me-1"></i>Reject
                        </button>
                    </div>
                </td>
            </tr>

            {{-- Reject Modal --}}
            <div class="modal fade" id="rejectModal{{ $ts->id }}" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-danger">
                                <i class="bi bi-x-circle me-2"></i>Reject Timesheet
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <form method="POST" action="{{ route('timesheets.reject', $ts) }}">
                            @csrf
                            <div class="modal-body">
                                <p style="font-size:.87rem;color:var(--text-2);">
                                    Explain what needs to be corrected. The employee will see this
                                    feedback and can revise and resubmit.
                                </p>
                                <label class="form-label">Reason for rejection *</label>
                                <textarea name="rejection_notes" class="form-control" rows="4"
                                          required minlength="10"
                                          placeholder="e.g. Deliverables for Tuesday and Wednesday are missing. Please add specific outputs for each day."></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-danger">
                                    <i class="bi bi-x-circle me-2"></i>Reject &amp; Notify
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- All other timesheets --}}
<div class="card">
    <div class="card-header">
        {{ auth()->user()->isEmployee() ? 'My Timesheets' : 'All Timesheets' }}
        ({{ $timesheets->total() }})
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0" style="font-size:.85rem;">
            <thead><tr>
                <th>Reference</th>
                @if(!auth()->user()->isEmployee())<th>Employee</th>@endif
                <th>Week</th>
                <th class="d-none d-md-table-cell">Total Hours</th>
                <th>Status</th>
                <th class="text-end">Actions</th>
            </tr></thead>
            <tbody>
            @forelse($timesheets as $ts)
            <tr>
                <td>
                    <div class="fw-semibold" style="color:var(--ul-primary);">{{ $ts->reference }}</div>
                    <div style="font-size:.72rem;color:var(--text-3);">
                        {{ $ts->created_at->format('d M Y') }}
                    </div>
                </td>
                @if(!auth()->user()->isEmployee())
                <td>
                    <div class="fw-semibold">{{ $ts->employee->full_name }}</div>
                    <div style="font-size:.72rem;color:var(--text-3);">
                        {{ $ts->employee->department?->name }}
                    </div>
                </td>
                @endif
                <td>{{ $ts->week_label }}</td>
                <td class="d-none d-md-table-cell">
                    <span class="fw-bold">{{ number_format($ts->total_hours,1) }}</span>
                    <span style="font-size:.77rem;color:var(--text-3);">hrs</span>
                </td>
                <td>
                    <span class="badge bg-{{ $ts->status_badge }}">{{ $ts->status_label }}</span>
                    @if($ts->status === 'rejected')
                    <div style="font-size:.72rem;color:#dc2626;margin-top:2px;">
                        <i class="bi bi-exclamation-circle me-1"></i>Needs revision
                    </div>
                    @endif
                </td>
                <td class="text-end">
                    <div class="d-flex gap-1 justify-content-end">
                        <a href="{{ route('timesheets.show', $ts) }}"
                           class="btn btn-sm btn-icon btn-outline-primary" title="View">
                            <i class="bi bi-eye"></i>
                        </a>
                        @if($ts->isEditable() && (auth()->user()->employee?->id === $ts->employee_id || auth()->user()->isHrOrAdmin()))
                        <a href="{{ route('timesheets.edit', $ts) }}"
                           class="btn btn-sm btn-icon btn-outline-secondary" title="Edit">
                            <i class="bi bi-pencil"></i>
                        </a>
                        @endif
                        @if($ts->status === 'draft' && auth()->user()->employee?->id === $ts->employee_id)
                        <form method="POST" action="{{ route('timesheets.submit', $ts) }}">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-icon btn-outline-success"
                                    title="Submit for approval">
                                <i class="bi bi-send"></i>
                            </button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="{{ auth()->user()->isEmployee() ? 5 : 6 }}" class="text-center py-5" style="color:var(--text-3);">
                <i class="bi bi-journal-text d-block mb-2" style="font-size:2rem;opacity:.3;"></i>
                No timesheets yet.
                @if(auth()->user()->isEmployee())
                <a href="{{ route('timesheets.create') }}">Create your first timesheet</a>.
                @endif
            </td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($timesheets->hasPages())
    <div class="card-body pt-0">{{ $timesheets->links('pagination::bootstrap-5') }}</div>
    @endif
</div>
@endsection