@extends('admin.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Edit Package</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.package')}}">Package</a></li>
					<li class="breadcrumb-item active" aria-current="page">Edit Package</li>
				</ol>

			</div>
			<div class="row ">
				
				<div class="col-lg-12">
					@if(Session::has('success'))

						<div class="alert alert-primary">
							<p>{{ Session::get('success') }}</p>
						</div>

					@endif

					@if(Session::has('errors'))

						<div class="alert alert-danger">
							<ul>
					            @foreach ($errors->all() as $error)
					                <li>{{ $error }}</li>
					            @endforeach
					        </ul>
						</div>

					@endif

					<form class="card" method="post" action="{{ route('admin.packageUpdate', base64_encode($packagedetails->id))}}" onsubmit="return clientEdit()" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Edit Package</h3>
						</div>

						<div class="card-body">
							<div class="row">

								<div class="col-md-12" style="border: 1px solid #858d97; border-radius: 5px"> 
									<div class="row">
										@if($languages)
											@foreach($languages as $key => $language)
												<div class="col-sm-6 col-md-6">
													<div class="form-group">
														<label class="form-label">Name [{{$language->name}}]</label>
														<input type="text" class="form-control" name="name[]" id="name_{{$language->id}}" value="@if(isset($packagedetailsValues[$key])){{ $packagedetailsValues[$key]->name }}@endif">
													</div>
												</div>
											@endforeach
										@endif
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Duration</label>
										<select class="form-control" name="duration" id="duration">
											<option value="">--Select Duration--</option>
											<option value="1" @if($packagedetails->duration == 1){{'selected'}}@endif>Weekly</option>
											<option value="2" @if($packagedetails->duration == 2){{'selected'}}@endif>Monthly</option>
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Price</label>
										<input type="text" class="form-control" name="price" id="price" value="{{$packagedetails->price}}">
									</div>
								</div>

								

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Package Image</label>
										<div class="fileupload-new" style="width: 200px;">
                                       	@if($packagedetails->image == NULL)
											<img src="{{ asset('storage/packages/default_package.png') }}" class="header-brand-img">
										@else
											<img src="{{ asset('storage/packages/'.$packagedetails->image) }}" class="header-brand-img">
										@endif
                                    	</div>
                                    	<br>
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="package_pic" id="package_pic">
											<label class="custom-file-label">Choose file</label>
										</div>
									</div>
								</div>
								
							</div>
						</div>
						<div class="card-footer text-center">
							<span><p id="editerrorcheck" style="color: red; display: none;"></p></span>
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">
	
	function clientEdit() {		
		var name   = $('#name').val();
		@if($languages)
			@foreach($languages as $key => $language)
				var name   = $('#name_{{$language->id}}').val();
				if(name == ''){
					$('#editerrorcheck').show();
					$('#editerrorcheck').html('** Please Fill All Name Field');
					setTimeout(function(){
						  $('#editerrorcheck').hide();
						}, 2000);

					return false;
				}
			@endforeach
		@endif
		var duration   = $('#duration').val();
		var price   = $('#price').val();
		if(duration == ''){
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Duration Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}  else if(price == '' || !$.isNumeric(price)){
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Price Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);

			return false;
		}
	}
 

</script>

<script>
$(document).ready(function () {
    $('#package_pic').on('change', function () {
        var reader = new FileReader();
        reader.onload = function (event) {
            $('.fileupload-new').html('<img src="'+event.target.result+'">')        
        }
        console.log(this.files[0]);
        reader.readAsDataURL(this.files[0]);        
	});
});                          
</script>
@endsection