@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">Expense Claim Details</h1>
                    <p class="text-muted mb-0">Claim #{{ $claim->claim_number }}</p>
                </div>
                <div>
                    <a href="{{ route('employee.claims') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Claims
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Claim Details Card -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Claim Information</h5>
                        @if($claim->status === 'pending')
                            <span class="badge bg-warning fs-6">Pending Review</span>
                        @elseif($claim->status === 'approved')
                            <span class="badge bg-success fs-6">Approved</span>
                        @elseif($claim->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">Expense Title</h6>
                            <p class="mb-3">{{ $claim->title }}</p>

                            <h6 class="text-primary">Category</h6>
                            <p class="mb-3">
                                <span class="badge bg-light text-dark">{{ ucfirst(str_replace('_', ' ', $claim->category)) }}</span>
                            </p>

                            <h6 class="text-primary">Amount</h6>
                            <p class="mb-3">
                                <strong class="fs-4">{{ $claim->currency }} {{ number_format($claim->amount, 2) }}</strong>
                            </p>

                            <h6 class="text-primary">Expense Date</h6>
                            <p class="mb-3">{{ $claim->expense_date->format('l, F j, Y') }}</p>
                        </div>
                        
                        <div class="col-md-6">
                            <h6 class="text-primary">Submission Date</h6>
                            <p class="mb-3">
                                {{ $claim->created_at->format('M j, Y \a\t H:i') }}
                                <br><small class="text-muted">{{ $claim->created_at->diffForHumans() }}</small>
                            </p>

                            @if($claim->approved_at)
                            <h6 class="text-primary">Review Date</h6>
                            <p class="mb-3">
                                {{ $claim->approved_at->format('M j, Y \a\t H:i') }}
                                @if($claim->approver)
                                    <br><small class="text-muted">Reviewed by: {{ $claim->approver->name }}</small>
                                @endif
                            </p>
                            @endif

                            @if($claim->approval_notes)
                            <h6 class="text-primary">Approval Notes</h6>
                            <p class="mb-3">{{ $claim->approval_notes }}</p>
                            @endif

                            @if($claim->rejection_reason)
                            <h6 class="text-danger">Rejection Reason</h6>
                            <p class="mb-3">{{ $claim->rejection_reason }}</p>
                            @endif
                        </div>
                    </div>

                    @if($claim->description)
                    <div class="row">
                        <div class="col-12">
                            <h6 class="text-primary">Description</h6>
                            <div class="bg-light p-3 rounded">
                                {{ $claim->description }}
                            </div>
                        </div>
                    </div>
                    @endif

                    @if($claim->receipt_path)
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6 class="text-primary">Receipt/Invoice</h6>
                            <div class="d-flex align-items-center">
                                <i class="bi bi-paperclip me-2"></i>
                                <a href="{{ Storage::url($claim->receipt_path) }}" target="_blank" class="btn btn-outline-primary">
                                    <i class="bi bi-file-text me-2"></i>View Receipt
                                </a>
                                <a href="{{ Storage::url($claim->receipt_path) }}" download class="btn btn-outline-secondary ms-2">
                                    <i class="bi bi-download me-2"></i>Download
                                </a>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            <!-- Timeline Card -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">Claim 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">Expense Claim Submitted</h6>
                                <p class="timeline-description">
                                    Claim for {{ $claim->currency }} {{ number_format($claim->amount, 2) }} submitted by {{ $employee->first_name }} {{ $employee->last_name }}
                                </p>
                                <small class="text-muted">{{ $claim->created_at->format('M j, Y \a\t H:i') }}</small>
                            </div>
                        </div>

                        @if($claim->approved_at)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-{{ $claim->status === 'approved' ? 'success' : 'danger' }}"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">
                                    Claim {{ $claim->status === 'approved' ? 'Approved' : 'Rejected' }}
                                </h6>
                                <p class="timeline-description">
                                    @if($claim->approver)
                                        Claim {{ $claim->status }} by {{ $claim->approver->name }}
                                    @else
                                        Claim {{ $claim->status }}
                                    @endif
                                    @if($claim->approval_notes || $claim->rejection_reason)
                                        <br><em>"{{ $claim->approval_notes ?? $claim->rejection_reason }}"</em>
                                    @endif
                                </p>
                                <small class="text-muted">{{ $claim->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 Review</h6>
                                <p class="timeline-description">
                                    Claim is pending review by your manager
                                </p>
                                <small class="text-muted">Current status</small>
                            </div>
                        </div>
                        @endif

                        @if($claim->status === 'approved')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-info"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Pending Reimbursement</h6>
                                <p class="timeline-description">
                                    Approved amount will be processed in the next payroll cycle
                                </p>
                                <small class="text-muted">Processing</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">Claim Status</h6>
                </div>
                <div class="card-body text-center">
                    @if($claim->status === 'pending')
                        <i class="bi bi-clock-history text-warning" style="font-size: 3rem;"></i>
                        <h5 class="mt-3 text-warning">Under Review</h5>
                        <p class="text-muted">Your expense claim is being reviewed by your manager. You will be notified once a decision is made.</p>
                    @elseif($claim->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 expense claim has been approved and will be reimbursed in your next payroll.</p>
                    @elseif($claim->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 expense claim was not approved. Please contact your manager for more information.</p>
                    @endif
                </div>
            </div>

            <!-- Claim Summary Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">Claim Summary</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Claim Number:</span>
                        <strong><code>{{ $claim->claim_number }}</code></strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Category:</span>
                        <strong>{{ ucfirst(str_replace('_', ' ', $claim->category)) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Amount:</span>
                        <strong>{{ $claim->currency }} {{ number_format($claim->amount, 2) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Expense Date:</span>
                        <strong>{{ $claim->expense_date->format('M j, Y') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>Submitted:</span>
                        <strong>{{ $claim->created_at->format('M j, Y') }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>Receipt:</span>
                        @if($claim->receipt_path)
                            <span class="text-success"><i class="bi bi-check-circle"></i> Attached</span>
                        @else
                            <span class="text-muted">Not provided</span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Actions Card -->
            @if($claim->status === 'pending')
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">Need Help?</h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">If you need to make changes to this claim or have questions, please contact your manager or HR department.</p>
                    <div class="d-grid">
                        <button class="btn btn-outline-primary btn-sm" onclick="window.print()">
                            <i class="bi bi-printer me-2"></i>Print Claim
                        </button>
                    </div>
                </div>
            </div>
            @endif
        </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;
}

@media print {
    .btn, .card-header, .timeline::before {
        display: none !important;
    }
}
</style>
@endpush