@extends('layouts.admin-layout')
@section('content')


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>View Invoice</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Invoice</a></li>
                        <li class="breadcrumb-item active">View Invoice</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <form method="post" action="{{ route('admin.invoice.update', request()->route('id') ) }}">
                            @csrf
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Invoice #</label>
                                    <input type="text" class="form-control" id="exampleInputEmail1" disabled value="{{ $invoice->id }}" placeholder="Enter invoice #">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Create Date</label>
                                    <input type="date" class="form-control" id="exampleInputEmail1" disabled value="{{ $invoice->date }}" placeholder="Enter create date">
                                </div>

                                @foreach($invoice->items as $items)
                                <div class="row align-items-end">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Description</label>
                                            <input type="text" class="form-control" id="exampleInputEmail1" disabled  value="{{ $items->description }}" placeholder="Enter invoice #">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">Amount</label>
                                            <input type="number" class="form-control" id="exampleInputEmail1" disabled   value="{{ $items->amount }}" placeholder="Enter amount">
                                        </div>
                                    </div>
{{--                                    <div class="col-md-4">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <a href="{{ route('admin.invoice.item.delete',$items->id) }}">Delete </a>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
                                </div>
                                @endforeach

{{--                                <div class="row align-items-end">--}}
{{--                                    <div class="col-md-4">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label for="exampleInputEmail1">Description</label>--}}
{{--                                            <input type="text" class="form-control" id="exampleInputEmail1" name="description[]"  placeholder="Enter invoice #">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-md-4">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label for="exampleInputEmail1">Amount</label>--}}
{{--                                            <input type="number" class="form-control" id="exampleInputEmail1" name="amount[]"  placeholder="Enter amount">--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-md-4">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <button type="button" class="btn btn-success" id="addMore">Add more</button>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div id="additionalFieldsContainer"></div>--}}

                            </div>
{{--                            <div class="card-footer">--}}
{{--                                <button type="submit" class="btn btn-primary">Submit</button>--}}
{{--                            </div>--}}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Counter to keep track of added fields
        let fieldCounter = 0;

        // Function to add more fields
        function addMoreFields() {
            fieldCounter++;
            const newFields = `
            <div class="row align-items-end">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Description</label>
                        <input type="text" class="form-control" name="description[]" placeholder="Enter invoice #">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Amount</label>
                        <input type="number" class="form-control" name="amount[]" placeholder="Enter invoice #">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">

                        <button type="button" class="btn btn-danger delete-row">Delete</button>
                    </div>
                </div>
            </div>
        `;

            // Append the new fields to the container
            $('#additionalFieldsContainer').append(newFields);
        }

        // Function to delete a row
        function deleteRow() {
            $(this).closest('.row').remove();
        }

        // Add more fields when the "Add more" link is clicked
        $('#addMore').click(function(e) {
            e.preventDefault();
            addMoreFields();
        });

        // Delete a row when the "Delete" button is clicked
        $('#additionalFieldsContainer').on('click', '.delete-row', deleteRow);
    });
</script>