@extends('layouts.app')
@section('title', 'Staff Invoices')
@section('breadcrumb')<span class="text-white">Staff Invoices</span>@endsection

@section('content')
<div x-data="{ showGenModal: false, showRequestModal: false, genUserId: '', genStart: '', genEnd: '' }">

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Staff Invoices</h1>
        <p>Time-based invoices for factory employees, processors and trades</p>
    </div>
    <div class="flex gap-2">
        @if(!$isAdminOrAccounts)
        <button @click="showRequestModal = true" class="btn btn-secondary">
            <i class="fas fa-paper-plane"></i> Request Approval
        </button>
        @endif
        @if($isAdminOrAccounts)
        <button @click="showGenModal = true" class="btn btn-primary">
            <i class="fas fa-plus"></i> Generate Invoice
        </button>
        @endif
    </div>
</div>

@if($pendingCount > 0)
<div class="card p-4 mb-4 border-yellow-600 bg-yellow-900/20 flex items-center gap-3">
    <i class="fas fa-clock text-yellow-400"></i>
    <span class="text-yellow-300"><strong>{{ $pendingCount }}</strong> invoice{{ $pendingCount > 1 ? 's' : '' }} pending approval</span>
</div>
@endif

@if(session('success'))
<div class="card p-4 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="card p-4 mb-4 border-red-600 bg-red-900/20 text-red-300 flex items-center gap-2">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif

<div class="card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead><tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                <th class="px-5 py-3 text-left">Invoice #</th>
                @if($isAdminOrAccounts)<th class="px-5 py-3 text-left">Staff Member</th>@endif
                <th class="px-5 py-3 text-left">Period</th>
                <th class="px-5 py-3 text-left">Hours</th>
                <th class="px-5 py-3 text-left">Rate</th>
                <th class="px-5 py-3 text-left">Total</th>
                <th class="px-5 py-3 text-left">Status</th>
                <th class="px-5 py-3 text-left">Approved By</th>
                <th class="px-5 py-3"></th>
            </tr></thead>
            <tbody>
                @forelse($invoices as $inv)
                <tr class="table-row cursor-pointer" onclick="window.location='{{ route('staff-invoices.show', $inv) }}'">
                    <td class="px-5 py-3 text-sm font-mono text-blue-300">{{ $inv->invoice_number }}</td>
                    @if($isAdminOrAccounts)
                    <td class="px-5 py-3">
                        <div class="text-sm font-medium text-white">{{ $inv->user->name }}</div>
                        <div class="text-xs text-slate-400">{{ $inv->user->role?->display_name }}</div>
                    </td>
                    @endif
                    <td class="px-5 py-3 text-sm text-slate-300">{{ $inv->period_start->format('d M') }} – {{ $inv->period_end->format('d M Y') }}</td>
                    <td class="px-5 py-3 text-sm font-mono text-white">{{ number_format($inv->total_hours, 2) }}h</td>
                    <td class="px-5 py-3 text-sm text-slate-300">${{ number_format($inv->hourly_rate, 2) }}/hr</td>
                    <td class="px-5 py-3 text-sm font-bold text-green-400">${{ number_format($inv->total_amount, 2) }}</td>
                    <td class="px-5 py-3">
                        <span class="badge {{ $inv->status_badge }}">{{ ucfirst($inv->status) }}</span>
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-400">{{ $inv->approver?->name ?? '—' }}</td>
                    <td class="px-5 py-3">
                        <a href="{{ route('staff-invoices.show', $inv) }}" class="text-slate-400 hover:text-white text-xs"><i class="fas fa-eye"></i></a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" class="px-5 py-8 text-center text-slate-500">No invoices found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($invoices->hasPages())
    <div class="p-4 border-t border-slate-700">{{ $invoices->links() }}</div>
    @endif
</div>

<!-- Request Approval Modal (for hourly staff) -->
@if(!$isAdminOrAccounts)
<div x-show="showRequestModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" style="display:none">
    <div class="card p-6 w-full max-w-md mx-4">
        <h3 class="mb-2">Request Invoice Approval</h3>
        <p class="text-sm text-slate-400 mb-4">Select the pay period for your uninvoiced time entries. An admin or accounts officer will be notified to generate and approve your invoice.</p>
        <form method="POST" action="{{ route('staff-invoices.request-approval') }}">
            @csrf
            <div class="space-y-4">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label>Period Start</label>
                        <input type="date" name="period_start" class="input" required
                               value="{{ now()->startOfWeek()->toDateString() }}">
                    </div>
                    <div>
                        <label>Period End</label>
                        <input type="date" name="period_end" class="input" required
                               value="{{ now()->toDateString() }}">
                    </div>
                </div>
                <div>
                    <label>Notes (optional)</label>
                    <textarea name="notes" class="input" rows="2" placeholder="Any notes for admin..."></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-primary flex-1">
                        <i class="fas fa-paper-plane"></i> Send Request
                    </button>
                    <button type="button" @click="showRequestModal=false" class="btn btn-secondary flex-1">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

<!-- Generate Invoice Modal -->
@if($isAdminOrAccounts)
<div x-show="showGenModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" style="display:none">
    <div class="card p-6 w-full max-w-md mx-4">
        <h3 class="mb-4">Generate Staff Invoice</h3>
        <form method="POST" action="{{ route('staff-invoices.generate') }}">
            @csrf
            <div class="space-y-4">
                <div>
                    <label>Staff Member</label>
                    <select name="user_id" class="input" required>
                        <option value="">— Select staff —</option>
                        @foreach(\App\Models\User::with('role')->whereNotNull('hourly_rate')->orderBy('name')->get() as $u)
                        <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->role?->display_name }}) — ${{ number_format($u->hourly_rate,2) }}/hr</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label>Period Start</label>
                        <input type="date" name="period_start" class="input" required>
                    </div>
                    <div>
                        <label>Period End</label>
                        <input type="date" name="period_end" class="input" required>
                    </div>
                </div>
                <p class="text-xs text-slate-500">All completed, uninvoiced time entries within this period will be included in the invoice.</p>
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-primary flex-1">Generate Invoice</button>
                    <button type="button" @click="showGenModal=false" class="btn btn-secondary flex-1">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

</div>
@endsection