@extends('layouts/layoutMaster')

@section('title', ' Vertical Layouts - Forms')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
<link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
<style type="text/css">
	.bundle_error{
		color: red;
	}
	.bundle_price_error{
		color: red;
	}
</style>
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/libs/cleavejs/cleave.js')}}"></script>
<script src="{{asset('assets/vendor/libs/cleavejs/cleave-phone.js')}}"></script>
<script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
<script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/form-layouts.js')}}"></script>
<script src="{{asset('assets/js/mycustom.js')}}"></script>
@endsection

@section('content')
<h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span>Assign tariff</h4>
<div class="row">
	<div class="add_btn_wrapper" style="display: none;">
		<button type="button" class="btn btn-primary add_inv_tariff_button" data-bs-toggle="modal" data-bs-target="#add_inv_tariff_modal" style="float:right;">+Add Rate </button>
	</div>
	@foreach($inv as $value)
	<div class="col-md-6 col-lg-4 mb-3">
		<div class="card h-100">
			<img class="card-img-top" src="{{asset('uploads/inventory/'.$value->rc_photo)}}" alt="{{$value->name}}">
			<div class="card-body">
				<h5 class="card-title">{{$value->name}}</h5>
				<p class="card-text">
					{{$value->registration_number}}
				</p>
				<input type="checkbox" name="check_inv_item" class="check_inv_item" value="{{$value->id}}">
			</div>
		</div>
	</div>
	@endforeach
</div>
<div class="modal fade" id="add_inv_tariff_modal" tabindex="-1" aria-hidden="true">
	
	<div class="modal-dialog modal-lg modal-simple modal-add-new-address">

		<div class="modal-content p-3 p-md-5">
			<div class="alert alert-success mb-0 alert-dismissible inv_tariff_alert" role="alert" style="display:none;">
          <h5 class="alert-heading mb-2">Success</h5>
          <p class="mb-0">Inventory tariff assigned successfully</p>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
          </button>
        </div>
			<div class="modal-body">
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				<div class="text-center mb-4">
					<h3 class="address-title mb-2">Add Rate</h3>
					<p class="text-muted address-subtitle">Add rate for these selected inventories</p>
				</div>
				
				<div class="alert alert-danger alert-dismissible bundle_error" role="alert" style="display:none;">
					<span class="bundle_error"></span>
		          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
		          </button>
		        </div>
		        <div class="alert alert-danger alert-dismissible bundle_price_error" role="alert" style="display:none;">
					<span class="bundle_price_error"></span>
		          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
		          </button>
		        </div>
		        <div class="alert alert-danger alert-dismissible package_error" role="alert" style="display:none;">
					<span class="package_error"></span>
		          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
		          </button>
		        </div>
		        <div class="alert alert-danger alert-dismissible rateerror" role="alert" style="display:none;">
					<span class="rateerror"></span>
		          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
		          </button>
		        </div>
				<form id="inventory_tariff_form" class="row g-3" onsubmit="return false">
					<div class="bundle_main_wrapper row">
						<div class="bundle_wrapper row">
							<div class="col-6">
								<label class="form-label" for="modalAddressCountry">Bundle</label>
								<select id="" name="bundle[]" class=" form-select" data-allow-clear="true">
									<option value="">Select</option>
									@foreach($bundle as $value)
									<option value="{{$value->id}}">{{$value->name}}</option>
									@endforeach
								</select>
								
							</div>
							<div class="col-5">
								<label class="form-label" for="modalAddressAddress1">Price</label>
								<input type="text" id="modalAddressAddress1" name="bundle_price[]" class="form-control" placeholder="2000" />
							</div>
							<div class="col-1 bundle_action" style="padding: 20px;">
								<button type="button" class="btn btn-icon btn-primary waves-effect waves-light add-more-bundle">
					              <i class="fab fa-plus mb-2"></i>
					            </button>
							</div>
						</div>
					</div>
					<div class="package_main_wrapper row">
						<div class="package_wrapper row">
							<div class="col-11">
								<label class="form-label" for="modalAddressCountry">Package</label>
								<select id="" name="package[]" class=" form-select" data-allow-clear="true">
									<option value="">Select</option>
									@foreach($package as $value)
									<option value="{{$value->id}}">{{$value->name}}({{$value->factor}})</option>
									@endforeach
								</select>
							</div>
							<div class="col-1 package_action" style="padding: 20px;">
								<button type="button" class="btn btn-icon btn-info waves-effect waves-light add-more-package">
					              <i class="fab fa-plus mb-2"></i>
					            </button>
							</div>
						</div>
					</div>
					<div class="col-12 ">
						<label class="form-label" for="modalAddressAddress1">Hourly Rate</label>
						<input type="text" id="hourly_rate" name="hourly_rate" class="form-control" placeholder="" />
					</div>
					<div class="col-12 text-center">
						<button type="button" class="btn btn-primary me-sm-3 me-1 save_inventory_tariff" >Submit</button>
						<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

@endsection