@extends('layouts.main')

@section('title')
    Base Rate
@endsection

@section('content')
    <div class="card m-3">
        <section>
            <form action="{{ route('base-rate.update') }}" method="POST">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 form-group">
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered" id="baseRateTable">
                                <thead>
                                    <tr>
                                        <th>Month</th>
                                        <th>Year</th>
                                        <th>Base Rate (%)</th>
                                        <th>Average Base Rate (%)</th>
                                        <th>Spread Rate (%)</th>
                                        <th>Remove</th>
                                    </tr>
                                </thead>
                                <tr>
                                    <th colspan="6">
                                        <button id="btnAdd" type="button" class="btn btn-sm btn-secondary"><i
                                                class="fa fa-plus" aria-hidden="true"></i>&nbsp;
                                            Add&nbsp;</button>
                                    </th>
                                </tr>

                                @php
                                    $baseRateCount = count($baseRates);
                                @endphp

                                <tbody id="baseRateTableBody">
                                    @if (old('month') || old('year') || old('base_rate') || old('average_base_rate') || old('spread_rate'))
                                        @foreach (old('month') as $key => $old)
                                            @include('baseRate.addRow', ['index' => $key])
                                        @endforeach
                                    @elseif (count($baseRates) > 0)
                                        @foreach ($baseRates as $key => $value)
                                            @include('baseRate.addRow', ['index' => $key])
                                        @endforeach
                                    @else
                                        @include('baseRate.addRow', ['index' => 0])
                                    @endif
                                </tbody>


                            </table>
                        </div>
                    </div>
                </div>

                <div class="m-2">
                    <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-save"></i>&nbsp;Update</button>
                    <a href="{{ route('base-rate.edit') }}" class="btn btn-sm btn-danger"><i
                            class="fa fa-ban"></i>&nbsp;Cancel</a>
                </div>
            </form>
        </section>
    </div>
@endsection

@section('scripts')
    <script>
        index = {{ isset($baseRateCount) ? $baseRateCount - 1 : 0 }};

        function addRow() {
            $.ajax({
                type: "GET",
                data: {
                    index: index + 1,
                },
                url: "{{ route('base-rate.add-row') }}",
                success: function(response) {
                    $("#baseRateTableBody").prepend(response);
                }
            });
        }

        // Bind click event to the "Add" button
        $("#btnAdd").bind("click", function() {
            addRow();
        });

        // Bind click event to the "Remove" button
        $("body").on("click", ".remove", function() {
            $(this).closest("tr").remove();
        });
    </script>
@endsection