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

@section('content')
@php
    $user = auth()->user();
    $isTrades = $user->role?->name === 'trades';
@endphp

<div x-data="{ showGenModal: false }">

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Staff Invoices</h1>
        <p>Invoices for factory employees, processors and trades</p>
    </div>
    <div class="flex gap-2">
        {{-- Trades: create manual invoice --}}
        @if($isTrades)
        <a href="{{ route('staff-invoices.create') }}" class="btn btn-primary">
            <i class="fas fa-plus mr-1"></i> Create Invoice
        </a>
        @endif
        {{-- Admin/Accounts: generate time-based invoice --}}
        @if($isAdminOrAccounts)
        <!-- <button @click="showGenModal = true" class="btn btn-primary">
            <i class="fas fa-plus mr-1"></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

{{-- Admin Filters --}}
@if($isAdminOrAccounts)
<div class="card p-4 mb-4">
    <form method="GET" action="{{ route('staff-invoices.index') }}" class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="text-xs text-slate-400 block mb-1">Date From</label>
            <input type="date" name="date_from" value="{{ request('date_from') }}" class="input text-sm py-1.5">
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">Date To</label>
            <input type="date" name="date_to" value="{{ request('date_to') }}" class="input text-sm py-1.5">
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">Trade Person</label>
            <select name="trade_user_id" class="input text-sm py-1.5">
                <option value="">— All Trades —</option>
                @foreach($tradeUsers as $tu)
                <option value="{{ $tu->id }}" {{ request('trade_user_id') == $tu->id ? 'selected' : '' }}>{{ $tu->name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="text-xs text-slate-400 block mb-1">Status</label>
            <select name="status" class="input text-sm py-1.5">
                <option value="">— All Statuses —</option>
                <option value="pending"  {{ request('status') === 'pending'  ? 'selected' : '' }}>Pending</option>
                <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                <option value="paid"     {{ request('status') === 'paid'     ? 'selected' : '' }}>Paid</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary text-sm py-1.5 px-4"><i class="fas fa-filter mr-1"></i> Filter</button>
        @if(request()->hasAny(['date_from','date_to','trade_user_id','status']))
        <a href="{{ route('staff-invoices.index') }}" class="btn btn-secondary text-sm py-1.5 px-4">Clear</a>
        @endif
    </form>
</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">Job</th>
                <th class="px-5 py-3 text-left">Type</th>
                <th class="px-5 py-3 text-left">Date</th>
                <th class="px-5 py-3 text-left">Amount</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">
                        @if($inv->job)
                        <span class="text-xs font-mono text-orange-300 bg-orange-900/20 px-2 py-0.5 rounded">{{ $inv->job->job_number }}</span>
                        @else
                        <span class="text-xs text-slate-600">—</span>
                        @endif
                    </td>
                    <td class="px-5 py-3">
                        @if($inv->invoice_type === 'manual')
                        <span class="badge badge-orange text-xs">Manual</span>
                        @else
                        <span class="badge badge-blue text-xs">Time-based</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-300">{{ $inv->created_at->format('d M Y') }}</td>
                    <td class="px-5 py-3">
                        <div class="text-sm font-semibold text-green-300">${{ number_format($inv->total_amount, 2) }}</div>
                        @if($inv->invoice_type === 'manual' && $inv->gst_amount)
                        <div class="text-xs text-slate-500">incl. GST ${{ number_format($inv->gst_amount, 2) }}</div>
                        @elseif($inv->invoice_type !== 'manual')
                        <div class="text-xs text-slate-500">{{ number_format($inv->total_hours, 2) }}h @ ${{ number_format($inv->hourly_rate, 2) }}/hr</div>
                        @endif
                    </td>
                    <td class="px-5 py-3">
                        @php
                            $sc = match($inv->status) {
                                'approved' => 'green', 'rejected' => 'red', 'paid' => 'blue', default => 'yellow'
                            };
                        @endphp
                        <span class="badge badge-{{ $sc }}">{{ 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 text-right">
                        <a href="{{ route('staff-invoices.show', $inv) }}" class="text-slate-400 hover:text-white" onclick="event.stopPropagation()">
                            <i class="fas fa-eye"></i>
                        </a>
                        @if($isTrades)
                        <a href="{{ route('staff-invoices.edit', $inv) }}" class="text-slate-400 hover:text-white" onclick="event.stopPropagation()">
                            <i class="fas fa-edit"></i>
                        </a>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="{{ $isAdminOrAccounts ? 9 : 8 }}" class="px-5 py-10 text-center text-slate-500">
                        <i class="fas fa-file-invoice text-3xl mb-3 block"></i>
                        No invoices found.
                        @if($isTrades)
                        <a href="{{ route('staff-invoices.create') }}" class="text-blue-400 hover:underline ml-1">Create your first invoice →</a>
                        @endif
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($invoices->hasPages())
    <div class="px-5 py-3 border-t border-slate-700">{{ $invoices->links() }}</div>
    @endif
</div>

{{-- Admin: 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-lg mx-4" x-data="{ isTradesUser: false }">
        <h3 class="mb-4">Generate Invoice</h3>
        <form method="POST" action="{{ route('staff-invoices.generate') }}">
            @csrf
            <div class="space-y-4">
                <div>
                    <label>Staff Member <span class="text-red-400">*</span></label>
                    <select name="user_id" required class="input"
                            @change="isTradesUser = $event.target.selectedOptions[0]?.dataset.trades === '1'">
                        <option value="">— Select staff member —</option>
                        @foreach(\App\Models\User::with('role')->where('is_active',true)->orderBy('name')->get() as $u)
                        @if($u->isHourlyRole())
                        <option value="{{ $u->id }}" data-trades="{{ $u->role?->name === 'trades' ? 1 : 0 }}">
                            {{ $u->name }} ({{ $u->role?->display_name ?? '—' }}) — ${{ $u->hourly_rate ?? 0 }}/hr
                        </option>
                        @endif
                        @endforeach
                    </select>
                </div>
                <div x-show="isTradesUser">
                    <label class="flex items-center gap-2">
                        Job <span class="text-xs text-orange-400 bg-orange-900/20 px-2 py-0.5 rounded">Trades</span>
                    </label>
                    <select name="job_id" class="input">
                        <option value="">— Select job (trades) —</option>
                        @foreach(\App\Models\Job::with('contact')->orderBy('job_number')->get() as $j)
                        <option value="{{ $j->id }}">{{ $j->job_number }}{{ $j->contact ? ' — ' . $j->contact->first_name . ' ' . $j->contact->last_name : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Period <span x-show="!isTradesUser" class="text-red-400">*</span><span x-show="isTradesUser" class="text-xs text-slate-400 ml-1">(optional for trades when job is selected)</span></label>
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-xs text-slate-500">Start</label>
                            <input type="date" name="period_start" class="input" :required="!isTradesUser">
                        </div>
                        <div>
                            <label class="text-xs text-slate-500">End</label>
                            <input type="date" name="period_end" class="input" :required="!isTradesUser">
                        </div>
                    </div>
                </div>
                <p class="text-xs text-slate-500">All completed, uninvoiced time entries matching the criteria will be included. Invoice will be <strong>pending</strong> until approved.</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