@extends('layouts.app')
@section('title', $timesheet->reference)
@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 class="d-flex align-items-center gap-2">
            <a href="{{ route('timesheets.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-arrow-left"></i>
            </a>
            <div>
                <h1>{{ $timesheet->reference }}</h1>
                <nav aria-label="breadcrumb"><ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('timesheets.index') }}">Timesheets</a></li>
                    <li class="breadcrumb-item active">{{ $timesheet->reference }}</li>
                </ol></nav>
            </div>
        </div>
        <span class="badge bg-{{ $timesheet->status_badge }} py-2 px-3" style="font-size:.85rem;">
            {{ $timesheet->status_label }}
        </span>
    </div>
</div>

{{-- Rejection banner --}}
@if($timesheet->status === 'rejected' && $timesheet->rejection_notes)
<div class="alert d-flex gap-3 mb-4"
     style="background:#fee2e2;border:1.5px solid #fca5a5;border-radius:12px;">
    <i class="bi bi-x-circle-fill mt-1" style="color:#dc2626;font-size:1.2rem;flex-shrink:0;"></i>
    <div>
        <div class="fw-bold" style="color:#991b1b;">Rejected by {{ $timesheet->reviewer?->name }}</div>
        <div style="font-size:.87rem;color:#7f1d1d;margin-top:3px;">{{ $timesheet->rejection_notes }}</div>
        @if(auth()->user()->employee?->id === $timesheet->employee_id)
        <a href="{{ route('timesheets.edit', $timesheet) }}" class="btn btn-sm btn-danger mt-2">
            <i class="bi bi-pencil me-1"></i>Revise &amp; Resubmit
        </a>
        @endif
    </div>
</div>
@endif

<div class="row g-4">
    <div class="col-12 col-lg-8">

        {{-- Day-by-day entries --}}
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-journal-text me-2"></i>Daily Activity Log</span>
                <span class="fw-bold" style="color:var(--ul-primary);">
                    {{ number_format($timesheet->total_hours, 1) }} hrs total
                </span>
            </div>
            <div class="card-body p-0">
                @foreach($timesheet->entries as $entry)
                @php
                    $isWork    = $entry->day_type === 'work';
                    $hasWork   = $isWork && ($entry->deliverables || $entry->project_or_task);
                @endphp
                <div style="padding:1rem 1.5rem;border-bottom:1px solid var(--card-border);">
                    <div class="d-flex align-items-start justify-content-between gap-2 mb-2">
                        <div>
                            <span class="fw-bold" style="font-size:.95rem;">
                                {{ $entry->entry_date->format('l') }}
                            </span>
                            <span style="font-size:.78rem;color:var(--text-3);margin-left:.5rem;">
                                {{ $entry->entry_date->format('d M Y') }}
                            </span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            @if($entry->day_type !== 'work')
                            <span class="badge bg-secondary" style="font-size:.7rem;">
                                {{ $entry->day_type_label }}
                            </span>
                            @else
                            <span class="fw-bold" style="color:var(--ul-primary);">
                                {{ number_format($entry->hours_worked, 1) }} hrs
                            </span>
                            @endif
                        </div>
                    </div>

                    @if($isWork)
                        @if($entry->project_or_task)
                        <div style="font-size:.8rem;color:var(--text-2);margin-bottom:.4rem;">
                            <i class="bi bi-folder2 me-1"></i>
                            <strong>Project / Task:</strong> {{ $entry->project_or_task }}
                        </div>
                        @endif

                        @if($entry->deliverables)
                        <div style="font-size:.85rem;color:var(--text-1);line-height:1.65;
                                    background:var(--body-bg);padding:.7rem 1rem;border-radius:8px;
                                    border-left:3px solid var(--ul-primary);margin-bottom:.4rem;">
                            {{ $entry->deliverables }}
                        </div>
                        @else
                        <div style="font-size:.78rem;color:var(--text-3);font-style:italic;">
                            No deliverables recorded.
                        </div>
                        @endif

                        @if($entry->notes)
                        <div style="font-size:.77rem;color:var(--text-3);margin-top:.3rem;">
                            <i class="bi bi-chat-text me-1"></i>{{ $entry->notes }}
                        </div>
                        @endif
                    @endif
                </div>
                @endforeach
            </div>
        </div>

        {{-- Evaluator actions --}}
        @if($timesheet->status === 'submitted' && !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-check2-square me-2" style="color:#d97706;"></i>
                <span style="color:#92400e;font-weight:700;">Review This Timesheet</span>
            </div>
            <div class="card-body">
                <p style="font-size:.87rem;color:var(--text-2);">
                    Review the daily entries above. If everything is satisfactory, approve the timesheet.
                    If anything needs correction, reject it with clear feedback so the employee can revise.
                </p>
                <div class="d-flex gap-3 flex-wrap">
                    <form method="POST" action="{{ route('timesheets.approve', $timesheet) }}">
                        @csrf
                        <button type="submit" class="btn btn-success btn-lg px-4">
                            <i class="bi bi-check-lg me-2"></i>Approve Timesheet
                        </button>
                    </form>
                    <button type="button" class="btn btn-outline-danger btn-lg px-4"
                            data-bs-toggle="modal" data-bs-target="#rejectModal">
                        <i class="bi bi-x-circle me-2"></i>Reject with Feedback
                    </button>
                </div>
            </div>
        </div>

        {{-- Reject Modal --}}
        <div class="modal fade" id="rejectModal" 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', $timesheet) }}">
                        @csrf
                        <div class="modal-body row g-3">
                            <div class="col-12">
                                <p style="font-size:.87rem;color:var(--text-2);">
                                    Explain specifically what needs to be corrected.
                                    The employee will see this feedback and can revise and resubmit.
                                </p>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Reason for rejection <span class="text-danger">*</span></label>
                                <textarea name="rejection_notes" class="form-control" rows="5"
                                          required minlength="10"
                                          placeholder="e.g. Deliverables for Monday are too vague — please describe specific outputs. Wednesday shows 0 hours but no leave was recorded."></textarea>
                            </div>
                        </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; Send Feedback
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif

    </div>

    {{-- Sidebar --}}
    <div class="col-12 col-lg-4">

        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-info-circle me-2"></i>Timesheet Details</div>
            <div class="card-body" style="font-size:.85rem;">
                <div class="mb-2">
                    <span style="color:var(--text-3);">Employee</span>
                    <div class="fw-semibold">{{ $timesheet->employee->full_name }}</div>
                </div>
                <div class="mb-2">
                    <span style="color:var(--text-3);">Department</span>
                    <div class="fw-semibold">{{ $timesheet->employee->department?->name ?? '—' }}</div>
                </div>
                <div class="mb-2">
                    <span style="color:var(--text-3);">Work Mode</span>
                    <div>
                        @if($timesheet->employee->isRemote())
                        <span class="badge bg-info">Remote</span>
                        @else
                        <span class="badge bg-success">Not Required to Clock In</span>
                        @endif
                    </div>
                </div>
                <div class="mb-2">
                    <span style="color:var(--text-3);">Week</span>
                    <div class="fw-semibold">{{ $timesheet->week_label }}</div>
                </div>
                <div class="mb-2">
                    <span style="color:var(--text-3);">Total Hours</span>
                    <div class="fw-bold" style="font-size:1.2rem;color:var(--ul-primary);">
                        {{ number_format($timesheet->total_hours, 1) }} hrs
                    </div>
                </div>
                <div class="mb-2">
                    <span style="color:var(--text-3);">Reference</span>
                    <div class="fw-semibold">{{ $timesheet->reference }}</div>
                </div>
                <div class="mb-2">
                    <span style="color:var(--text-3);">Submitted</span>
                    <div>{{ $timesheet->created_at->format('d M Y, H:i') }}</div>
                </div>
                @if($timesheet->reviewed_at)
                <div class="mb-2">
                    <span style="color:var(--text-3);">Reviewed by</span>
                    <div class="fw-semibold">{{ $timesheet->reviewer?->name }}</div>
                    <div style="font-size:.75rem;color:var(--text-3);">
                        {{ $timesheet->reviewed_at->format('d M Y, H:i') }}
                    </div>
                </div>
                @endif
            </div>
        </div>

        @if($timesheet->notes)
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-sticky me-2"></i>Week Notes</div>
            <div class="card-body" style="font-size:.87rem;line-height:1.65;color:var(--text-2);">
                {{ $timesheet->notes }}
            </div>
        </div>
        @endif

        {{-- Hours by day chart --}}
        <div class="card">
            <div class="card-header"><i class="bi bi-bar-chart me-2"></i>Hours Overview</div>
            <div class="card-body p-0">
                @foreach($timesheet->entries as $entry)
                @php $pct = $timesheet->total_hours > 0 ? ($entry->hours_worked / $timesheet->total_hours) * 100 : 0; @endphp
                <div style="padding:.6rem 1.1rem;border-bottom:1px solid var(--card-border);">
                    <div class="d-flex justify-content-between mb-1" style="font-size:.8rem;">
                        <span>{{ $entry->entry_date->format('D') }}</span>
                        <span class="fw-bold">
                            @if($entry->day_type === 'work')
                                {{ number_format($entry->hours_worked, 1) }}h
                            @else
                                <span style="color:var(--text-3);font-size:.72rem;">{{ $entry->day_type_label }}</span>
                            @endif
                        </span>
                    </div>
                    @if($entry->day_type === 'work')
                    <div style="height:6px;background:var(--card-border);border-radius:3px;">
                        <div style="height:6px;border-radius:3px;width:{{ min($pct,100) }}%;
                                    background:var(--ul-primary);"></div>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>

    </div>
</div>
@endsection