@extends('layouts.app')
@section('title', 'Edit 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>
    <a href="{{ route('staff-invoices.show', $staffInvoice) }}" class="hover:text-white">{{ $staffInvoice->invoice_number }}</a>
    <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i>
    <span class="text-white">Edit</span>
@endsection

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="card p-6">
        <div class="mb-6">
            <h1 class="mb-1">Edit Invoice {{ $staffInvoice->invoice_number }}</h1>
            <p class="text-slate-400 text-sm">Update your pending invoice before it is reviewed by admin.</p>
        </div>

        <form method="POST" action="{{ route('staff-invoices.update', $staffInvoice) }}"
              x-data="{
                  netAmount: '{{ $staffInvoice->net_amount }}',
                  gstRate: {{ $staffInvoice->gst_rate ?? 10 }},
                  get gstAmount() { return this.netAmount ? Math.round(parseFloat(this.netAmount) * this.gstRate / 100 * 100) / 100 : 0; },
                  get totalAmount() { return this.netAmount ? Math.round((parseFloat(this.netAmount) + this.gstAmount) * 100) / 100 : 0; },
                  formatCurrency(val) { return isNaN(val) ? '0.00' : parseFloat(val).toFixed(2); }
              }">
            @csrf
            @method('PUT')

            <div class="mb-5">
                <label class="block text-sm font-medium text-slate-300 mb-1">Assigned Job <span class="text-red-400">*</span></label>
                <select name="job_id" required class="input w-full">
                    @foreach($jobs as $job)
                    <option value="{{ $job->id }}" {{ $staffInvoice->job_id == $job->id ? 'selected' : '' }}>
                        {{ $job->job_number }}
                        @if($job->contact) — {{ $job->contact->first_name }} {{ $job->contact->last_name }} @endif
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-5">
                <label class="block text-sm font-medium text-slate-300 mb-1">Description / Work Notes <span class="text-red-400">*</span></label>
                <textarea name="description" rows="4" required class="input w-full">{{ $staffInvoice->description }}</textarea>
            </div>

            <div class="p-4 rounded-xl bg-slate-800/50 border border-slate-700 space-y-4 mb-6">
                <h3 class="text-sm font-semibold text-slate-200">Invoice Amount</h3>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">Net Amount (ex. GST) <span class="text-red-400">*</span></label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 font-semibold">$</span>
                        <input type="number" name="net_amount" step="0.01" min="0.01" required x-model="netAmount" class="input w-full pl-7" placeholder="0.00">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-slate-400 mb-1">GST Rate (%)</label>
                    <input type="number" name="gst_rate" step="0.01" min="0" max="100" x-model="gstRate" class="input w-full">
                </div>
                <div class="grid grid-cols-2 gap-3 pt-2 border-t border-slate-700">
                    <div class="p-3 rounded-lg bg-slate-900/50">
                        <div class="text-xs text-slate-500 mb-1">GST Amount</div>
                        <div class="text-lg font-bold text-yellow-400">$<span x-text="formatCurrency(gstAmount)">0.00</span></div>
                    </div>
                    <div class="p-3 rounded-lg bg-green-900/20 border border-green-700">
                        <div class="text-xs text-green-400 mb-1">Total (inc. GST)</div>
                        <div class="text-lg font-bold text-green-300">$<span x-text="formatCurrency(totalAmount)">0.00</span></div>
                    </div>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="btn btn-primary flex-1 justify-center">
                    <i class="fas fa-save mr-2"></i>Save Changes
                </button>
                <a href="{{ route('staff-invoices.show', $staffInvoice) }}" class="btn btn-secondary flex-1 justify-center text-center">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection