@extends('layouts.app')
@section('title', 'Create Invoice')
@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">Create Invoice</span>
@endsection

@section('content')
<div class="max-w-2xl mx-auto">

    @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 p-6">
        <div class="mb-6">
            <h1 class="mb-1">Create Invoice</h1>
            <p class="text-slate-400 text-sm">Submit a job invoice for admin approval. Include your net amount and applicable GST.</p>
        </div>

        <form method="POST" action="{{ route('staff-invoices.store') }}"
              x-data="{
                  netAmount: '',
                  gstRate: {{ $gstRate }},
                  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

            <!-- Job Selection -->
            <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>
                @if($jobs->isEmpty())
                <div class="p-4 rounded-lg bg-yellow-900/20 border border-yellow-700 text-yellow-300 text-sm">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    No jobs are currently assigned to you. Contact your manager to be assigned to a job.
                </div>
                @else
                <select name="job_id" required class="input w-full">
                    <option value="">— Select a job —</option>
                    @foreach($jobs as $job)
                    <option value="{{ $job->id }}" {{ old('job_id') == $job->id ? 'selected' : '' }}>
                        {{ $job->job_number }}
                        @if($job->contact)
                            — {{ $job->contact->first_name }} {{ $job->contact->last_name }}
                        @endif
                        @if($job->site_suburb)
                            ({{ $job->site_suburb }})
                        @endif
                    </option>
                    @endforeach
                </select>
                @if($errors->has('job_id'))
                <p class="text-red-400 text-xs mt-1">{{ $errors->first('job_id') }}</p>
                @endif
                @endif
            </div>

            <!-- Description / Action Notes -->
            <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"
                          placeholder="Describe the work completed, materials used, hours worked, etc.">{{ old('description') }}</textarea>
                @if($errors->has('description'))
                <p class="text-red-400 text-xs mt-1">{{ $errors->first('description') }}</p>
                @endif
            </div>

            <!-- Amount Fields -->
            <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>

                <!-- Net Amount -->
                <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"
                               value="{{ old('net_amount') }}">
                    </div>
                    @if($errors->has('net_amount'))
                    <p class="text-red-400 text-xs mt-1">{{ $errors->first('net_amount') }}</p>
                    @endif
                </div>

                <!-- GST Rate -->
                <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"
                           value="{{ old('gst_rate', $gstRate) }}">
                </div>

                <!-- Calculated Fields -->
                <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>

            <!-- Approval Notice -->
            <div class="p-4 rounded-lg bg-blue-900/20 border border-blue-700 text-blue-300 text-sm mb-6">
                <i class="fas fa-info-circle mr-2"></i>
                This invoice will be submitted as <strong>Pending</strong> and sent to admin/accounts for approval.
                You will be notified once it is approved or rejected.
            </div>

            <!-- Actions -->
            <div class="flex gap-3">
                <button type="submit" {{ $jobs->isEmpty() ? 'disabled' : '' }}
                        class="btn btn-primary flex-1 justify-center {{ $jobs->isEmpty() ? 'opacity-50 cursor-not-allowed' : '' }}">
                    <i class="fas fa-paper-plane mr-2"></i>Submit for Approval
                </button>
                <a href="{{ route('staff-invoices.index') }}" class="btn btn-secondary flex-1 justify-center text-center">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection