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

<style>
.select2-container--default .select2-selection--single {
    
    border: 1px solid #e9edf6 !important;
    height:40px !important; 
   
}
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 20px !important; 
    background-color: transparent !important;
    border-left: 1px solid #aaa !important; 
}

.select2-container .select2-selection__arrow b {
  
    border-width: 5px 5px 0 5px !important; 
    border-style: solid !important;
    display: inline-block !important;
    margin-top: 5px !important;
    vertical-align: middle !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow 
{
	display: none !important;
}
.select2-selection__clear{
    display: none !important;
    /* color:#aaa; */
}

</style>


		<!-- /Header -->
		@include('layouts.sidebar')

		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>New Inward</h4>
						
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="{{ route('inwards')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back To Inwards</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>
				<!-- /add -->
				@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
			
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="accordionExample">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"  aria-controls="collapseOne">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Inward Information</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
									<div class="accordion-body">
										<div class="row">
                                            <div class="col-lg-1 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Roll No</label>
													<input type="text"  name="roll_no"  id="roll_no" value="{{ $roll ? $roll->roll_no + 1 : 1}}" class="form-control" required  readonly onkeypress="return event.charCode >= 48 && event.charCode <= 57">
												</div>
											</div>
                                            <div class="col-lg-3 col-sm-6 col-12">
                                                <div class="mb-3 add-product">
                                                    <label class="form-label">Inward No</label>
                                                    <input type="text"  name="inward_no" id="inward_no" class="form-control" required  value="{{$invno}}" readonly>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-sm-6 col-12">
                                                <div class="mb-3 add-product">
                                                    <label class="form-label">Inward Date</label>
                                                    <input type="date"  name="inward_date" id="inward_date" value="{{ date('Y-m-d') }}" class="form-control" required  placeholder="Enter Inward Date">
                                                </div>
                                            </div>
                                            <div class="col-lg-3 col-sm-6 col-12">
                                                <div class="mb-3 add-product">
                                                   
                                                    <div class="add-newplus">
															<label class="form-label">PO No</label>
															<a href="{{ route('add_purchase_order')}}"><i data-feather="plus-circle" class="plus-down-add"></i><span>Add
																New</span></a>
														</div>
                                                    <select class="form-control" name="po_no" id="po_no" required>
                                                        <option>Select PO No</option>
                                                        @foreach($purchase_orders as $row)
                                                            @php
                                                                $statusText = '';
                                                                if ($row->inward_status == 0) {
                                                                    $statusText = '🔴 Pending';
                                                                } elseif ($row->inward_status == 2) {
                                                                    $statusText = '🟢 Partial Inwarded';
                                                                }
                                                            @endphp
                                                            <option value="{{ route('view-purchase-order-details', ['id' => $row->id]) }}">
                                                                {{ $row->po_number }} ({{ $statusText }})
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
						


<!-- JS for vanillaSelectBox -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> 
<script>




    $(document).ready(function() {
      
        $('#po_no').on('change', function () {
          var selectedUrl = $(this).val();
          if (selectedUrl) {
         // Retrieve the values from the input fields
         var rollNo = $('#roll_no').val();
         var inwardNo = $('#inward_no').val();
         var inwardDate = $('#inward_date').val();

         // Append the parameters to the URL
         var urlWithParams = selectedUrl + 
            '?roll_no=' + encodeURIComponent(rollNo) +
            '&inward_no=' + encodeURIComponent(inwardNo) +
            '&inward_date=' + encodeURIComponent(inwardDate);

         // Redirect to the new URL
         window.location.href = urlWithParams;
       }
   });


       


         });


   


    


</script>

@include('layouts.footer')