@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Generate Invoice</div>

                <div class="card-body">
                    <form method="post" action="{{ route('invoices.generate') }}">
                        @csrf
                        <div class="mb-3">
                            <label for="customer_name" class="form-label">Customer Name:</label>
                            <select name="customer_name" id="customer_name" class="form-control">
                                @foreach ($customers ?? '' as $customer)
                                    <option value="{{ $customer->FullName }}">{{ $customer->FullName }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="ref_number" class="form-label">Reference Number:</label>
                            <input type="text" name="ref_number" id="ref_number" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="memo" class="form-label">Memo:</label>
                            <textarea name="memo" id="memo" class="form-control"></textarea>
                        </div>

                        <h2>Invoice Lines:</h2>
                        <table id="items_table" class="table">
                            <thead>
                                <tr>
                                    <th>Item Name</th>
                                    <th>Rate</th>
                                    <th>Quantity</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <select name="item_name[]" class="form-control">
                                            @foreach ($items as $item)
                                                <option value="{{ $item->FullName }}">{{ $item->FullName }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input type="number" name="rate[]" step="0.01" class="form-control" /></td>
                                    <td><input type="number" name="quantity[]" class="form-control" /></td>
                                    <td><button type="button" class="btn btn-danger btn-sm remove-item">Remove</button></td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td><button id="add-item" type="button" class="btn btn-primary">Add Item</button></td>
                                </tr>
                            </tfoot>
                        </table>

                        <button type="submit" class="btn btn-primary">Generate Invoice</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
    $(document).ready(function() {
    // Add item
        $("#add-item").click(function() {
            var row = '<tr>' +
                        '<td><select name="item_name[]" class="form-control">@foreach ($items as $item)<option value="{{ $item->FullName }}">{{ $item->FullName }}</option>@endforeach </select></td>' +
                        '<td><input type="number" name="rate[]" step="0.01" class="form-control" /></td>' +
                        '<td><input type="number" name="quantity[]" class="form-control" /></td>' +
                        '<td><button type="button" class="btn btn-danger btn-sm remove-item">Remove</button></td>' +
                    '</tr>';
            $("#items_table tbody").append(row);
        });

        // Remove item
        $(document).on("click", ".remove-item", function() {
            $(this).closest("tr").remove();
        });
    });
</script>
@endsection