Adding additional requests with ajax in modal in item preivew list of order items - cruds of order items

Step 01: In preview.blade.php changing inside element of td where link is added with class 'additional-request-link' so that it can be used in js code for creating modal and with the modal loaded an ajax call will be made.

// link for modal
<td class="text-center">
	<small><a class="additional-request-link align-items-center" id="addi-req-link-{{ $orderItem->id }}" href="javascript:void(0);" 
		data-base-url="{{ url('') }}" data-resource="order_items/show_addi_req" data-rowid="{{ $orderItem->id }}" >
		{{ !empty($orderItem->additional_request) ? '' : 'Not Given' }}
	</a></small>                                  
</td>

// modal
<div id="modal-addi-reqs" class="modal fade">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4><strong >Set Additional Request</strong></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>   
            </div>
            <div class="modal-body">
                <div id="addi-req-form"></div>
            </div>
        </div>
    </div>
</div>

Step 02: Changing process.js for adding js code for modal

preview : () => {

	$( ".additional-request-link" ).on( "click", function() { 

		let addi_link = $(this).data('baseUrl') + '/'+ $(this).data('resource') +'/' + $(this).data('rowid'); 

			let addiReqModal = document.querySelector('#modal-addi-reqs');
			let addimodal = new bootstrap.Modal(addiReqModal, 
					{
						backdrop: false
					});
			addimodal.show();     
			
			$.ajax({
				url: addi_link,
				type: 'get',
				success: function(result) { 
					$('#addi-req-form').html(result);
				}
			});                 

		});        

} 

// changing app.js 
order.preview();

Step 03: Changing routes/web.php for adding route inside auth middlewar for showing and saving additional request with ajax

Route::group(['middleware'=> [ 'auth']], function() {

    Route::resource('orders', \App\Http\Controllers\OrderController::class);

    Route::get( '/order_items/show_addi_req/{item}', [\App\Http\Controllers\OrderItemController::class, 'show_addi_req']  ); // newly added 
    Route::post( '/order_items/save_req/{item}', [\App\Http\Controllers\OrderItemController::class, 'save_req']  );   // newly added 
	
    Route::post('/order_items/cal_cost', [\App\Http\Controllers\OrderItemController::class, 'calculateOrderPrice'])->name('calCost');    
    Route::resource('order_items', \App\Http\Controllers\OrderItemController::class);
    
    Route::group(['middleware'=> ['is_admin']], function() {
        Route::resource('users', \App\Http\Controllers\UserController::class);

        Route::post('/products/save_order/{product}', [\App\Http\Controllers\ProductController::class, 'saveOrder'])->name('products.save_order');
        Route::post('/profiles/save_order/{profile}', [\App\Http\Controllers\ProfileController::class, 'saveOrder'])->name('profiles.save_order');
        Route::post('/frame_widths/save_order/{frame_width}', [\App\Http\Controllers\FrameWidthController::class, 'saveOrder'])->name('frame_widths.save_order');

        Route::resource('products', \App\Http\Controllers\ProductController::class);
        Route::resource('profiles', \App\Http\Controllers\ProfileController::class);
        Route::resource('frame_widths', \App\Http\Controllers\FrameWidthController::class);

    });    

}); 

Step 04: In OrderItemController.php adding show_addi_req() method

function show_addi_req( OrderItem $item) {
	return view( 'order_items.show_addi_req', compact('item') );
} 

Step 05: Creating blade file resources/views/order_items/show_addi_req.blade.php

<form action="">
    <div class="form-group mb-2">
        <textarea name="addi_request"
            class="form-control form-control-md g-resize-none g-brd-gray-light-v7 g-brd-gray-light-v3--focus g-rounded-4"
            placeholder="Enter request" id="addi_request">{{ $item->additional_request }}</textarea>
    </div>
    <button type="button" class="sub-addi-req btn btn-primary">Save</button>
</form>

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {

        $( ".sub-addi-req" ).on( "click", function() { 

        let itemId = {{ $item->id }};
        $.ajax({
            headers : { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }, 
            url: '/order_items/save_req/' + itemId,
            type: 'POST',
            dataType: 'json',
            data: {
                addi_request: $('textarea#addi_request').val()
            },
            success: function(result) { 

                if(result.status == 'ok') {
                    Swal.fire({
                        title: 'Request is saved!',
                        //text: ' Please input ' + allowedFileTypes[requiredfileType].slice(0, -1).join(', ') + (( requiredfileType == 'img')?' or ':'')  + allowedFileTypes[requiredfileType].slice(-1) ,
                        icon: 'success'
                    });                     
                } else {
                    $('#addi-req-link-'+itemId).html('Not Given');
                }

                const addiReqmodal = document.querySelector('#modal-addi-reqs');
                const modal = bootstrap.Modal.getInstance(addiReqmodal);    
                modal.hide(); 
                           
            }
        });

        return false;
    });

    });
</script>

Step 06: Back in OrderItemController.php adding save_req() method

function save_req( OrderItem $item, Request $request) {
	if( !empty($request->post('addi_request')) ) {
		$item->additional_request = $request->post('addi_request');
		$item->save();
		$status = 'ok';            
	} else {
		$status = 'error';  
	}

	return response()->json( [
		'status' => $status,
	] );
}