@extends('layouts.app')

@section('title', 'Expenses Tracker')
@section('page_title', 'Business Expense Tracker')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                <i class="bi bi-hourglass"></i>
            </div>
            <h6 class="text-secondary small fw-bold">PENDING CLAIMS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $expenses->where('status', 'pending')->count() }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-wallet2"></i>
            </div>
            <h6 class="text-secondary small fw-bold">APPROVED TOTAL</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($expenses->where('status', 'approved')->sum('amount')) }} <small class="fs-6 text-muted">UGX</small></h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                <i class="bi bi-x-octagon"></i>
            </div>
            <h6 class="text-secondary small fw-bold">REJECTED CLAIMS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $expenses->where('status', 'rejected')->count() }}</h3>
        </div>
    </div>
</div>

{{-- ── Submit Expense — Landscape Card (full width) ──────────────────── --}}
<div class="card border-0 shadow-sm p-4 mb-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-plus-circle me-2 text-primary"></i>Submit Expense</h5>
        @if(auth()->user()->isSuperAdmin() || auth()->user()->isManager())
            <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#addCategoryCollapse">
                <i class="bi bi-tag me-1"></i> Add Category
            </button>
        @endif
    </div>

    {{-- Inline Add Category (collapsible) --}}
    @if(auth()->user()->isSuperAdmin() || auth()->user()->isManager())
    <div class="collapse mb-3" id="addCategoryCollapse">
        <div class="card card-body bg-light border-0 rounded-3">
            <form action="{{ route('expenses.category.store') }}" method="POST" class="row g-2 align-items-end">
                @csrf
                <div class="col-md-5">
                    <label class="form-label text-secondary small fw-bold mb-1">CATEGORY NAME *</label>
                    <input type="text" class="form-control form-control-sm" name="name" required placeholder="e.g. Utilities, Fuel, Rent">
                </div>
                <div class="col-md-5">
                    <label class="form-label text-secondary small fw-bold mb-1">DESCRIPTION</label>
                    <input type="text" class="form-control form-control-sm" name="description" placeholder="Optional description">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-sm w-100">Save Category</button>
                </div>
            </form>
        </div>
    </div>
    @endif

    {{-- Main Expense Form — landscape row --}}
    <form action="{{ route('expenses.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row g-3 align-items-end">
            <div class="col-md-2">
                <label class="form-label text-secondary small fw-bold mb-1">CATEGORY *</label>
                <select class="form-select" name="category_id" required>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label text-secondary small fw-bold mb-1">AMOUNT (UGX) *</label>
                <input type="number" class="form-control" name="amount" required min="1" placeholder="0">
            </div>
            <div class="col-md-2">
                <label class="form-label text-secondary small fw-bold mb-1">EXPENSE DATE</label>
                <input type="date" class="form-control" name="expense_date" value="{{ date('Y-m-d') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label text-secondary small fw-bold mb-1">DESCRIPTION / REASON *</label>
                <input type="text" class="form-control" name="description" required placeholder="e.g. Nasser Road office electricity token">
            </div>
            <div class="col-md-2">
                <label class="form-label text-secondary small fw-bold mb-1">RECEIPT <span class="fw-normal text-muted">(optional)</span></label>
                <input type="file" class="form-control" name="receipt_file" accept=".jpg,.jpeg,.png,.pdf">
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-send"></i> Submit
                </button>
            </div>
        </div>
    </form>
</div>

<div class="row g-4">
    <!-- Expense Log Book -->
    <div class="col-lg-12">
        <div class="card border-0 shadow-sm p-4">
            <h5 class="fw-bold mb-4 text-dark">Expense Log Book</h5>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="min-width: 750px;">
                    <thead>
                        <tr>
                            <th>Expense #</th>
                            <th>Category</th>
                            <th>Exp. Date</th>
                            <th>Description</th>
                            <th class="text-end">Amount</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($expenses as $exp)
                            <tr>
                                <td>
                                    <div class="fw-bold small">{{ $exp->expense_number }}</div>
                                    <small class="text-secondary">{{ $exp->createdBy->full_name }}</small>
                                </td>
                                <td><span class="badge bg-secondary-subtle text-secondary">{{ $exp->category->name }}</span></td>
                                <td><small class="text-secondary">{{ \Carbon\Carbon::parse($exp->expense_date)->format('M d, Y') }}</small></td>
                                <td class="small">{{ $exp->description }}</td>
                                <td class="text-end fw-bold text-dark">{{ number_format($exp->amount) }} UGX</td>
                                <td>
                                    <span class="badge bg-{{ $exp->status === 'approved' ? 'success' : ($exp->status === 'rejected' ? 'danger' : 'warning') }}">
                                        {{ ucfirst($exp->status) }}
                                    </span>
                                </td>
                                <td class="text-end no-print" style="white-space: nowrap;">
                                    @if($exp->status === 'pending' && (auth()->user()->isManager() || auth()->user()->isSuperAdmin()))
                                        <form action="{{ route('expenses.approve', $exp->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-success me-1">
                                                <i class="bi bi-check-lg"></i> Approve
                                            </button>
                                        </form>
                                        <form action="{{ route('expenses.reject', $exp->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-danger">
                                                <i class="bi bi-x-lg"></i> Reject
                                            </button>
                                        </form>
                                    @elseif($exp->receipt_file)
                                        <a href="{{ asset('storage/' . $exp->receipt_file) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-paperclip"></i> Receipt
                                        </a>
                                    @else
                                        <span class="text-muted small">-</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">No expenses logged yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection