@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">Leave Request Details</h1>
                    <p class="text-muted mb-0">{{ ucfirst($leave->leave_type) }} Leave - {{ $leave->start_date->format('M j, Y') }}</p>
                </div>
                <div>
                    <a href="{{ route('employee.leaves') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Leave Management
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Leave Details Card -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Leave Information</h5>
                        @if($leave->status === 'pending')
                            <span class="badge bg-warning fs-6">Pending Approval</span>
                        @elseif($leave->status === 'approved')
                            <span class="badge bg-success fs-6">Approved</span>
                        @elseif($leave->status === 'rejected')
                            <span class="badge bg-danger fs-6">Rejected</span>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary">Leave Type</h6>
                            <p class="mb-3">
                                <i class="bi bi-tag me-2"></i>{{ ucfirst($leave->leave_type) }} Leave
                                @if($leave->is_emergency)
                                    <span class="badge bg-warning ms-2">Emergency</span>
                                @endif
                            </p>

                            <h6 class="text-primary">Duration</h6>
                            <p class="mb-3">
                                <i class="bi bi-calendar-range me-2"></i>
                                <strong>{{ $leave->start_date->format('M j, Y') }}</strong>
                                @if(!$leave->start_date->isSameDay($leave->end_date))
                                    to <strong>{{ $leave->end_date->format('M j, Y') }}</strong>
                                @endif
                                <br>
                                <small class="text-muted">
                                    {{ $leave->total_days == floor($leave->total_days) ? intval($leave->total_days) : $leave->total_days }} 
                                    {{ $leave->total_days == 1 ? 'day' : 'days' }}
                                    @if($leave->half_day_type)
                                        ({{ ucfirst($leave->half_day_type) }} Half Day)
                                    @endif
                                </small>
                            </p>

                            <h6 class="text-primary">Application Date</h6>
                            <p class="mb-3">
                                <i class="bi bi-clock me-2"></i>{{ $leave->created_at->format('M j, Y \a\t H:i') }}
                                <br><small class="text-muted">{{ $leave->created_at->diffForHumans() }}</small>
                            </p>
                        </div>
                        
                        <div class="col-md-6">
                            @if($leave->approved_at)
                            <h6 class="text-primary">Approval Details</h6>
                            <p class="mb-3">
                                <i class="bi bi-person-check me-2"></i>
                                @if($leave->approver)
                                    Reviewed by: {{ $leave->approver->name }}
                                @else
                                    System Approved
                                @endif
                                <br>
                                <small class="text-muted">{{ $leave->approved_at->format('M j, Y \a\t H:i') }}</small>
                            </p>
                            @endif

                            @if($leave->approval_notes)
                            <h6 class="text-primary">Approval Notes</h6>
                            <p class="mb-3">
                                <i class="bi bi-chat-text me-2"></i>{{ $leave->approval_notes }}
                            </p>
                            @endif

                            @if($leave->rejection_reason)
                            <h6 class="text-danger">Rejection Reason</h6>
                            <p class="mb-3">
                                <i class="bi bi-x-circle me-2"></i>{{ $leave->rejection_reason }}
                            </p>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <h6 class="text-primary">Reason for Leave</h6>
                            <div class="bg-light p-3 rounded">
                                {{ $leave->reason }}
                            </div>
                        </div>
                    </div>

                    @if($leave->attachment_path)
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6 class="text-primary">Supporting Document</h6>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-paperclip me-2"></i>
                                <a href="{{ Storage::url($leave->attachment_path) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-download me-2"></i>View Document
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Timeline Card -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">Request Timeline</h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Leave Request Submitted</h6>
                                <p class="timeline-description">
                                    Leave application submitted by {{ $employee->first_name }} {{ $employee->last_name }}
                                </p>
                                <small class="text-muted">{{ $leave->created_at->format('M j, Y \a\t H:i') }}</small>
                            </div>
                        </div>

                        @if($leave->approved_at)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-{{ $leave->status === 'approved' ? 'success' : 'danger' }}"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">
                                    {{ $leave->status === 'approved' ? 'Leave Approved' : 'Leave Rejected' }}
                                </h6>
                                <p class="timeline-description">
                                    @if($leave->approver)
                                        Request {{ $leave->status }} by {{ $leave->approver->name }}
                                    @else
                                        Request {{ $leave->status }}
                                    @endif
                                    @if($leave->approval_notes || $leave->rejection_reason)
                                        <br><em>"{{ $leave->approval_notes ?? $leave->rejection_reason }}"</em>
                                    @endif
                                </p>
                                <small class="text-muted">{{ $leave->approved_at->format('M j, Y \a\t H:i') }}</small>
                            </div>
                        </div>
                        @else
                        <div class="timeline-item">
                            <div class="timeline-marker bg-warning"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Awaiting Approval</h6>
                                <p class="timeline-description">
                                    Leave request is pending review by your manager
                                </p>
                                <small class="text-muted">Current status</small>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Status Card -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Request Status</h6>
                </div>
                <div class="card-body text-center">
                    @if($leave->status === 'pending')
                        <i class="bi bi-clock-history text-warning" style="font-size: 3rem;"></i>
                        <h5 class="mt-3 text-warning">Pending Review</h5>
                        <p class="text-muted">Your leave request is awaiting approval from your manager. You will be notified once it's reviewed.</p>
                    @elseif($leave->status === 'approved')
                        <i class="bi bi-check-circle text-success" style="font-size: 3rem;"></i>
                        <h5 class="mt-3 text-success">Approved</h5>
                        <p class="text-muted">Your leave request has been approved. Enjoy your time off!</p>
                    @elseif($leave->status === 'rejected')
                        <i class="bi bi-x-circle text-danger" style="font-size: 3rem;"></i>
                        <h5 class="mt-3 text-danger">Rejected</h5>
                        <p class="text-muted">Your leave request was not approved. Please contact your manager for more information.</p>
                    @endif
                </div>
            </div>

            <!-- Leave Summary Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">Leave Summary</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Leave Type:</span>
                        <strong>{{ ucfirst($leave->leave_type) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Total Days:</span>
                        <strong>{{ $leave->total_days == floor($leave->total_days) ? intval($leave->total_days) : $leave->total_days }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Start Date:</span>
                        <strong>{{ $leave->start_date->format('M j, Y') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>End Date:</span>
                        <strong>{{ $leave->end_date->format('M j, Y') }}</strong>
                    </div>
                    @if($leave->half_day_type)
                    <div class="d-flex justify-content-between mb-2">
                        <span>Half Day:</span>
                        <strong>{{ ucfirst($leave->half_day_type) }}</strong>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-marker {
    position: absolute;
    left: -37px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}

.timeline-title {
    margin-bottom: 5px;
    color: #495057;
}

.timeline-description {
    margin-bottom: 5px;
    color: #6c757d;
}
</style>
@endpush