@include('layouts.header')
@include('layouts.sidebar')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>View Inward Data </h4>
                
                </div>
            </div>
            <ul class="table-top-head">
                <li>
                    <div class="page-btn">
                         <a href="{{ url('inwards')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back</a> 
                    </div>
                </li>
                <li>
                    <a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
                </li>
            </ul>

        </div>
        	<!-- /Company list -->
					<div class="card table-list-card">
						<div class="card-body">
							<div class="table-top">
								<div class="search-set">
									<div class="search-input">
										<a href="javascript:void(0);" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
									</div>
								</div>
								{{-- <div class="search-path">
									<a class="btn btn-filter" id="filter_search">
										<i data-feather="filter" class="filter-icon"></i>
										<span><img src="assets/img/icons/closes.svg" alt="img"></span>
									</a>
								</div>
								<div class="form-sort">
									<i data-feather="sliders" class="info-img"></i>
									<select class="select">
										<option>Sort by Date</option>
										<option>14 09 23</option>
										<option>11 09 23</option>
									</select>
								</div> --}}
							</div>
							<!-- /Filter -->
							<div class="card mb-0" id="filter_inputs">
								<div class="card-body pb-0">
									<div class="row">
										<div class="col-lg-12 col-sm-12">
											<div class="row">
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="box" class="info-img"></i>
														<select class="select">
															<option>Choose Company</option>
															<option>
																Lenovo 3rd Generation</option>
															<option>Nike Jordan</option>
														</select>
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="stop-circle" class="info-img"></i>
														<select class="select">
															<option>Choose Categroy</option>
															<option>Laptop</option>
															<option>Shoe</option>
														</select>
													</div>
												</div>
												
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="git-merge" class="info-img"></i>
														<select class="select">
															<option>Choose Sub Category</option>
															<option>Computers</option>
															<option>Fruits</option>
														</select>
													</div>
												</div>
												
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i data-feather="stop-circle" class="info-img"></i>
														<select class="select">
															<option>All Brand</option>
															<option>Lenovo</option>
															<option>Nike</option>
														</select>
													</div>
												</div>
												
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<i class="fas fa-money-bill info-img"></i>
														<select class="select">
															<option>Price</option>
															<option>$12500.00</option>
															<option>$12500.00</option>
														</select>
													</div>
												</div>
												<div class="col-lg-2 col-sm-6 col-12">
													<div class="input-blocks">
														<a class="btn btn-filters ms-auto"> <i data-feather="search" class="feather-search"></i> Search </a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							@if(session()->has('success'))
							<div class="alert alert-success">
								{{ session()->get('success') }}
							</div>
							@endif
							@if(session()->has('error'))
							<div class="alert alert-danger">
								{{ session()->get('error') }}
							</div>
						    @endif
							<!-- /Filter -->
							<div class="table-responsive Company-list">
								<table class="table datanew">
									<thead>
										<tr>
                                            <th>Sr No</th>
											<th>Varient Name</th>
											<th>No of Rolls</th>
											<th>Quantity</th>
											<th>Rate</th>
											<th>Unit</th>
											<th>Amount</th>
											
										</tr>
									</thead>
									<tbody>
                                           
                                        

                                                <tr>
                                                    <td>1</td>
                                                    <td><a href="javascript:void(0);" class="expand-row" data-id="{{ $item->inward_id}}">{{ $item->varient_code }} - {{ $item->varient_name }}</a></td>
                                                    <td>{{ $item->no_of_rolls }}</td>
                                                    <td>{{ $item->quantity }}</td>
                                                    <td>{{ $item->rate }}</td>
                                                    <td>{{ $item->uom }}</td>
                                                    <td>{{ $item->amount }}</td> 
                                                    
                                                   
                                                </tr>
                                           
                                        </tbody>

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

@include('layouts.footer')









<div class="modal fade" id="change-status">
    <div class="modal-dialog modal-dialog-centered modal-sm custom-modal-two">
        <div class="modal-content">
            <div class="page-wrapper-new p-0">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <div class="page-title">
                            <h4>Do you want to make this item Defective ? </h4>
                        </div>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-modal-body">
                        <form id="change-roll-status-form" enctype="multipart/form-data" >
                            @csrf

                            <input type="hidden"  name="roll_id" id="roll-id">
							

                            <div class="modal-footer-btn">
                                <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">No</button>
                                <button type="submit" class="btn btn-submit" id="save-status-btn">Yes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>




$(document).on('click', '.expand-row', function () {
    const parentRow = $(this).closest('tr'); 
    const itemId = $(this).data('id'); 
   // alert(itemId);
    
    const isExpanded = parentRow.next().hasClass('expanded-row');

    // Remove existing expanded row if already present
    $('.expanded-row').remove();

    // If not expanded, add the expanded row
    if (!isExpanded) {
        const loadingContent = `
            <tr class="expanded-row">
                <td colspan="8">
                    <div class="nested-table">
                        <table class="table datanew table-bordered" id="roll_table">
                            <thead>
                                <tr>
                                    <th>Company</th>
                                    <th>Roll No</th>
                                    <th>Total Qty</th>
                                    <th>Availability</th>
                                    <th>Inward On</th>
                                    <th>Status</th>
									<th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="7" class="text-center">Loading data...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        `;

        // Insert loading row
        parentRow.after(loadingContent);

        // Fetch data from the server
        $.ajax({
            url: `/get-rolls-data/${itemId}`, // Replace with your actual API route
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                if (Array.isArray(data) && data.length > 0) {
                    const rows = data.map(item => `
                        <tr>
                            <td class="expand" data-id="${item.id}"  data-varient="${item.varient_id}"><a href="javascript:void(0);">${item.company_name || 'N/A'}</a></td>
                            <td class="expand" data-id="${item.id}"><a href="javascript:void(0);">${item.id || 'N/A'}</a></td>
                            <td>${item.quantity || 'N/A'}</td>
                           
                            <td>${item.availability || 'N/A'}</td>
                            <td>${item.inward_on || 'N/A'}</td>
                            <td>${item.remark || 'N/A'}</td>
							<td>
            ${item.defective_status == 1 
                ? '<a class="me-2 p-2 btn btn-danger" href="javascript:void(0);" data-bs-toggle="modal"> Defective</a>' 
                : `<a class="me-2 p-2 btn btn-warning change-status-btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#change-status" data-id="${item.id}" > Make Defective</a>`}
        </td>
                        </tr>
                    `).join('');

                    // Update the table body with fetched rows
                    parentRow.next().find('tbody').html(rows);
                } else {
                    // Display message if no data found
                    parentRow.next().find('tbody').html(`
                        <tr>
                            <td colspan="7" class="text-center">No data available</td>
                        </tr>
                    `);
                }
            },
            error: function () {
                // Display error message
                parentRow.next().find('tbody').html(`
                    <tr>
                        <td colspan="7" class="text-center">Error fetching data</td>
                    </tr>
                `);
            }
        });
    }
});




$(document).on('click', '.expand', function () {
    const parentRow = $(this).closest('tr'); 
    const itemId = $(this).data('id');
     const varient = $(this).data('varient');
    const isExpanded = parentRow.next().hasClass('nested-company-row');

    // Remove existing expanded rows
    $('.nested-company-row').remove();

    if (!isExpanded) {
        // Add a new row for nested table
        const nestedTableRow = `
            <tr class="nested-company-row">
                <td colspan="7">
                    <div class="nested-company-table">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Order Id</th>
                                    <th>Customer</th>
                                    <th>Quantity</th>
                                    <th>Rate</th>
                                    <th>Order Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="5" class="text-center">Loading...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        `;

        // Insert after the clicked row
        parentRow.after(nestedTableRow);

        // Fetch nested data
       $.ajax({
            url: `/get-order-data/${itemId}/${varient}`, 
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log(data.data.length);
                if (Array.isArray(data.data) && data.data.length > 0) {
                   
                    const rows = data.data.map(item => `
                        <tr>
                            <td>${item.order_code || 'N/A'}</td>
                            <td>${item.customer_name || 'N/A'}</td>
                            <td>${item.quantity || 'N/A'}</td>
                            <td>${item.price || 'N/A'}</td>
                            <td>${item.status || 'N/A'}</td>
                        </tr>
                    `).join('');
                    parentRow.next().find('tbody').html(rows);
                } else {
                   
                    parentRow.next().find('tbody').html(`
                        <tr>
                            <td colspan="5" class="text-center">No data available</td>
                        </tr>
                    `);
                }
            },
            error: function () {
                parentRow.next().find('tbody').html(`
                    <tr>
                        <td colspan="5" class="text-center">Error fetching data</td>
                    </tr>
                `);
            }
        });
    }
});





$('#change-status').on('shown.bs.modal', function (e) {
    const button = $(e.relatedTarget); 
    const rollId = button.data('id'); 
    $(this).find('input[name="roll_id"]').val(rollId); 
});


// Open modal and populate data
$(document).on('click', '.change-status-btn', function () {
    const rollId = $(this).data('id');
    const currentStatus = $(this).data('current-status');

    // Populate the modal fields
    $('#roll-id').val(rollId);
    $('#status').val(currentStatus);
});

// Save status and update table

$('#change-roll-status-form').on('submit', function (event) {
    event.preventDefault(); 
    const rollId = $('#roll-id').val();
   
    $.ajax({
        url: '/change-roll-status', 
        method: 'POST',
        data: {
            roll_id: rollId,
            _token: $('meta[name="csrf-token"]').attr('content')

        },
        success: function (response) {
          
            // Check if response is successful
            if (response && response.success) {
               // alert('roll'+ response.data.id);
                // Find the row corresponding to the rollId
                const row = $(`a[data-id="${response.data.id}"]`).closest('tr');
               
                // Update the status column (7th column in this example)
                row.find('td:nth-child(6)').text(response.data.remark); // Assuming 'remark' is the status column
                 row.find('td:nth-child(7)').html(
                    response.data.defective_status == 1
                        ? '<a class="me-2 p-2 btn btn-danger" href="javascript:void(0);" data-bs-toggle="modal"> Defective</a>'
                        : `<a class="me-2 p-2 btn btn-warning change-status-btn" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#change-status" data-id="${itemId}"> Make Defective</a>`
                );
               
                $('#change-status').modal('hide');
               // $('#roll_table').load(location.href + ' #roll_table');
               // alert('Status updated successfully!');
               
            } else {
                alert(2);
                // Handle error case
                alert('Error updating the status');
            }
        },
        error: function (xhr, status, error) {
          
                alert('An error occurred while updating the status.');
            
        }
    });
});

function calculateAmount() {
        let rolls = parseFloat($('#rolls').val()) || 0;
        let quantity = parseFloat($('#quantity').val()) || 0;
        let rate = parseFloat($('#rate').val()) || 0;
        let amount = 0;

        // Calculation based on conditions
        if (rolls === 0) {
            amount = quantity * rate;
        } else if (quantity === 0) {
            amount = rolls * rate;
        } else if (rate === 0) {
            amount = rolls * quantity;
        } else {
            amount = rolls * quantity * rate;
        }

        // Set amount with 2 decimal places
        $('#amount').val(amount.toFixed(2));
    }

    // Trigger calculation on input change
    $('#rolls, #quantity, #rate').on('input', function() {
        calculateAmount();
    });


    $(document).on('change', '.uom', function () {
    var unitId = $(this).val(); 
    
    var row = $(this).closest('tr'); 
    var rate =$('#rate').val()  || 0;
    var quantity = $('#quantity').val() || 0;
    var rolls = $('#rolls').val() || 0;
    
   
        $.ajax({
            url: '{{ route("convertunit_inward") }}', 
            type: 'GET',
            data: { id: unitId, rate: rate, quantity: quantity, rolls: rolls },
            success: function (response) {
                console.log(response);
               //exit();
                if (response.unit_name === 'sqft') {
                    // Restore previous values
                    $('#rate').val(response.rate.toFixed(2));
                    $('#quantity').val(response.quantity);
                } else {
                    // Convert and update values
                    $('#rate').val(response.rate.toFixed(2));
                    $('#quantity').val(response.quantity);
                }

                $('#rolls').val(response.no_of_roll);
                var grossTotal = response.quantity * response.rate * response.no_of_roll;
                $('#amount').val(grossTotal.toFixed(2));

            },
            error: function (xhr) {
                console.error("Error fetching unit details: ", xhr.responseText);
            }
        });
    
});







</script>