@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">Submit Expense Claim</h1>
                    <p class="text-muted mb-0">Create a new expense claim for reimbursement</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">
            <!-- Expense Claim Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Expense Claim Information</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('employee.claims.store') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <label for="title" class="form-label">Expense Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                       id="title" name="title" value="{{ old('title') }}" 
                                       placeholder="e.g., Business lunch with client" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label for="expense_date" class="form-label">Expense Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('expense_date') is-invalid @enderror" 
                                       id="expense_date" name="expense_date" value="{{ old('expense_date', date('Y-m-d')) }}" 
                                       max="{{ date('Y-m-d') }}" required>
                                @error('expense_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select @error('category') is-invalid @enderror" 
                                        id="category" name="category" required>
                                    <option value="">Select Category</option>
                                    @foreach($categories as $key => $label)
                                    <option value="{{ $key }}" {{ old('category') === $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('category')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="amount" 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: 100px;" required>
                                        <option value="MYR" {{ old('currency', 'MYR') === 'MYR' ? 'selected' : '' }}>MYR</option>
                                        <option value="USD" {{ old('currency') === 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="SGD" {{ old('currency') === 'SGD' ? 'selected' : '' }}>SGD</option>
                                        <option value="EUR" {{ old('currency') === 'EUR' ? 'selected' : '' }}>EUR</option>
                                    </select>
                                    <input type="number" class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" name="amount" value="{{ old('amount') }}" 
                                           step="0.01" min="0.01" max="99999.99" 
                                           placeholder="0.00" required>
                                </div>
                                @error('amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @error('currency')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description (Optional)</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 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 class="mb-4">
                            <label for="receipt" class="form-label">Receipt/Invoice Upload</label>
                            <input type="file" class="form-control @error('receipt') is-invalid @enderror" 
                                   id="receipt" name="receipt" accept=".jpg,.jpeg,.png,.pdf">
                            <div class="form-text">
                                Upload receipt or invoice (JPG, PNG, PDF - Max 5MB). 
                                <strong>Highly recommended</strong> for faster approval.
                            </div>
                            @error('receipt')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('employee.claims') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>Submit Expense Claim
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Expense Categories Guide -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Expense Categories</h6>
                </div>
                <div class="card-body">
                    <div class="accordion" id="categoriesAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#transport">
                                    <i class="bi bi-car-front me-2"></i>Transportation
                                </button>
                            </h2>
                            <div id="transport" class="accordion-collapse collapse" data-bs-parent="#categoriesAccordion">
                                <div class="accordion-body">
                                    <small>Taxi, Grab, public transport, flight tickets, train tickets</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#meals">
                                    <i class="bi bi-cup-hot me-2"></i>Meals & Entertainment
                                </button>
                            </h2>
                            <div id="meals" class="accordion-collapse collapse" data-bs-parent="#categoriesAccordion">
                                <div class="accordion-body">
                                    <small>Business meals, client entertainment, team lunches</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accommodation">
                                    <i class="bi bi-building me-2"></i>Accommodation
                                </button>
                            </h2>
                            <div id="accommodation" class="accordion-collapse collapse" data-bs-parent="#categoriesAccordion">
                                <div class="accordion-body">
                                    <small>Hotel stays, lodging for business trips</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#supplies">
                                    <i class="bi bi-printer me-2"></i>Office Supplies
                                </button>
                            </h2>
                            <div id="supplies" class="accordion-collapse collapse" data-bs-parent="#categoriesAccordion">
                                <div class="accordion-body">
                                    <small>Stationery, printing, office equipment</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tips Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">Tips for Faster Approval</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            <small>Upload clear receipt photos</small>
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            <small>Provide detailed descriptions</small>
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            <small>Submit claims within 30 days</small>
                        </li>
                        <li class="mb-2">
                            <i class="bi bi-check-circle text-success me-2"></i>
                            <small>Use correct expense categories</small>
                        </li>
                    </ul>
                    
                    <div class="alert alert-info mt-3">
                        <i class="bi bi-info-circle me-2"></i>
                        <small>Claims are typically processed within 3-5 business days.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-populate title based on category selection
document.getElementById('category').addEventListener('change', function() {
    const titleField = document.getElementById('title');
    const category = this.value;
    
    if (!titleField.value && category) {
        const suggestions = {
            'transport': 'Transportation expense',
            'meals': 'Business meal',
            'accommodation': 'Hotel accommodation',
            'office_supplies': 'Office supplies purchase',
            'communication': 'Communication expense',
            'training': 'Training course',
            'medical': 'Medical expense',
            'fuel': 'Fuel and parking',
            'equipment': 'Equipment purchase',
            'other': 'Other business expense'
        };
        
        if (suggestions[category]) {
            titleField.placeholder = suggestions[category];
        }
    }
});

// File upload preview
document.getElementById('receipt').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const fileSize = (file.size / 1024 / 1024).toFixed(2);
        const fileName = file.name;
        
        let feedback = document.querySelector('.form-text');
        if (fileSize > 5) {
            feedback.innerHTML = `<span class="text-danger">File too large (${fileSize}MB). Max size is 5MB.</span>`;
            this.value = '';
        } else {
            feedback.innerHTML = `<span class="text-success">Selected: ${fileName} (${fileSize}MB)</span>`;
        }
    }
});
</script>
@endpush