@extends('layouts.app')
@section('title', 'Leave — '.$leave->leave_number)
@section('page-title','Leave Management')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>{{ $leave->leave_number }}</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('leaves.index') }}">Leaves</a></li>
                    <li class="breadcrumb-item active">{{ $leave->leave_number }}</li>
                </ol>
            </nav>
        </div>
        <div class="d-flex gap-2 align-items-center">
            <span class="badge fs-6 bg-{{ $leave->status_badge }}">{{ $leave->status_label }}</span>
            <a href="{{ route('leaves.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>Back</a>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-lg-8">
        <!-- Leave info -->
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-calendar-event me-2 text-primary"></i>Leave Information</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Employee</div>
                        <div class="fw-semibold mt-1">{{ $leave->employee->full_name }}</div>
                        <div class="text-muted-sm">{{ $leave->employee->employee_number }}</div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Department</div>
                        <div class="fw-semibold mt-1">{{ $leave->employee->department->name ?? '—' }}</div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Position</div>
                        <div class="fw-semibold mt-1">{{ $leave->employee->position }}</div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Leave Type</div>
                        <div class="mt-1"><span class="badge" style="background:{{ $leave->leaveType->color ?? '#6c757d' }};">{{ $leave->leaveType->name }}</span></div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">From</div>
                        <div class="fw-semibold mt-1">{{ $leave->date_from->format('F j, Y') }}</div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">To</div>
                        <div class="fw-semibold mt-1">{{ $leave->date_to->format('F j, Y') }}</div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Working Days</div>
                        <div class="fw-semibold mt-1">{{ $leave->total_days }} days</div>
                    </div>
                    <div class="col-6 col-md-4">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Applied On</div>
                        <div class="fw-semibold mt-1">{{ $leave->created_at->format('M j, Y') }}</div>
                    </div>
                    @if($leave->forwarding_address)
                    <div class="col-12">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Forwarding Address</div>
                        <div class="mt-1">{{ $leave->forwarding_address }}</div>
                    </div>
                    @endif
                    @if($leave->duty_arrangement)
                    <div class="col-12">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Duty Arrangement</div>
                        <div class="mt-1" style="font-size:.88rem;line-height:1.6;">{{ $leave->duty_arrangement }}</div>
                    </div>
                    @endif
                    @if($leave->reason)
                    <div class="col-12">
                        <div class="text-muted-sm text-uppercase fw-bold" style="letter-spacing:.04em;">Reason / Remarks</div>
                        <div class="mt-1" style="font-size:.88rem;line-height:1.6;">{{ $leave->reason }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Approval Actions -->
        @php
        $user = auth()->user();
        $canDept    = $user->isDeptHead() && $leave->status === 'pending';
        $canHR      = $user->isHrOrAdmin() && $leave->status === 'dept_approved';
        $canPresident = ($user->isPresident() || $user->isSuperAdmin()) && $leave->status === 'hr_approved';
        $canReject  = ($canDept || $canHR || $canPresident);
        $canCancel  = $leave->employee_id === $user->employee?->id && in_array($leave->status,['pending','dept_approved']);
        @endphp

        @if($canDept || $canHR || $canPresident)
        <div class="card">
            <div class="card-header"><i class="bi bi-check2-square me-2 text-primary"></i>
                @if($canDept) Department Head Review
                @elseif($canHR) HR Review
                @else President / VPAA Final Approval
                @endif
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Comments (Optional)</label>
                    <textarea class="form-control" rows="2" id="approvalComment" placeholder="Add any remarks or conditions…"></textarea>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <form method="POST" action="{{ route($canDept ? 'leaves.approve_dept' : ($canHR ? 'leaves.approve_hr' : 'leaves.approve_president'), $leave) }}">
                        @csrf
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-check-circle me-2"></i>Approve Leave
                        </button>
                    </form>
                    <form method="POST" action="{{ route('leaves.reject', $leave) }}" onsubmit="return confirm('Reject this leave request?')">
                        @csrf
                        <button type="submit" class="btn btn-danger">
                            <i class="bi bi-x-circle me-2"></i>Reject
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endif

        @if($canCancel)
        <div class="card mt-3">
            <div class="card-body">
                <form method="POST" action="{{ route('leaves.cancel', $leave) }}" onsubmit="return confirm('Cancel your leave request?')">
                    @csrf
                    <button type="submit" class="btn btn-outline-warning">
                        <i class="bi bi-x-octagon me-2"></i>Cancel My Request
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>

    <!-- Approval Trail -->
    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-header"><i class="bi bi-diagram-3 me-2 text-primary"></i>Approval Trail</div>
            <div class="card-body">
                <div class="timeline">
                    <!-- Step 1: Submission -->
                    <div class="timeline-item">
                        <div class="timeline-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                        <div class="timeline-body">
                            <div class="fw-semibold" style="font-size:.83rem;">Submitted</div>
                            <div class="text-muted-sm">{{ $leave->created_at->format('M j, Y h:i A') }}</div>
                            <div class="text-muted-sm">By {{ $leave->employee->full_name }}</div>
                        </div>
                    </div>

                    <!-- Step 2: Dept Head -->
                    <div class="timeline-item">
                        @php $deptDone = in_array($leave->status, ['dept_approved','hr_approved','approved']); @endphp
                        <div class="timeline-icon {{ $deptDone ? 'bg-success' : ($leave->status === 'rejected' ? 'bg-danger' : 'bg-secondary') }} text-white">
                            <i class="bi bi-{{ $deptDone ? 'check-lg' : ($leave->status === 'rejected' ? 'x-lg' : 'hourglass-split') }}"></i>
                        </div>
                        <div class="timeline-body">
                            <div class="fw-semibold" style="font-size:.83rem;">Department Head Review</div>
                            @if($leave->dept_approved_at)
                            <div class="text-muted-sm">{{ $leave->dept_approved_at->format('M j, Y h:i A') }}</div>
                            <div class="text-muted-sm">By {{ $leave->deptHead->name ?? '—' }}</div>
                            @else
                            <div class="text-muted-sm">{{ $leave->status === 'rejected' ? 'Rejected' : 'Awaiting review' }}</div>
                            @endif
                        </div>
                    </div>

                    <!-- Step 3: HR -->
                    <div class="timeline-item">
                        @php $hrDone = in_array($leave->status, ['hr_approved','approved']); @endphp
                        <div class="timeline-icon {{ $hrDone ? 'bg-success' : 'bg-secondary' }} text-white">
                            <i class="bi bi-{{ $hrDone ? 'check-lg' : 'hourglass-split' }}"></i>
                        </div>
                        <div class="timeline-body">
                            <div class="fw-semibold" style="font-size:.83rem;">HR / Associate VP Review</div>
                            @if($leave->hr_approved_at)
                            <div class="text-muted-sm">{{ $leave->hr_approved_at->format('M j, Y h:i A') }}</div>
                            <div class="text-muted-sm">By {{ $leave->hrApprover->name ?? '—' }}</div>
                            @else
                            <div class="text-muted-sm">Awaiting HR review</div>
                            @endif
                        </div>
                    </div>

                    <!-- Step 4: President -->
                    <div class="timeline-item" style="margin-bottom:0;">
                        @php $presidentDone = $leave->status === 'approved'; @endphp
                        <div class="timeline-icon {{ $presidentDone ? 'bg-success' : 'bg-secondary' }} text-white">
                            <i class="bi bi-{{ $presidentDone ? 'check-lg' : 'hourglass-split' }}"></i>
                        </div>
                        <div class="timeline-body">
                            <div class="fw-semibold" style="font-size:.83rem;">VPAA / President Final Approval</div>
                            @if($leave->president_approved_at)
                            <div class="text-muted-sm">{{ $leave->president_approved_at->format('M j, Y h:i A') }}</div>
                            <div class="text-muted-sm">By {{ $leave->president->name ?? '—' }}</div>
                            @else
                            <div class="text-muted-sm">Awaiting final approval</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection