@extends('layouts.app')
@section('content')
<form class="form" method="POST" role="post-data" action="/package/update/{{$package->id}}" redirect="/package">
	<section class="content mb-5">
		<div class="container-fluid">
			<div class="row titlepad publsih-sticky">
				<div class="col-md-12">
					<div class="mt-3 mb-3">
						<div class="dashbed-border-bottom"></div>
					</div>
					<div class="row">
						<div class="col-sm-8">
							<h4>{{__("labels.package_edit_heading")}}</h4>
						</div>
						<div class="col-md-4 text-sm-right mt-2">
							<button type="button" class="btn-md px-3 py-2 btn-primary" data-request="ajax-submit" data-target="[role=post-data]">
								<i class="fa fa-check-square-o"></i> {{__("buttons.publish")}}
							</button>
							<a href="{{route('masters.package.index')}}" class="btn-md px-3 py-2 btn-secondary">
								<i class="fa fa-chevron-circle-left"></i> {{__("buttons.cancel")}}</a>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="tabData mt-4">
						<h6>{{__("labels.package_name")}}</h6>
						<div class="mt-2 mb-2">
							<div class="dashbed-border-bottom"></div>
						</div>
						<div class="pb-4">
							<div class="row">
								<div class="col-md-4">
									<div class="form-group">
										<label>{{__("labels.name")}}<span class="text-red">*</span></label>
										<input type="text" class="form-control"
											name="name" placeholder="{{__('placeholders.name')}}"
											value="{{ $package->name }}"/>
									</div>
								</div>
								<div class="col-md-4">
                                	<div class="form-group">
										<label>{{__("labels.select_status")}}<span class="text-red">*</span></label>
											<select class="form-control select2" name="status">
												@foreach ($statuses as $status)
													<option value="{{ $status }}">{{ucfirst($status)}}</option>
												@endforeach
											</select>
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label>{{__("labels.weekly_price")}}<span class="text-red">*</span></label>
										<input type="number" class="form-control" name="weekly_price" placeholder="{{__('placeholders.weekly_price')}}"
											value="{{ $package->weekly_price ?? '' }}"/>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-4">
									<div class="form-group">
										<label>{{__("labels.fortnightly_price")}}<span class="text-red">*</span></label>
										<input type="number" class="form-control" name="fortnightly_price" placeholder="{{__('placeholders.fortnightly_price')}}" value="{{ $package->fortnightly_price ?? '' }}"/>
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label>{{__("labels.monthly_price")}}<span class="text-red">*</span></label>
										<input type="number" class="form-control" name="monthly_price" placeholder="{{__('placeholders.monthly_price')}}" value="{{ $package->monthly_price ?? '' }}"/>
									</div>
								</div>	
							</div>
						</div>
						<button type="button" class="pull-right btn-md px-3 py-2 btn-primary" id="addMoreBtn">+Add More</button>
						<h6 class="mt-3">{{__("Features Add/Edit")}}</h6>
						<div class="mt-2 mb-2">
							<div class="dashbed-border-bottom"></div>
						</div>
						<div class="pb-4" id="featureRowContainer">
							@forelse($package->features as $key => $packageFeature)
							@php $_key =  $key + 1; @endphp
							<div class="row">
								<div class="col-md-4">
									<div class="form-group">
										<label>{{__("Feature Name")}}<span class="text-red">*</span></label>
										<select readonly class="form-control select2" name="data[{{$_key}}][feature_id]">
											<option value="{{$packageFeature->feature->id}}">{{$packageFeature->feature->feature_name}}</option>
										</select>
									</div>
								</div>
								@php
								$options = \App\Helpers\ConstantHelper::FEATURE_OPTIONS;
								@endphp
								<div class="col-md-4">
									<div class="form-group">
										<label>{{__("Quantity")}} ({{ucwords(str_replace('_', ' ', $packageFeature->feature->unit_measurement))}})<span class="text-red">*</span></label>
										<select class="form-control select2" name="data[{{$_key}}][qty]">
											@foreach($options[$packageFeature->feature->unit_measurement] as $qty)
											@if($qty)
												<option value="{{$qty}}" {{$packageFeature->qty == $qty ? 'selected' : ''}}>{{$qty}}</option>
											@endif
											@endforeach
										</select>
									</div>
								</div>
								<div class="col-md-4">
								  	<div class="form-group mt-2">
										<button type="button" class="btn-md btn-danger mt-4" data-url="/package/feature-remove/{{$packageFeature->id}}" data-request="remove">X</button>
									</div>
								</div>
							</div>
							@empty
							No feature assigned yet!
							@endforelse
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</form>

{{-- Add more feature modal --}}
<div class="modal fade" id="addFeatureModal" tabindex="-1" role="dialog" aria-labelledby="addFeatureModal"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-light modalPad">
            <form class="needs-validation" novalidate>
                <div class="modal-header position-relative border-0">
                    <div class="">
                        <button type="button" class="close-btn" data-dismiss="modal" aria-label="Close">
                            <img src="{{ asset('assets/img/close.svg') }}" />
                        </button>
                        <div class="">
                            <h5>Add Feature</h5>
                            {{-- <p class="mb-0">Fill the below fields</p> --}}
                        </div>
                    </div>
                </div>
                <div class="modal-body pt-0">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Select Feature</label>
								<select class="form-control select2" name="data[1][feature_id]">

								</select>
                            </div>
                        </div>
                        <div class="col-md-12 mt-3">
                            <button type="button" class="btn btn-primary" id="addFeatureBtn">Add feature</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Add more feature modal --}}
@endsection
@section('scripts')
<script type="text/javascript">
	$(document).on('click','#addMoreBtn', (e) => {
		const rowCount = $("#featureRowContainer .row").length || 0;
		let featureIds = [];
		if(rowCount) {
			$("#featureRowContainer .row").find('[name*=feature_id]').each((index, item) => {
				featureIds.push(Number($(item).val()));
			});
		}
		const openModalUrl = '{{route('masters.package.feature.modal', $package->id)}}' + '?row_count=' + rowCount + '&featureIds=' + featureIds.join(',');
		fetch(openModalUrl).then((response) => {
			return response.json().then((data) => {
				if(data.status === 200) {
					let options = '';
					data.data.paidFeatures.forEach((item, index) => {
						options += `<option value='${item.id}'>${item.feature_name}</option>`;
					});
					$("#addFeatureModal select").empty().append(options);
					setTimeout(() => {
						$('#addFeatureModal').modal('show');
					}, 0);
				} else {
					alert(data.message);
				}
			});
		});
	});

	$(document).on('click', '#addFeatureBtn', (e) => {
		const featureId = $(e.target).closest('.row').find('select').val();
		const rowCount = $("#featureRowContainer .row").length || 0;
		const addFeatureRowUrl = '{{route('masters.package.add.feature.row', $package->id)}}'+'?feature_id='+featureId+'&row_count='+rowCount;
		fetch(addFeatureRowUrl).then((response) => {
			return response.json().then((data) => {
				if(data.status === 200) {
					if($("#featureRowContainer .row").length) {
						$("#featureRowContainer .row:last").after(data.data.html);
					} else {
						$("#featureRowContainer").empty().append(data.data.html);
					}
					$('#addFeatureModal').modal('hide');
				}
			});
		});
	});

	$(document).on('click','#deleteFeatureBtn', (e) => {
		$(e.target).closest('.row').remove();
		const rowCount = $("#featureRowContainer .row").length || 0;
		if(!rowCount) {
			$("#featureRowContainer").append('No feature assigned yet!');
		}
	});
</script>
@endsection