@if ($previousData == true)
    <div class="alert alert-warning" style="color: black !important;">
        <strong>Warning!</strong> Transaction time schedule exists for the {{$level}} on {{$effectiveDate}}. 
    </div>
@else
    {!! Form::open(['url' => '']) !!}
    {!! Form::hidden('level', $level, []) !!}
    {!! Form::hidden('nameList', $nameList->pluck('id'), []) !!}
    {!! Form::hidden('effectiveDate', $effectiveDate, []) !!}
    <div class="tab-content">
        <div id="bankAccount" class="tab-pane active">
            <div class="form-group">
                <table id="timeSlotTable" class="table">
                    <thead>
                        <tr>
                            <th style="width:10%;">{{$level}}</th>
                            <th style="width:15%;">From</th>
                            <th style="width:15%;">To</th>
                            <th style="width:15%;">Action</th>
                        </tr>
                    </thead>
                    <tbody id="trxTimeSlot">
                        @foreach ($nameList as $levelName)
                            <tr class="{{$levelName->id}}" data-levelName="{{$levelName->name}}">
                                <td rowspan="1" class="levelName" style="color:black;text-align: left;">{{$levelName->name}}</td>
                                <td><input class="text-center form-control" type="time" style="color:black;" name="{{$levelName->id}}[from][]"></td>
                                <td><input class="text-center form-control" type="time" style="color:black;" name="{{$levelName->id}}[to][]"></td>
                                <td class="text-center">
                                    <i class="fa fa-plus-square addRow" style=" color:black; font-size: 26px;"></i>
                                    &nbsp; &nbsp;
                                    <i class="fa fa-minus-square removeRow" style=" color:black; font-size: 26px;"></i>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="18">
                                <input id="submit" class="btn btn-primary text-uppercase pull-right" type="submit" value="Submit">
                            </td>
                        </tr>
                    </tfoot>
                </table>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endif
                       

<script>
    $(document).ready(function () {
        // Add row event
        $(document).on('click', '.addRow', function () {
            var row = $(this).closest('tr');
            var rowClassName  = row.attr('class');
            var firstRowWithClass = $('#trxTimeSlot tr.' + rowClassName ).first();
            var cell = firstRowWithClass.find('td:first');
            var clone = row.clone();
            clone.find('input').val('');
            if (parseInt(cell.attr('rowspan')) == 1) {
                clone.find('td:first').remove();
            }
            clone.insertAfter(row);
            updateRowspan(cell);
        });

        function updateRowspan(cell) {
            var currentRowspan = parseInt(cell.attr('rowspan')) ;
            cell.attr('rowspan', currentRowspan + 1); // Increase rowspan
        }

        // Remove row event
        $(document).on('click', '.removeRow', function () {
            var row = $(this).closest('tr');
            var rowClassName  = row.attr('class');
            var firstRowWithClass = $('#trxTimeSlot tr.' + rowClassName ).first();
            var cell = firstRowWithClass.find('td:first');
            if (parseInt(cell.attr('rowspan')) <= 1) {
                return; // Don't remove the row if it's the only one remaining
            }
            row.remove();
            decreaseRowspan(cell);
        });

        // Function to decrease rowspan for the correct zone cell
        function decreaseRowspan(cell) {
            var currentRowspan = parseInt(cell.attr('rowspan')) || 1;
            if (currentRowspan > 1) {
                cell.attr('rowspan', currentRowspan - 1); // Decrease rowspan
            }
        }

        $('form').submit(function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'post',
                url: "{{ route('trxTimeSlot.store') }}",
                data: formData,
                contentType: false,
                cache: false,
                dataType: 'json',
                processData: false,
                success: function(data) {
                    if (data.errors) {
                    } else {
                        if(data.responseTitle == "Success!"){
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href = "{{ route('trxTimeSlot.filter') }}";
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                        }
                    }
                },
                error: function(_response) {
                    // Handle error
                    alert(_response.errors);
                }
            });
        });
    });

</script>




{{-- @endsection --}}