@extends('adminlayout.admin')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="nk-block-head nk-block-head-sm">
                <div class="nk-block-between g-3">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">Product Details</h3>
                        @if(Session::has('message'))
                            <p class="text-info">
                                {{ Session::get('message') }}
                            </p>
                        @endif
                        @if($errors->any())
                        <p class="text-danger">
                            {{ implode('', $errors->all(':message')) }}
                        </p>
                        @endif
                    </div>
                    <div class="nk-block-head-content">
                        <a href="{{ url()->previous() }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                        <a href="{{ url()->previous() }}" class="btn btn-icon btn-outline-light bg-white d-inline-flex d-sm-none"><em class="icon ni ni-arrow-left"></em></a>
                    </div>
                </div>
            </div><!-- .nk-block-head -->
            <div class="nk-block">
			  
                <div class="card card-bordered">
                    <div class="card-aside-wrap">
                        <div class="card-content">
                            <div class="card-inner">
							 <div class="row">
							
							    <div class="col-md-12">
								  <div class="row">
									  <div class="col-md-6">
									  @php						
										  $gallery_image = json_decode($product->gallery_image);										  
										@endphp 
										  <div class="bigimg">
									        <div id='lens'></div>
											<div id='slideshow-items-container'>

											  <img class='slideshow-items active' height="300" src="{{ url($product->image) }}">
											  @if($gallery_image)
											   @foreach($gallery_image as $img)
												  <img class='slideshow-items' height="300" src='{{url($img)}}'>
												@endforeach 
												@endif
												</div>
											<div id='result'></div>
											</div>
											<div class='row'>
											  <img class='slideshow-thumbnails active' src="{{ url($product->image) }}">
											   @if($gallery_image)
											   @foreach($gallery_image as $img)
											  <img class='slideshow-thumbnails' src='{{url($img)}}'>
											  @endforeach 
											  @endif
											 
											</div>
									  </div>
							  
							  <div class="col-md-6">
                                <div class="nk-block">
                                    
                                    <div class="profile-ud-list">
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Product Name</span>
                                                <span class="profile-ud-value">{{ $product->name }}</span>
                                            </div>
                                        </div>
									   
                                     @if($product->category_id==1)	
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Laptop No.</span>
                                                <span class="profile-ud-value">{{$product->laptop_no}}</span>
                                            </div>
                                        </div>
									@endif	
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Brand</span>
                                                <span class="profile-ud-value">{{$product->brand}}</span>
                                            </div>
                                        </div>
									 @if($product->category_id==1)	
                                       <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Processor</span>
                                                <span class="profile-ud-value">{{$product->processor}}</span>
                                            </div>
                                        </div>
                                      
                                      <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Generation</span>
                                                <span class="profile-ud-value">{{$product->generation}}</span>
                                            </div>
                                        </div>
                                      @endif
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Ram</span>
                                                <span class="profile-ud-value">{{$product->ram}}</span>
                                            </div>
                                        </div>
                                        <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Storage</span>
                                                <span class="profile-ud-value">{{$product->internal_storage}}</span>
                                            </div>
                                       </div>
									   @if($product->category_id==1)
									   <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Graphics</span>
                                                <span class="profile-ud-value">{{$product->graphics}}</span>
                                            </div>
                                       </div>
									  @endif 
									    <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Screen Size</span>
                                                <span class="profile-ud-value">{{$product->screen_size}}</span>
                                            </div>
                                       </div>
									   
									    <div class="profile-ud-item">
                                            <div class="profile-ud wider">
                                                <span class="profile-ud-label">Price</span>
                                                <span class="profile-ud-value">{{$product->price}} Rs</span>
                                            </div>
                                        </div>
                                     
									   
                                     
                                    </div><!-- .profile-ud-list -->
                                </div><!-- .nk-block -->
								
                                <div class="nk-block">
                                    <div class="nk-block-head nk-block-head-line">
                                        <h5 class="title overline-title text-base">Description</h5>
                                    </div><!-- .nk-block-head -->
                                    <div class="bq-note">
                                        <div class="bq-note-item">
                                            <div class="bq-note-text">
                                                <p>{{ $product->description }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
									<div class="nk-block">
									  <div class="qty-sec">
                                            <div class="profile-ud">
                                                <span style="margin-right: 10px;"><strong>Qunatity</strong></span>
                                                <span class="profile-ud-value">
												<select onchange="qtyHandler(this.value)">
												@for($i=1;$i<=10; $i++)
													<option value="{{$i}}">{{$i}}</option>													
												@endfor	
												</select>
									          </span>
                                            </div>
                                        </div>
									
									 <div class="qty-sec">
                                            <div class="profile-ud">
                                                <span style="margin-right: 10px;"><strong>Total Price:</strong></span>
                                                <span class="profile-ud-value totalprice">{{$product->price}} Rs</span>
                                            </div>
                                      </div>
									
										<ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
										
											<li  style="width: 100%;">
											<button type="submit" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#apply-service"  style="width: 100%;display: flex;    justify-content: center;">Buy Now</button>
											</li>
											
										</ul>
									</div>
								</div>
                               </div>
                                <div class="nk-divider divider md"></div>
								
								</div>
									
								</div><!-- .row -->
                            </div><!-- .card-inner -->
                        </div><!-- .card-content -->
                    </div><!-- .card-aside-wrap -->
                </div><!-- .card -->
           
		     
		     
		   </div><!-- .nk-block -->
			
		
        </div>
    </div>
</div>





<div class="modal fade" role="dialog" id="apply-service">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <a href="#" class="close" data-dismiss="modal"><em class="icon ni ni-cross-sm"></em></a>
            <div class="modal-body modal-body-lg">
                <h5 class="title">Delivery Address</h5>
               
                <div class="tab-content">
                    <div class="tab-pane active" id="personal-document">
                        <form action="{{ route('aply_product_order') }}" method="post" enctype="multipart/form-data">
												@csrf
												<input type="hidden" name="id" value="{{ $product->id }}">
												<input type="hidden" name="qty" id="qty"  value="1">
												
												<div class="row gy-4">
												  <div class="col-sm-12" style="display:none;">
														<div class="form-group">															
															<div class="form-control-wrap">
																<input type="text" name="search" id="search" placeholder="Search by mobile and email " class="form-control" value="" onkeyup="searchCustomer()">
																
															</div>
															<div id="searchlist" style="display:none;"></div>
														</div>
													</div>
													<div class="col-sm-12">
														<div class="form-group">
															<label class="form-label" for="customer_name">Customer Name</label>
															<div class="form-control-wrap">
																<input type="text" name="customer_name" id="customer_name" class="form-control @error('customer_name') error @enderror" value="{{ old('customer_name') }}" required>
																@error('customer_name')
																<p class="text-danger">{{ $message }}</p>
																@enderror
															</div>
														</div>
													</div>
													<div class="col-sm-12">
														<div class="form-group">
															<label class="form-label" for="customer_mobile">Customer Mobile</label>
															<div class="form-control-wrap">
																<input type="text" name="customer_mobile" id="customer_mobile" class="form-control @error('customer_mobile') error @enderror" value="{{ old('customer_mobile') }}" required>
																@error('customer_mobile')
																<p class="text-danger">{{ $message }}</p>
																@enderror
															</div>
														</div>
													</div>
													<div class="col-sm-12">
														<div class="form-group">
															<label class="form-label" for="customer_email">Customer Email</label>
															<div class="form-control-wrap">
																<input type="text" name="customer_email"  id="customer_email" class="form-control @error('customer_email') error @enderror" value="{{ old('customer_email') }}" required>
																@error('customer_email')
																<p class="text-danger">{{ $message }}</p>
																@enderror
															</div>
														</div>
													</div>
													
													<div class="col-sm-12">
														<div class="form-group">
															<label class="form-label" for="customer_address">Address</label>
															<div class="form-control-wrap">
																<textarea name="customer_address"  id="customer_address" class="form-control" required></textarea>
																@error('customer_address')
																<p class="text-danger">{{ $message }}</p>
																@enderror
															</div>
														</div>
													</div>
													
                                                   <div class="col-sm-12">
														<div class="form-group">
															<label class="form-label" for="state">State</label>
															<div class="form-control-wrap">
															
																<select  name="state"  id="state" class="form-control"  required>
																 <option value=""> Select </option>
																 @foreach($states as $state)
																 <option value="{{$state->id}}">{{$state->name}}</option>
																 @endforeach
																</select>
																@error('state')
																<p class="text-danger">{{ $message }}</p>
																@enderror
															</div>
														</div>
													</div>
													 <div class="col-sm-12">
														<div class="form-group">
															<label class="form-label" for="customer_pin_code">Pin Code</label>
															<div class="form-control-wrap">
																<input type="text" name="customer_pin_code"  id="customer_pin_code" class="form-control @error('customer_pin_code') error @enderror" value="{{ old('customer_pin_code') }}" required>
																@error('customer_pin_code')
																<p class="text-danger">{{ $message }}</p>
																@enderror
															</div>
														</div>
													</div>
													
													<h5 class="title">Payment Option</h5>
													 <div class="col-sm-12">
														 <div class="form-check">
														  <input class="form-check-input" type="radio" value="wallet" name="payment" id="walletoption">
														  <label class="form-check-label" for="walletoption">
															Wallet (Rs {{Auth::user()->wallet}})
														  </label>
														</div>
														<div class="form-check">
														  <input class="form-check-input" type="radio" value="online" name="payment"  id="onlineoption" checked>
														  <label class="form-check-label" for="onlineoption">
															Online
														  </label>
														</div>
													 </div>
													<div class="col-12">
														<ul class="align-center flex-wrap flex-sm-nowrap gx-4 gy-2">
															<li  style="width: 100%;">
															<button type="submit" class="btn btn-lg btn-primary" style="width: 100%;display: flex;    justify-content: center;">Submit</button>
															</li>
															
														</ul>
													</div>
												</div>
											</form>
                    </div><!-- .tab-pane -->
                    
                </div><!-- .tab-content -->
				
            </div><!-- .modal-body -->
        </div><!-- .modal-content -->
    </div><!-- .modal-dialog -->
</div>



<style>
.profile-ud-item{
	width: auto;
}
.profile-ud-value{	
    min-width: 111px;
}
#searchlist{
	background: #fff;
    padding: 10px;
    text-align: center;
    position: absolute;
    z-index: 999;
    width: 100%;
    border: 1px solid;
}
.new-type{
    position: absolute;
    height: 50px;
    width: 50px;
    background: #00ff80;
    color: #fff;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    top: -48px;
}
.old-type{
    position: absolute;
    height: 50px;
    width: 50px;
    background: #ef3e06;;
    color: #fff;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    top: -48px;
}

.slideshow-items {
  width: 500px;
}
.slideshow-thumbnails {
  width: 70px;
}
#slideshow-items-container { display: inline-block; position: relative; height: 292px;}

#lens { background-color: rgba( 233, 233, 233, 0.4 ) }
#lens, #result { position: absolute; display: none; z-index: 1; }
.slideshow-items { display: none; }
.slideshow-items.active { display: block; }
.slideshow-thumbnails { opacity: 0.5; }
.slideshow-thumbnails.active { opacity: 1; }
#lens, .slideshow-items, .slideshow-thumbnails, #result { border: solid var(--light-grey-2) 1px; }
.bigimg{
	margin-bottom: 5%;
}
.qty-sec {
    margin-bottom: 20px;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var itrlist=[];
var finalAmount = 0;
    $(document).ready(function() {
        $("body").on("click", ".add-more", function() {
            var html = $(".after-add-more").first().clone();

            //  $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>");

            $(html).find(".change").html("<br><br> <a class='btn btn-danger remove'>- Remove</a>");


            $(".after-add-more").last().after(html);



        });

        $("body").on("click", ".remove", function() {
            $(this).parents(".after-add-more").remove();
        });
    });
  
  function qtyHandler(qty)
  {
	  var baseprice = "";
	  var totalprice = baseprice * qty;	  
	  $('.totalprice').html(totalprice+' Rs');
	  $('#qty').val(qty);
	 
  }
   function itrchangeHandler(id)
   {	  
	   $('#finalprice').html(itrlist[id]);
	   finalAmount = itrlist[id];
	   addonschangeHandler();
   }
   function addonschangeHandler()
   {
	   var addonsamount=0;
	   $('.add-ons').each(function( index ){
		   
		   if($(this).is(':checked'))
		   {			   
			   addonsamount += parseInt($(this).attr('price'));
		   }
		   
	   });
	   var totalmount = finalAmount+addonsamount;
	   $('#finalprice').html(totalmount);
   }
    function itrchange(id) {
        let type = 'itr';
		itrlist = [];
		//$('.add-ons-container').hide();
		$('#finalprice').html('0');
		$('.add-ons').prop('checked', false);
        $.ajax({
            url: "get_returnfile_subcategory/"+id+"/"+type,
            dataType: 'json',
            success: function(response) {
                console.log(response);
                let html='<option value="">Select ITR</option>';
                $.each(response, function(key, value) {
                    html += '<option value="'+value.id+'">'+value.name+' [ '+value.price+' &#8377; ]</option>'; 
					itrlist[value.id] = value.price;
                });
                $('#itr').html(html);
				$('.add-ons-container').show();
            }
        });
    }
    
    function gstchange(id) {
        let type = 'gst';
        $.ajax({
            url: "get_returnfile_subcategory/"+id+"/"+type,
            dataType: 'json',
            success: function(response) {
            	console.log(response);
                let html='<option value="">Select Return Month</option>';
                $.each(response, function(key, value) {
                    html += '<option value="'+value.id+'">'+value.name+'</option>'; 
                });
                $('#return_month').html(html);
            }
        });
    }
    
    function tdschange(id) {
        let type = 'tds';
        $.ajax({
            url: "get_returnfile_subcategory/"+id+"/"+type,
            dataType: 'json',
            success: function(response) {
            	console.log(response);
                let html='<option value="">Select TDS Financial Year</option>';
                $.each(response, function(key, value) {
                    html += '<option value="'+value.id+'">'+value.name+'</option>'; 
                });
                $('#tds_financial_year').html(html);
            }
        });
    }
	function searchCustomer() {
        var search = $('#search').val();
		if(search.length >2 )
		{
		
			$.ajax({
				url: "get-customer-detail/"+search,
				dataType: 'json',
				success: function(response) {
					console.log(response);
					let html='<ul>';
					if(response.customers.length)
					{
						$.each(response.customers, function(key, value) {
							let cname = "'"+value.c_name+"'";
							let cmobile = "'"+value.c_mobile+"'";
							let cemail = "'"+value.c_email+"'";
							
							html += '<li><a href="javascript:void(0)" onclick="setCustomer('+cname+','+cmobile+','+cemail+')">'+value.c_name+'('+value.c_mobile+')'+'</a></li>'; 
						});
				     }else{
						 html += '<li>No Record Found</li>';
					 }
					html +='</ul>';
					$('#searchlist').show();
					$('#searchlist').html(html);
				}
			});
		}else{
			$('#searchlist').hide();
			$('#searchlist').html('');
		}
    }
	function setCustomer(name, mobile, email)
	{
		$('#customer_name').val(name);
		$('#customer_mobile').val(mobile);
		$('#customer_email').val(email);
		
		$('#searchlist').hide();
	}
	
	$(document).ready(function() {

  $('.slideshow-thumbnails').click(function() { changeSlide($(this)); });

  $(document).mousemove(function(e) {
    var x = e.clientX; var y = e.clientY;
    
    var x = e.clientX; var y = e.clientY;

    var imgx1 = $('.slideshow-items.active').offset().left;
    var imgx2 = $('.slideshow-items.active').outerWidth() + imgx1;
    var imgy1 = $('.slideshow-items.active').offset().top;
    var imgy2 = $('.slideshow-items.active').outerHeight() + imgy1;

    if ( x > imgx1 && x < imgx2 && y > imgy1 && y < imgy2 ) {
      $('#lens').show(); $('#result').show();
      imageZoom( $('.slideshow-items.active'), $('#result'), $('#lens') );
    } else {
      $('#lens').hide(); $('#result').hide();
    }

  });
  
});

function imageZoom( img, result, lens ) {

  result.width( img.innerWidth() ); result.height( img.innerHeight() );
  lens.width( img.innerWidth() / 2 ); lens.height( img.innerHeight() / 2 );

  result.offset({ top: img.offset().top, left: img.offset().left + img.outerWidth() + 10 });

  var cx = img.innerWidth() / lens.innerWidth(); var cy = img.innerHeight() / lens.innerHeight();

  result.css('backgroundImage', 'url(' + img.attr('src') + ')');
  result.css('backgroundSize', img.width() * cx + 'px ' + img.height() * cy + 'px');

  lens.mousemove(function(e) { moveLens(e); });
  img.mousemove(function(e) { moveLens(e); });
  lens.on('touchmove', function() { moveLens(); })
  img.on('touchmove', function() { moveLens(); })

  function moveLens(e) {
    var x = e.clientX - lens.outerWidth() / 2;
    var y = e.clientY - lens.outerHeight() / 2;
    if ( x > img.outerWidth() + img.offset().left - lens.outerWidth() ) { x = img.outerWidth() + img.offset().left - lens.outerWidth(); }
    if ( x < img.offset().left ) { x = img.offset().left; }
    if ( y > img.outerHeight() + img.offset().top - lens.outerHeight() ) { y = img.outerHeight() + img.offset().top - lens.outerHeight(); }
    if ( y < img.offset().top ) { y = img.offset().top; }
    lens.offset({ top: y, left: x });
    result.css('backgroundPosition', '-' + ( x - img.offset().left ) * cx  + 'px -' + ( y - img.offset().top ) * cy + 'px');
  }
}


function changeSlide(elm) {
  $('.slideshow-items').removeClass('active');
  $('.slideshow-items').eq( elm.index() ).addClass('active');
  $('.slideshow-thumbnails').removeClass('active');
  $('.slideshow-thumbnails').eq( elm.index() ).addClass('active');
}

</script>

@endsection