@extends('layouts.dashboard')

@section('dashboard-content')
    <div class="overview-hero" style="margin-bottom: 24px;">
        <div>
            <p class="overview-eyebrow">Cashier Workstation</p>
            <h2>Accounting administrative workflow</h2>
            <p style="color: var(--text-muted); margin-top: 8px;">Upload accounting documents and track all accounting activities (who, role, when).</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-error">
            <ul style="margin: 0; padding-left: 20px;">
                @foreach($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="search-card">
        <h2 class="section-title">Upload accounting document</h2>
        <form method="post" action="{{ route('accounting.documents.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="form-grid">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">File <span style="color: var(--text-muted);">(required)</span></label>
                    <input type="file" class="form-input" name="file" required accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png">
                </div>
                <div class="form-group">
                    <label class="form-label">Document type <span style="color: var(--text-muted);">(required)</span></label>
                    <select class="form-select" name="document_type" required>
                        <option value="invoice">Invoice</option>
                        <option value="receipt">Receipt</option>
                        <option value="payment_voucher">Payment voucher</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Title <span style="color: var(--text-muted);">(required)</span></label>
                    <input type="text" class="form-input" name="title" value="{{ old('title') }}" required maxlength="255">
                </div>
                <div class="form-group">
                    <label class="form-label">Reference number</label>
                    <input type="text" class="form-input" name="reference_number" value="{{ old('reference_number') }}" maxlength="50" placeholder="Auto-generated if empty">
                </div>
                <div class="form-group">
                    <label class="form-label">Amount</label>
                    <input type="number" class="form-input" name="amount" value="{{ old('amount') }}" step="0.01" placeholder="0.00">
                </div>
                <div class="form-group">
                    <label class="form-label">Currency</label>
                    <input type="text" class="form-input" name="currency" value="{{ old('currency', 'NGN') }}" maxlength="10">
                </div>
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">Description</label>
                    <textarea class="form-input" name="description" rows="2">{{ old('description') }}</textarea>
                </div>
            </div>
            <div class="button-group">
                <button type="submit" class="btn btn-primary">Upload document</button>
            </div>
        </form>
    </div>

    <div class="search-card" style="margin-top: 24px;">
        <h3 class="section-subtitle">Recent accounting documents</h3>
        @if($documents->isEmpty())
            <p class="empty-state">No accounting documents yet. Upload one above.</p>
        @else
            <div class="table-responsive">
                <table class="overview-table">
                    <thead>
                        <tr>
                            <th>Reference</th>
                            <th>Title</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Uploaded by</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($documents as $d)
                            <tr>
                                <td><a href="{{ route('accounting.documents.show', $d->id) }}" class="link-button" style="font-weight: 600;">{{ $d->reference_number }}</a></td>
                                <td>{{ Str::limit($d->title, 40) }}</td>
                                <td><span class="status-pill enabled">{{ str_replace('_', ' ', $d->document_type) }}</span></td>
                                <td>{{ $d->amount !== null ? number_format($d->amount, 2) . ' ' . ($d->currency ?? '') : '—' }}</td>
                                <td>{{ $d->uploaded_by ?? '—' }}</td>
                                <td>{{ $d->uploaded_date?->format('d M Y H:i') ?? '—' }}</td>
                                <td>
                                    <a href="{{ route('accounting.documents.show', $d->id) }}" class="table-cta">View</a>
                                    <a href="{{ route('accounting.documents.edit', $d->id) }}" class="table-cta" style="margin-left: 6px;">Edit</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <div class="search-card" style="margin-top: 24px;">
        <h3 class="section-subtitle">Accounting activity log</h3>
        <form method="get" action="{{ route('workstation.cashier') }}" class="filter-actions" style="margin-bottom: 12px;">
            <select name="action" class="form-select" style="width: auto;">
                <option value="">All actions</option>
                <option value="uploaded" {{ $activityFilter === 'uploaded' ? 'selected' : '' }}>Uploaded</option>
                <option value="approved" {{ $activityFilter === 'approved' ? 'selected' : '' }}>Approved</option>
                <option value="paid" {{ $activityFilter === 'paid' ? 'selected' : '' }}>Paid</option>
            </select>
            <button type="submit" class="btn btn-secondary">Filter</button>
        </form>
        @if($activities->isEmpty())
            <p class="empty-state">No activities yet.</p>
        @else
            <div class="table-responsive">
                <table class="overview-table">
                    <thead>
                        <tr>
                            <th>Reference</th>
                            <th>Title</th>
                            <th>Action</th>
                            <th>By</th>
                            <th>Role</th>
                            <th>Date &amp; time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($activities as $a)
                            @php $doc = $a->accountingDocument; @endphp
                            <tr>
                                <td>{{ $doc ? $doc->reference_number : '—' }}</td>
                                <td>{{ $doc ? Str::limit($doc->title, 40) : '—' }}</td>
                                <td><span class="status-pill enabled">{{ $a->action }}</span></td>
                                <td>{{ $a->user_authority ?? '—' }}</td>
                                <td>{{ $a->role_snapshot ?? '—' }}</td>
                                <td>{{ $a->treated_at?->format('d M Y H:i') ?? '—' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
@endsection