@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 Claims</h1>
                    <p class="text-muted mb-0">Submit and track your expense claims</p>
                </div>
                <div>
                    <a href="{{ route('employee.claims.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>New Expense Claim
                    </a>
                    <a href="{{ route('employee.dashboard') }}" class="btn btn-outline-secondary ms-2">
                        <i class="bi bi-arrow-left me-2"></i>Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body text-center">
                    <div class="text-warning mb-2">
                        <i class="bi bi-clock-history fs-1"></i>
                    </div>
                    <h4 class="text-warning">{{ $stats['pending_claims'] }}</h4>
                    <p class="text-muted mb-0">Pending Claims</p>
                    <small class="text-muted">RM {{ number_format($stats['total_amount_pending'], 2) }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body text-center">
                    <div class="text-success mb-2">
                        <i class="bi bi-check-circle fs-1"></i>
                    </div>
                    <h4 class="text-success">{{ $stats['approved_claims'] }}</h4>
                    <p class="text-muted mb-0">Approved Claims</p>
                    <small class="text-muted">RM {{ number_format($stats['total_amount_approved'], 2) }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body text-center">
                    <div class="text-info mb-2">
                        <i class="bi bi-calendar-month fs-1"></i>
                    </div>
                    <h4 class="text-info">{{ $stats['this_month_claims'] }}</h4>
                    <p class="text-muted mb-0">This Month</p>
                    <small class="text-muted">RM {{ number_format($stats['this_month_amount'], 2) }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <div class="text-primary mb-2">
                        <i class="bi bi-receipt fs-1"></i>
                    </div>
                    <h4 class="text-primary">{{ $stats['total_claims'] }}</h4>
                    <p class="text-muted mb-0">Total Claims</p>
                    <small class="text-muted">All time</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status">
                                <option value="">All Status</option>
                                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Category</label>
                            <select class="form-select" name="category">
                                <option value="">All Categories</option>
                                @foreach($categories as $category)
                                <option value="{{ $category }}" {{ request('category') === $category ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $category)) }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Month</label>
                            <input type="month" class="form-control" name="month" value="{{ request('month') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-funnel me-2"></i>Filter
                                </button>
                                <a href="{{ route('employee.claims') }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle me-2"></i>Clear
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Expense Claims Table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Expense Claims</h5>
                </div>
                <div class="card-body">
                    @if($expenseClaims->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Claim #</th>
                                        <th>Title</th>
                                        <th>Category</th>
                                        <th>Amount</th>
                                        <th>Expense Date</th>
                                        <th>Status</th>
                                        <th>Submitted</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($expenseClaims as $claim)
                                    <tr>
                                        <td>
                                            <code>{{ $claim->claim_number }}</code>
                                        </td>
                                        <td>
                                            <strong>{{ $claim->title }}</strong>
                                            @if($claim->description)
                                                <br><small class="text-muted">{{ Str::limit($claim->description, 50) }}</small>
                                            @endif
                                            @if($claim->receipt_path)
                                                <br><small class="text-info">
                                                    <i class="bi bi-paperclip me-1"></i>Has Receipt
                                                </small>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">{{ ucfirst(str_replace('_', ' ', $claim->category)) }}</span>
                                        </td>
                                        <td>
                                            <strong>{{ $claim->currency }} {{ number_format($claim->amount, 2) }}</strong>
                                        </td>
                                        <td>
                                            {{ $claim->expense_date->format('M j, Y') }}
                                        </td>
                                        <td>
                                            @if($claim->status === 'pending')
                                                <span class="badge bg-warning">Pending</span>
                                            @elseif($claim->status === 'approved')
                                                <span class="badge bg-success">Approved</span>
                                            @elseif($claim->status === 'rejected')
                                                <span class="badge bg-danger">Rejected</span>
                                            @endif
                                        </td>
                                        <td>
                                            {{ $claim->created_at->format('M j, Y') }}
                                            <br><small class="text-muted">{{ $claim->created_at->diffForHumans() }}</small>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('employee.claims.show', $claim) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="View Details">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                @if($claim->receipt_path)
                                                <a href="{{ Storage::url($claim->receipt_path) }}" 
                                                   target="_blank" class="btn btn-sm btn-outline-info" title="View Receipt">
                                                    <i class="bi bi-file-text"></i>
                                                </a>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-3">
                            {{ $expenseClaims->withQueryString()->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="bi bi-receipt text-muted" style="font-size: 3rem;"></i>
                            <h5 class="text-muted mt-3">No expense claims found</h5>
                            <p class="text-muted">You haven't submitted any expense claims yet.</p>
                            <a href="{{ route('employee.claims.create') }}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-2"></i>Submit Your First Claim
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection