@extends('layouts.dashboard')
@section('title', 'Create Invoice')
@section('page-title', 'Create Invoice')
@section('content')
<div class="content-card" style="max-width:760px;">
    <form method="POST" action="{{ route('admin.invoices.store') }}">
        @csrf
        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label">User</label>
                <select name="user_id" class="form-select" required>
                    <option value="">— Select user —</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}" {{ old('user_id') == $u->id ? 'selected' : '' }}>
                            {{ $u->name }} ({{ $u->email }}) — {{ $u->role }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label">Package (optional)</label>
                <select name="package_id" id="package_id" class="form-select">
                    <option value="">— None —</option>
                    @foreach($packages as $p)
                        <option value="{{ $p->id }}" data-price="{{ $p->price }}">{{ $p->name }} — {{ $p->blogs_count }} blogs / ${{ number_format($p->price, 2) }}</option>
                    @endforeach
                </select>
                <small class="text-muted">Selecting auto-fills the price.</small>
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label">Amount</label>
                <input type="number" step="0.01" name="amount" id="amount" class="form-control" value="{{ old('amount', 10) }}" required>
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label">Currency</label>
                <input type="text" name="currency" class="form-control" value="{{ old('currency', 'USD') }}" required>
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label">Due Date</label>
                <input type="date" name="due_date" class="form-control" value="{{ old('due_date', now()->addDays(7)->format('Y-m-d')) }}">
            </div>
            <div class="col-12 mb-3">
                <label class="form-label">Notes</label>
                <textarea name="notes" rows="3" class="form-control">{{ old('notes') }}</textarea>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary">Create Invoice</button>
            <a href="{{ route('admin.invoices.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
</div>
@push('scripts')
<script>
document.getElementById('package_id').addEventListener('change', function() {
    var price = this.options[this.selectedIndex].dataset.price;
    if (price) document.getElementById('amount').value = price;
});
</script>
@endpush
@endsection