@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 Purchase </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>
											<th class="no-sort">Action</th>
										</tr>
									</thead>
									<tbody>
                                        @php $i=1;@endphp
									
                                        @foreach($po_details['items'] as $item)
										@php $ds=DB::table('purchase_orders')->where('id',$item->purchase_order_id)->first();
                                        @endphp 
										@php /*$datas=DB::table('inventory')->where('po_number',$ds->id)->first();*/
										
										 $datas=DB::table('inventory')->where('po_item_id',$item->id)->first(); @endphp
										
										
										<tr>	
											<td>{{ $i++}}</td>
											<td>@if($item->inward_status == 1)<a href="javascript:void(0);" class="expand-row" data-id="{{ $datas->id }}">{{ $item->varient_code }} - {{ $item->varient_name }}</a>
											@else {{ $item->varient_code }} - {{ $item->varient_name }} @endif
											</td>
											<td>{{ $item->no_of_rolls}}</td>
											<td>{{ $item->quantity}}</td>
                                                                                        <td>{{ $item->rate}}</td>
											<td>{{ $item->uom}}</td>
											<td>{{ $item->total}}</td>
											
											<td class="action-table-data">
												<div class="edit-delete-action">
													@if($item->inward_status == 0)
													<a class="me-2 p-2 btn btn-info" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-warehouse" data-po_id="{{ $item->purchase_order_id}}" data-id="{{ $item->id}}" 
                                                        data-rolls="{{ $item->no_of_rolls }}" 
                                                        data-quantity="{{ $item->quantity }}" 
                                                        data-rate="{{ $item->rate }}" 
                                                        data-unit="{{ $item->unit_id }}" 
                                                        data-total="{{ $item->total }}"> Recieve</a>
                                                    @else
                                                    @php 
                                                    $estipo = DB::table('estimated_po')->where('po_detail_id', $item->purchase_order_id)->first();
                                                @endphp
                                                
                                                @if($estipo)
                                                    <a class="me-2 p-2 btn btn-success" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#show-warehouse"
                                                        data-po_id="{{ $estipo->po_detail_id }}"
                                                        data-inward-status="{{ $item->inward_status }}"
                                                        data-rolls="{{ $estipo->no_of_rolls ?? '' }}" 
                                                        data-quantity="{{ $estipo->quantity ?? '' }}" 
                                                        data-rate="{{ $estipo->rate ?? '' }}" 
                                                        data-unit="{{ $estipo->unit ?? '' }}" 
                                                        data-warehouse_id="{{ $estipo->warehouse_id ?? '' }}" 
                                                        data-total="{{ $estipo->amount ?? '' }}"
                                                    > Recieved</a>
                                                    @endif
                                                    @endif
												</div>	
											</td>
										</tr>
										@endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
    </div>
</div>   

@include('layouts.footer')




<div class="modal fade" id="add-warehouse">
    <div class="modal-dialog modal-dialog-centered modal-md 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>Select Warehouse</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 action="{{ route('store_warehouse_ajax') }}" enctype="multipart/form-data" method="POST">
                            @csrf
                            <input type="hidden" id="itemId"      name="item_id" value="">
                            <input type="hidden" id="po_id"       name="po_id" value="">
							<input type="hidden" id="roll_no"     name="roll_no" value="{{ $inwards['roll_no']}}">
							<input type="hidden" id="inward_no"   name="inward_no" value="{{ $inwards['inward_no'] }}">
							<input type="hidden" id="inward_date" name="inward_date" value="{{ $inwards['inward_date'] }}">
                            <div class="mb-3">
                                <label class="form-label">Warehouse</label>
                                <select name="warehouse" class="form-control" required>
                                    <option value="">Select</option>
                                    @foreach($warehouses as $row)
                                        <option value="{{ $row->id }}">{{ $row->warehouse_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">No of rolls</label>
                                <input type="text"  class="form-control" id="rolls" name="no_of_rolls">

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="text"  class="form-control" id="quantity" name="quantity">

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Rate</label>
                                <input type="text"  class="form-control" id="rate" name="rate">

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Unit</label>
                               
                                <select id="unit" name="unit" class="form-control uom" required>
                                    <option value="">Select</option>
                                    @foreach($units as $row)
                                        <option value="{{ $row->id }}">{{ $row->unit_name }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Amount</label>
                                <input type="text"  class="form-control" id="amount" name="amount" readonly>

                            </div>
                            <div class="modal-footer-btn">
                                <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-submit">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="show-warehouse">
    <div class="modal-dialog modal-dialog-centered modal-md 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>Selected Data</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">
                            <div class="mb-3">
                                <label class="form-label">Warehouse</label>
                                <select name="warehouse" id="warehouse_id" class="form-control" disabled>
                                    @foreach($warehouses as $row)
                                        <option value="{{ $row->id }}">{{ $row->warehouse_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">No of rolls</label>
                                <input type="text"  class="form-control" id="show_rolls" name="no_of_rolls" readonly>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Quantity</label>
                                <input type="text"  class="form-control" id="show_quantity" name="quantity" readonly>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Rate</label>
                                <input type="text"  class="form-control" id="show_rate" name="rate" readonly>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Unit</label>
                               
                                <select id="show_unit" name="unit" class="form-control uom" disabled>
                                  
                                    @foreach($units as $row)
                                        <option value="{{ $row->id }}">{{ $row->unit_name }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="mb-3">
                                <label class="form-label">Amount</label>
                                <input type="text"  class="form-control" id="show_amount" name="amount" readonly>

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


<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', '[data-bs-target="#add-warehouse"]', function () {
    const itemId = $(this).data('id'); 
    const po_id = $(this).data('po_id'); 
    const rolls = $(this).data('rolls');
    const quantity = $(this).data('quantity');
    const rate = $(this).data('rate');
    const unit = $(this).data('unit');
    const total = $(this).data('total');
    $('#po_id').val(po_id);
    $('#itemId').val(itemId);       
    $('#rolls').val(rolls);
    $('#quantity').val(quantity);
    $('#rate').val(rate);
    $('#unit').val(unit);
    $('#amount').val(total);
    
    // Update warehouse selection label (Optional)
    $('#warehouse-label').text(`Unit: ${unit}, Total: ${total}`);
});

$(document).on('click', '[data-bs-target="#show-warehouse"]', function () {
    
    const warehouse_id = $(this).data('warehouse_id'); 
    const po_id = $(this).data('po_id'); 
    const rolls = $(this).data('rolls');
    const quantity = $(this).data('quantity');
    const rate = $(this).data('rate');
    const unit = $(this).data('unit');
    const total = $(this).data('total');
   
    
    $('#warehouse_id').val(warehouse_id);
    $('#show_rolls').val(rolls);
    $('#show_quantity').val(quantity);
    $('#show_rate').val(rate);
    $('#show_unit').val(unit);
    $('#show_amount').val(total);
    
    
});

$(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>Quantity</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>