@extends('layouts.admin')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold mb-0">Create New Billing</h3>
        <p class="text-muted mb-0">Generate a new invoice for a tenant.</p>
    </div>
    <a href="/admin/billings" class="btn btn-light border rounded-pill px-4">
        <i class="bi bi-arrow-left me-2"></i>Back to Billings
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-md-7">
        <div class="card p-4">
            <form action="/admin/billings" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="form-label fw-semibold">Tenant <span class="text-danger">*</span></label>
                    <select name="user_id" class="form-select" required>
                        <option value="">— Select Tenant —</option>
                        @foreach($tenants as $tenant)
                            <option value="{{ $tenant->id }}">{{ $tenant->name }} ({{ $tenant->email }})</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Unit <span class="text-danger">*</span></label>
                    <select name="unit_id" class="form-select" required>
                        <option value="">— Select Unit —</option>
                        @foreach($units as $unit)
                            <option value="{{ $unit->id }}">{{ $unit->name }} (Rp {{ number_format($unit->price) }}/mo)</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Amount (Rp) <span class="text-danger">*</span></label>
                    <input type="number" name="amount" class="form-control" placeholder="e.g. 1500000" required>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Billing Period <span class="text-danger">*</span></label>
                    <input type="text" name="period" class="form-control" placeholder="e.g. June 2026" required>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Due Date <span class="text-danger">*</span></label>
                    <input type="date" name="due_date" class="form-control" required>
                </div>

                <div class="d-grid mt-4">
                    <button type="submit" class="btn btn-success btn-lg rounded-pill fw-semibold">
                        <i class="bi bi-plus-circle me-2"></i>Generate Invoice
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection