@extends('layouts.app')

@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">Add Expense Claim</h1>
                    <p class="text-muted">{{ $company->name }} - Submit New Expense</p>
                </div>
                <div>
                    <a href="{{ route('companies.hr.expenses.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Expenses
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Expense Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Expense Details</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('companies.hr.expenses.store', $company) }}" enctype="multipart/form-data">
                        @csrf

                        <!-- Employee Selection -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label">Employee <span class="text-danger">*</span></label>
                                <select class="form-select @error('employee_id') is-invalid @enderror" 
                                        name="employee_id" required>
                                    <option value="">Select Employee</option>
                                    @foreach($employees as $employee)
                                        <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->full_name }} ({{ $employee->employee_id }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Expense Information -->
                        <div class="row mb-4">
                            <div class="col-md-8">
                                <label class="form-label">Expense Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                       name="title" value="{{ old('title') }}" required
                                       placeholder="e.g., Business lunch with client">
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select @error('category') is-invalid @enderror" 
                                        name="category" required>
                                    <option value="">Select Category</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category }}" {{ old('category') == $category ? 'selected' : '' }}>
                                            {{ $category }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    <a href="{{ route('companies.hr.expense-categories.index', $company) }}" target="_blank">
                                        <i class="bi bi-gear"></i> Manage Categories
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          name="description" rows="3" 
                                          placeholder="Provide additional details about this expense...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Amount and Date -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="form-label">Amount <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <select class="form-select @error('currency') is-invalid @enderror" 
                                            name="currency" style="max-width: 80px;" required>
                                        <option value="MYR" {{ old('currency', 'MYR') == 'MYR' ? 'selected' : '' }}>MYR</option>
                                        <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                        <option value="GBP" {{ old('currency') == 'GBP' ? 'selected' : '' }}>GBP</option>
                                        <option value="SGD" {{ old('currency') == 'SGD' ? 'selected' : '' }}>SGD</option>
                                        <option value="CAD" {{ old('currency') == 'CAD' ? 'selected' : '' }}>CAD</option>
                                    </select>
                                    <input type="number" step="0.01" min="0" 
                                           class="form-control @error('amount') is-invalid @enderror" 
                                           name="amount" value="{{ old('amount') }}" required
                                           placeholder="0.00">
                                </div>
                                @error('amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @error('currency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Expense Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('expense_date') is-invalid @enderror" 
                                       name="expense_date" value="{{ old('expense_date', date('Y-m-d')) }}" required>
                                @error('expense_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Receipt</label>
                                <input type="file" class="form-control @error('receipt') is-invalid @enderror" 
                                       name="receipt" accept=".pdf,.jpg,.jpeg,.png">
                                <small class="form-text text-muted">PDF, JPG, PNG (max 5MB)</small>
                                @error('receipt')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{{ route('companies.hr.expenses.index', $company) }}" 
                               class="btn btn-secondary me-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">
                                <span class="btn-text">
                                    <i class="fas fa-save"></i> Submit Expense Claim
                                </span>
                                <span class="btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                    Submitting Claim...
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">Expense Guidelines</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-3">
                            <i class="fas fa-receipt text-info me-2"></i>
                            <strong>Receipt Required</strong><br>
                            <small class="text-muted">Attach receipts for all expenses over RM50</small>
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-calendar text-warning me-2"></i>
                            <strong>Submit Promptly</strong><br>
                            <small class="text-muted">Submit expenses within 30 days of occurrence</small>
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-info-circle text-primary me-2"></i>
                            <strong>Business Purpose</strong><br>
                            <small class="text-muted">Include clear business justification</small>
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-clock text-success me-2"></i>
                            <strong>Processing Time</strong><br>
                            <small class="text-muted">Approved expenses are processed within 5 business days</small>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="card-title mb-0">Common Categories</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <ul class="list-unstyled small">
                                <li><i class="fas fa-plane text-primary me-1"></i> Travel</li>
                                <li><i class="fas fa-utensils text-warning me-1"></i> Meals</li>
                                <li><i class="fas fa-gas-pump text-danger me-1"></i> Fuel</li>
                                <li><i class="fas fa-hotel text-info me-1"></i> Accommodation</li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul class="list-unstyled small">
                                <li><i class="fas fa-laptop text-secondary me-1"></i> Equipment</li>
                                <li><i class="fas fa-book text-success me-1"></i> Training</li>
                                <li><i class="fas fa-phone text-primary me-1"></i> Communications</li>
                                <li><i class="fas fa-plus text-muted me-1"></i> Other</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection