@extends('layout.billing-app')

@section('title', 'Create Billing Form')

@section('content')
    <div class="container mt-4">
        <div class="card shadow-sm">
            <div class="card-header">
            <h5 class="mb-0">Billing Monitoring Form</h5>
            </div>

            <div class="card-body">
            <form>
                <!-- Project Information -->
                <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Project Name</label>
                    <select class="form-select">
                        <option selected disabled>Select Project</option>
                        <option>Project A</option>
                        <option>Project B</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Lot Number</label>
                    <input type="text" class="form-control" placeholder="Enter Lot Number">
                </div>
                </div>

                <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Billing Category</label>
                    <select class="form-select">
                    <option selected disabled>Select Billing</option>
                    <option>1st Billing</option>
                    <option>2nd Billing</option>
                    <option>3rd Billing</option>
                    <option>4th Billing</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Region</label>
                    <select class="form-select" multiple>
                    <option>Region I</option>
                    <option>Region II</option>
                    <option>Region III</option>
                    <option>Region IV-A</option>
                    </select>
                    <small class="text-muted">Hold CTRL to select multiple</small>
                </div>
                </div>

                <!-- Educational Details -->
                <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Grade Level</label>
                    <input type="text" class="form-control" placeholder="Enter Grade Level">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Learning Area</label>
                    <input type="text" class="form-control" placeholder="Enter Learning Area">
                </div>
                </div>

                <!-- Contract Details -->
                <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Contracted Qty.</label>
                    <input type="number" class="form-control">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Contracted Amount</label>
                    <input type="number" class="form-control">
                </div>
                </div>

                <!-- Supplier -->
                <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Supplier</label>
                    <input type="text" class="form-control" placeholder="Enter Supplier Name">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Procured Status</label>
                    <select class="form-select">
                    <option selected disabled>Select Status</option>
                    <option>Procured</option>
                    <option>Not Procured</option>
                    </select>
                </div>
                </div>

                <!-- Delivered Quantities -->
                <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label">Delivered Qty. (1st Billing)</label>
                    <input type="number" class="form-control">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Delivered Qty. (2nd Billing)</label>
                    <input type="number" class="form-control">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Delivered Qty. (3rd Billing)</label>
                    <input type="number" class="form-control">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Delivered Qty. (4th Billing)</label>
                    <input type="number" class="form-control">
                </div>
                </div>

                <!-- Status -->
                <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Status</label>
                    <select class="form-select">
                    <option selected disabled>Select Status</option>
                    <option>Completed / Paid</option>
                    <option>Pending</option>
                    <option>On-Process</option>
                    <option>Incoming</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Date Received</label>
                    <input type="date" class="form-control">
                </div>

                <div class="col-md-4">
                    <label class="form-label">Routed</label>
                    <select class="form-select">
                    <option selected disabled>Select Route</option>
                    <option>Accounting</option>
                    <option>Procurement</option>
                    <option>Warehouse</option>
                    </select>
                </div>
                </div>

                <!-- Remarks -->
                <div class="mb-3">
                <label class="form-label">Remarks / Status</label>
                <textarea
                    class="form-control"
                    rows="4"
                    placeholder="Enter remarks or updates here..."
                ></textarea>

                <small class="text-muted">
                    Suggested: store update logs/history in database whenever edited.
                </small>
                </div>

                <!-- Submit -->
                <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    Save Entry
                </button>
                </div>

            </form>
            </div>
        </div>
    </div>
@endsection