@extends('admin.layouts.app')
@section('title', isset($expense) ? 'Edit Expense' : 'Add Expense')
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.csr.expenses.index') }}" style="color:inherit;text-decoration:none;">Expenses</a>
    <span>/</span> {{ isset($expense) ? 'Edit' : 'Add' }}
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1>{{ isset($expense) ? 'Edit Expense' : 'Record Expense' }}</h1>
        <p class="page-subtitle">{{ isset($expense) ? 'Update expense details' : 'Record a new project expense' }}</p>
    </div>
    <a href="{{ route('admin.csr.expenses.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back
    </a>
</div>

@if(session('error'))
<div class="alert alert-danger" style="border-radius:10px;border:none;background:#fef2f2;color:#dc2626;">
    <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
</div>
@endif

<form method="POST"
    action="{{ isset($expense) ? route('admin.csr.expenses.update',$expense) : route('admin.csr.expenses.store') }}"
    enctype="multipart/form-data" id="expenseForm">
    @csrf
    @if(isset($expense)) @method('PUT') @endif

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-receipt text-warning me-2"></i>Expense Details</h6></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Project <span class="text-danger">*</span></label>
                            <select name="project_id" id="projectSelect" class="form-select @error('project_id') is-invalid @enderror" required {{ isset($expense) ? 'disabled' : '' }}>
                                <option value="">Select Project</option>
                                @foreach($projects as $proj)
                                <option value="{{ $proj->id }}"
                                    data-budget="{{ $proj->budget_allocation }}"
                                    data-spent="{{ $proj->total_spent }}"
                                    data-remaining="{{ $proj->remaining_budget }}"
                                    {{ old('project_id', $expense->project_id ?? $selectedProject?->id ?? '') == $proj->id ? 'selected' : '' }}>
                                    {{ $proj->project_title }} ({{ $proj->project_code }})
                                </option>
                                @endforeach
                            </select>
                            @error('project_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            @if(isset($expense)) <input type="hidden" name="project_id" value="{{ $expense->project_id }}"> @endif
                        </div>

                        <!-- Budget Tracker (shown when project selected) -->
                        <div class="col-12" id="budgetTracker" style="{{ old('project_id', $selectedProject?->id ?? null) ? '' : 'display:none;' }}">
                            <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 16px;">
                                <div class="row g-2 text-center">
                                    <div class="col-4">
                                        <div style="font-size:11px;color:#15803d;font-weight:600;text-transform:uppercase;">Total Budget</div>
                                        <div style="font-size:16px;font-weight:700;" id="budgetTotal">—</div>
                                    </div>
                                    <div class="col-4">
                                        <div style="font-size:11px;color:#b45309;font-weight:600;text-transform:uppercase;">Already Spent</div>
                                        <div style="font-size:16px;font-weight:700;color:#dc2626;" id="budgetSpent">—</div>
                                    </div>
                                    <div class="col-4">
                                        <div style="font-size:11px;color:#1d4ed8;font-weight:600;text-transform:uppercase;">Remaining</div>
                                        <div style="font-size:16px;font-weight:700;color:#2563eb;" id="budgetRemaining">—</div>
                                    </div>
                                </div>
                                <div class="progress mt-2" style="height:6px;border-radius:6px;">
                                    <div id="budgetBar" class="progress-bar" style="width:0%;"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Expense Date <span class="text-danger">*</span></label>
                            <input type="date" name="expense_date" class="form-control @error('expense_date') is-invalid @enderror"
                                max="{{ date('Y-m-d') }}"
                                value="{{ old('expense_date', isset($expense) ? $expense->expense_date->format('Y-m-d') : date('Y-m-d')) }}" required>
                            @error('expense_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Category <span class="text-danger">*</span></label>
                            <select name="category" class="form-select @error('category') is-invalid @enderror" required>
                                <option value="">Select Category</option>
                                @foreach(['material','transportation','food','staff','medical','equipment','administration','other'] as $cat)
                                <option value="{{ $cat }}" {{ old('category',$expense->category??'')===$cat?'selected':'' }}>{{ ucfirst($cat) }}</option>
                                @endforeach
                            </select>
                            @error('category') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Amount (₹) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">₹</span>
                                <input type="number" name="amount" id="amountInput" class="form-control @error('amount') is-invalid @enderror"
                                    min="1" step="0.01" placeholder="0.00"
                                    value="{{ old('amount',$expense->amount??'') }}" required>
                            </div>
                            <div id="budgetWarning" class="text-danger mt-1" style="font-size:12px;display:none;">
                                <i class="fas fa-exclamation-triangle me-1"></i>This amount exceeds remaining budget!
                            </div>
                            @error('amount') <div class="text-danger" style="font-size:12px;">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Payment Mode <span class="text-danger">*</span></label>
                            <select name="payment_mode" class="form-select" required>
                                @foreach(['cash'=>'Cash','cheque'=>'Cheque','bank_transfer'=>'Bank Transfer','upi'=>'UPI','card'=>'Card','other'=>'Other'] as $v => $l)
                                <option value="{{ $v }}" {{ old('payment_mode',$expense->payment_mode??'cash')===$v?'selected':'' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Vendor Name</label>
                            <input type="text" name="vendor_name" class="form-control" placeholder="Supplier/Vendor name"
                                value="{{ old('vendor_name',$expense->vendor_name??'') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Bill/Invoice Number</label>
                            <input type="text" name="bill_number" class="form-control" placeholder="INV-XXXX"
                                value="{{ old('bill_number',$expense->bill_number??'') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Brief description of this expense...">{{ old('description',$expense->description??'') }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Bill/Invoice File</label>
                            <input type="file" name="bill_file" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                            @if(isset($expense) && $expense->bill_file)
                            <small class="text-success"><i class="fas fa-file me-1"></i>{{ $expense->bill_file }}</small>
                            @endif
                        </div>

                        <!-- Budget Override -->
                        @if(auth()->user()->hasPermission('project_expenses.override_budget'))
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_override" id="isOverride"
                                    value="1" {{ old('is_override') ? 'checked' : '' }}>
                                <label class="form-check-label" for="isOverride" style="font-size:13px;color:#dc2626;font-weight:600;">
                                    <i class="fas fa-exclamation-triangle me-1"></i>Budget Override (requires authorization)
                                </label>
                            </div>
                            <div id="overrideReason" style="{{ old('is_override') ? '' : 'display:none;' }} margin-top:8px;">
                                <textarea name="override_reason" class="form-control" rows="2"
                                    placeholder="Reason for budget override (mandatory)...">{{ old('override_reason') }}</textarea>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2" id="submitBtn">
                        <i class="fas fa-save me-2"></i>
                        {{ isset($expense) ? 'Update Expense' : 'Record Expense' }}
                    </button>
                    <a href="{{ route('admin.csr.expenses.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>

                    @if(isset($expense))
                    <hr>
                    <div class="text-muted" style="font-size:11px;">
                        <div><strong>Expense ID:</strong> {{ $expense->expense_id }}</div>
                        <div><strong>Recorded by:</strong> {{ $expense->createdBy->name??'—' }}</div>
                        <div><strong>Date:</strong> {{ $expense->created_at->format('d M Y H:i') }}</div>
                        @if($expense->is_override)
                        <div class="text-danger mt-1"><strong>⚠ Budget Override</strong></div>
                        @endif
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
const projectSelect = document.getElementById('projectSelect');
const amountInput   = document.getElementById('amountInput');
let remaining = 0;

function updateBudget() {
    const opt = projectSelect.options[projectSelect.selectedIndex];
    const budget    = parseFloat(opt.dataset.budget) || 0;
    const spent     = parseFloat(opt.dataset.spent)   || 0;
    remaining       = parseFloat(opt.dataset.remaining)|| 0;

    if (budget > 0) {
        document.getElementById('budgetTracker').style.display = '';
        document.getElementById('budgetTotal').textContent     = '₹' + budget.toLocaleString('en-IN');
        document.getElementById('budgetSpent').textContent     = '₹' + spent.toLocaleString('en-IN');
        document.getElementById('budgetRemaining').textContent = '₹' + remaining.toLocaleString('en-IN');
        const pct = Math.min(100, (spent/budget)*100);
        const bar = document.getElementById('budgetBar');
        bar.style.width = pct + '%';
        bar.className   = 'progress-bar bg-' + (pct>=100?'danger':pct>=80?'warning':'success');
    } else {
        document.getElementById('budgetTracker').style.display = 'none';
    }
    checkAmount();
}

function checkAmount() {
    const amount  = parseFloat(amountInput.value) || 0;
    const warning = document.getElementById('budgetWarning');
    if (remaining > 0 && amount > remaining) {
        warning.style.display = '';
    } else {
        warning.style.display = 'none';
    }
}

if (projectSelect) {
    projectSelect.addEventListener('change', updateBudget);
    // Run on load if pre-selected
    if (projectSelect.value) updateBudget();
}
if (amountInput) amountInput.addEventListener('input', checkAmount);

// Override reason toggle
const overrideChk = document.getElementById('isOverride');
if (overrideChk) {
    overrideChk.addEventListener('change', function() {
        document.getElementById('overrideReason').style.display = this.checked ? '' : 'none';
    });
}

document.getElementById('expenseForm').addEventListener('submit',function(){
    const btn=document.getElementById('submitBtn');
    btn.disabled=true;
    btn.innerHTML='<span class="spinner-border spinner-border-sm me-2"></span>Saving...';
});
</script>
@endpush