@extends('layouts.app')
@section('title', 'Invoice '.$staffInvoice->invoice_number)
@section('breadcrumb')<a href="{{ route('staff-invoices.index') }}" class="hover:text-white">Staff Invoices</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i><span class="text-white">{{ $staffInvoice->invoice_number }}</span>@endsection

@section('content')
@php $isAdminOrAccounts = in_array(auth()->user()->role?->name, ['office_admin','accounts']); @endphp

<div x-data="{ showApproveModal: false, showRejectModal: false }">

@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

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Invoice Card -->
    <div class="lg:col-span-2 space-y-5">
        <div class="card p-6">
            <div class="flex items-start justify-between mb-5">
                <div>
                    <h1 class="mb-1">{{ $staffInvoice->invoice_number }}</h1>
                    <p>{{ $staffInvoice->period_start->format('d M Y') }} – {{ $staffInvoice->period_end->format('d M Y') }}</p>
                </div>
                <span class="badge text-base px-4 py-2 {{ $staffInvoice->status_badge }}">{{ ucfirst($staffInvoice->status) }}</span>
            </div>

            <!-- Staff Info -->
            <div class="flex items-center gap-4 p-4 rounded-xl bg-slate-800/50 mb-5">
                <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center text-blue-300 font-bold">
                    {{ $staffInvoice->user->initials }}
                </div>
                <div>
                    <div class="text-white font-semibold">{{ $staffInvoice->user->name }}</div>
                    <div class="text-slate-400 text-sm">{{ $staffInvoice->user->role?->display_name }}</div>
                    <div class="text-slate-500 text-xs">{{ $staffInvoice->user->email }}</div>
                </div>
                <div class="ml-auto text-right">
                    <div class="text-xs text-slate-400">Hourly Rate</div>
                    <div class="text-blue-300 font-semibold">${{ number_format($staffInvoice->hourly_rate, 2) }}/hr</div>
                </div>
            </div>

            <!-- Totals -->
            <div class="grid grid-cols-3 gap-4 mb-5">
                <div class="p-4 rounded-xl bg-slate-800/50 text-center">
                    <div class="text-xs text-slate-400 mb-1">Total Hours</div>
                    <div class="text-2xl font-bold text-white">{{ number_format($staffInvoice->total_hours, 2) }}h</div>
                </div>
                <div class="p-4 rounded-xl bg-slate-800/50 text-center">
                    <div class="text-xs text-slate-400 mb-1">Rate</div>
                    <div class="text-2xl font-bold text-blue-300">${{ number_format($staffInvoice->hourly_rate, 2) }}</div>
                </div>
                <div class="p-4 rounded-xl bg-green-900/20 border border-green-700 text-center">
                    <div class="text-xs text-green-400 mb-1">Total Amount</div>
                    <div class="text-2xl font-bold text-green-300">${{ number_format($staffInvoice->total_amount, 2) }}</div>
                </div>
            </div>

            @if($staffInvoice->notes)
            <div class="p-3 rounded-lg bg-slate-800/50 text-sm text-slate-300 mb-4">{{ $staffInvoice->notes }}</div>
            @endif

            @if($staffInvoice->approval_notes)
            <div class="p-3 rounded-lg {{ $staffInvoice->status === 'approved' ? 'bg-green-900/20 border border-green-700 text-green-300' : 'bg-red-900/20 border border-red-700 text-red-300' }} text-sm mb-4">
                <strong>{{ ucfirst($staffInvoice->status) }} by {{ $staffInvoice->approver?->name }}:</strong> {{ $staffInvoice->approval_notes }}
            </div>
            @endif

            <!-- Time Entry Breakdown -->
            <h3 class="mb-3">Time Entry Breakdown</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead><tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                        <th class="py-2 text-left">Date</th>
                        <th class="py-2 text-left">Task</th>
                        <th class="py-2 text-left">Job</th>
                        <th class="py-2 text-left">Duration</th>
                        <th class="py-2 text-right">Amount</th>
                    </tr></thead>
                    <tbody>
                        @foreach($staffInvoice->timeEntries as $entry)
                        <tr class="border-b border-slate-800">
                            <td class="py-2 text-slate-300">{{ $entry->started_at->format('d M H:i') }}</td>
                            <td class="py-2 text-white">{{ $entry->taskType?->name ?? '—' }}</td>
                            <td class="py-2 text-slate-400">{{ $entry->job?->job_number ?? '—' }}</td>
                            <td class="py-2 font-mono text-blue-300">{{ $entry->elapsed }}</td>
                            <td class="py-2 text-right text-green-400">${{ number_format($entry->duration_hours * $staffInvoice->hourly_rate, 2) }}</td>
                        </tr>
                        @endforeach
                        <tr class="border-t border-slate-600">
                            <td colspan="3" class="py-3 text-slate-400 font-semibold">Total</td>
                            <td class="py-3 font-mono font-bold text-white">{{ number_format($staffInvoice->total_hours, 2) }}h</td>
                            <td class="py-3 text-right font-bold text-green-300">${{ number_format($staffInvoice->total_amount, 2) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Actions Sidebar -->
    <div class="space-y-4">
        @if($isAdminOrAccounts && $staffInvoice->status === 'pending')
        <div class="card p-5">
            <h3 class="mb-4"><i class="fas fa-check-circle mr-2 text-green-400"></i>Approval Required</h3>
            <p class="text-sm text-slate-400 mb-4">Review the time entries above and approve or reject this invoice.</p>
            <button @click="showApproveModal=true" class="btn btn-success w-full mb-2">
                <i class="fas fa-check"></i> Approve Invoice
            </button>
            <button @click="showRejectModal=true" class="btn btn-danger w-full">
                <i class="fas fa-times"></i> Reject Invoice
            </button>
        </div>
        @endif

        @if($isAdminOrAccounts && $staffInvoice->status === 'approved')
        <div class="card p-5">
            <h3 class="mb-4">Payment</h3>
            <form method="POST" action="{{ route('staff-invoices.paid', $staffInvoice) }}">
                @csrf
                <button type="submit" class="btn btn-primary w-full">
                    <i class="fas fa-dollar-sign"></i> Mark as Paid
                </button>
            </form>
        </div>
        @endif

        <div class="card p-5">
            <h3 class="mb-3">Invoice Details</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span class="text-slate-400">Invoice No.</span><span class="text-white font-mono">{{ $staffInvoice->invoice_number }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">Created</span><span class="text-white">{{ $staffInvoice->created_at->format('d M Y') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">Period</span><span class="text-white">{{ $staffInvoice->period_start->format('d M') }} – {{ $staffInvoice->period_end->format('d M Y') }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">Entries</span><span class="text-white">{{ $staffInvoice->timeEntries->count() }}</span></div>
                @if($staffInvoice->approved_at)
                <div class="flex justify-between"><span class="text-slate-400">{{ ucfirst($staffInvoice->status) }} At</span><span class="text-white">{{ $staffInvoice->approved_at->format('d M Y H:i') }}</span></div>
                @endif
            </div>
        </div>

        <a href="{{ route('staff-invoices.index') }}" class="btn btn-secondary w-full"><i class="fas fa-arrow-left"></i> Back to Invoices</a>
    </div>
</div>

<!-- Approve Modal -->
<div x-show="showApproveModal" 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 text-green-300">Approve Invoice</h3>
        <form method="POST" action="{{ route('staff-invoices.approve', $staffInvoice) }}">
            @csrf
            <div class="space-y-4">
                <p class="text-sm text-slate-400">Approving <strong class="text-white">{{ $staffInvoice->invoice_number }}</strong> for <strong class="text-white">${{ number_format($staffInvoice->total_amount, 2) }}</strong></p>
                <div>
                    <label>Notes (optional)</label>
                    <textarea name="notes" class="input" rows="3" placeholder="Approval notes..."></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-success flex-1">Confirm Approval</button>
                    <button type="button" @click="showApproveModal=false" class="btn btn-secondary flex-1">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Reject Modal -->
<div x-show="showRejectModal" 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 text-red-300">Reject Invoice</h3>
        <form method="POST" action="{{ route('staff-invoices.reject', $staffInvoice) }}">
            @csrf
            <div class="space-y-4">
                <p class="text-sm text-slate-400">Rejecting will release time entries for re-invoicing.</p>
                <div>
                    <label>Reason for Rejection <span class="text-red-400">*</span></label>
                    <textarea name="notes" class="input" rows="3" placeholder="Reason for rejection..." required></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="submit" class="btn btn-danger flex-1">Confirm Rejection</button>
                    <button type="button" @click="showRejectModal=false" class="btn btn-secondary flex-1">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

</div>
@endsection