@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">
			<!-- start page title -->

			<div class="row">
				<div class="col-12">
					<div class="page-title-box">
						<h4 class="page-title">Merchant Profile</h4>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{route('dashboard')}}">Dashboard</a>
							</li>
							<li class="breadcrumb-item">
								<a href="{{route('merchants.index')}}">Merchants</a>
							</li>
							<li class="breadcrumb-item active">
								Merchant Details
							</li>
						</ol>
					</div>
				</div>
			</div>
			<!-- end page title -->
			<!-- end page title -->
			
			<div class="row">

				<div class="col-lg-4 col-xl-4">
					<div class="card-box text-center">
						@if (empty($merchant->logo))
							<img src="{{ asset('images/users/user-3.jpg')}}" class="rounded-circle img-thumbnail" alt="profile-image" >
						@else
							<img src="{{ $merchant->logo }}" class="rounded-circle img-thumbnail" alt="profile-image" style="max-width:200px;">
						@endif
						<h4 class="mb-0">{{ $merchant->name }}</h4>
						<h5 class="mb-0">{{ $merchant->merchant_code }}</h5>

						<div class="text-left mt-3">

							<p class="text-muted mb-2 font-13">
								<strong>Contact Name :</strong><span class="ml-2">{{ $merchant->contact_name }}</span>
							</p>

							<p class="text-muted mb-2 font-13">
								<strong>Mobile :</strong><span class="ml-2">{{ $merchant->phone }}</span>
							</p>

							<p class="text-muted mb-2 font-13">
								<strong>Email :</strong><span class="ml-2 "> <a class="text-muted" href="mailto:{{ $merchant->email }}">{{ $merchant->email }}</a> </span>
							</p>

							<p class="text-muted mb-1 font-13">
								<strong>Address :</strong><span class="ml-2"> {{ $merchant->address }}</span>
							</p>
							<p class="text-muted mb-1 font-13">
								<strong>City/ State :</strong><span class="ml-2"> {{ $merchant->city }} / {{ $merchant->state }}</span>
							</p>
							<p class="text-muted mb-1 font-13">
								<strong>Zip :</strong><span class="ml-2"> {{ $merchant->zip }}</span>
							</p>
							<p class="text-muted mb-1 font-13">
								<strong>Country :</strong><span class="ml-2"> {{ $merchant->country }}</span>
							</p>
							
						</div>

					</div>
					<!-- end card-box -->

				</div>
				<!-- end col-->

				<div class="col-12 col-sm-8 col-md-8">
					<div class="">

						<ul class="nav nav-tabs">
							<li class="nav-item">
								<a href="#seller_products" data-toggle="tab" aria-expanded="false" class="nav-link active">
									 Products List
									 <span class="productLoaderContainer"></span> 
								</a>
							</li>
							<!--
							<li class="nav-item">
								<a href="#seller_sales" data-toggle="tab" aria-expanded="true" class="nav-link salesTab unloaded"> 
									Sales List 
									<span class="salesLoaderContainer"></span>
								</a>
							</li>
							-->

						</ul>
						<div class="tab-content border border-top-0">
							<div class="tab-pane show active p-2" id="seller_products">
								
								<div class="row">
									<div class="col-12">
										<div class="productData">
											<div class="d-flex align-items-center">
	                                            <strong>Loading...</strong>
	                                            <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
	                                        </div>
										</div>
										
									</div>
								</div>
							</div>
							<!--
							<div class="tab-pane p-2" id="seller_sales">
								<div class="row">
									<div class="col-12">
										<div class="salesData">
											<div class="d-flex align-items-center">
	                                            <strong>Loading...</strong>
	                                            <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
	                                        </div>
										</div>
									</div>
								</div>
							</div>
							-->
						</div>
					</div>
				</div>
			</div>

		</div>

<!--Order Product Status History-->
<div class="modal fade"  tabindex="-1" role="dialog" id="statusHistoryModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h5 class="modal-title text-white"><i class="mdi mdi-update"></i> Product Status History</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body statusHistoryBody">
      	
      </div>
      
    </div>
  </div>
</div>
		
<script>
	$(function(){
		$(document).on('click','.productData .pagination .page-item:not(.active) .page-link',function(e){
			e.preventDefault();
			var btn = $(this);
			var btnHtml = btn.html();
			
			getProductData(btn.prop('href'));
			
		});
		
		function getProductData(url){
			
			$.ajax({
				url:url,
				type:'GET',
				success:function(resp){
					setTimeout(function(){
						$('.productData').html(resp);
						$('.productLoaderContainer').html("");
					},1500);
				},
				beforeSend:function(){
					$('.productLoaderContainer').html(`<span class="spinner-grow spinner-grow-sm text-danger" role="status"></span>`);
				}
			});
		}
		
		getProductData("{{route('getMerchantProducts',$merchant->id)}}");
		
		$(document).on('click','.salesData .pagination .page-item:not(.active) .page-link',function(e){
			e.preventDefault();
			var btn = $(this);
			var btnHtml = btn.html();
			
			getSalesData(btn.prop('href'));
			
		});
		
		function getSalesData(url){
			
			$.ajax({
				url:url,
				type:'GET',
				success:function(resp){
					setTimeout(function(){
						$('.salesData').html(resp);
						$('.salesLoaderContainer').html("");
					},1500);
					
				},
				beforeSend:function(){
					$('.salesLoaderContainer').html(`<span class="spinner-grow spinner-grow-sm text-danger" role="status"></span>`);
				}
			});
		}
		
		$(document).on('show.bs.tab','.salesTab', function (e) {
		  tab = $(e.target) // newly activated tab
		  //rtarget = e.relatedTarget // previous active tab
		  
		  if(tab.hasClass('unloaded')){
		  	getSalesData("{{route('getMerchantSales',$merchant->id)}}");
		  	tab.removeClass('unloaded');
		  }
		  
		});
		
		
		
		
		//product order status history modal 
		
		var modalLoading = `<p align="center"><strong>Loading</strong></p>
					        <div class="d-flex justify-content-center">
					        	<div class="spinner-grow text-danger" role="status"></div>
						    </div>`;
		$(document).on('click','.showStatusHistory',function(){
			var opid = $(this).data('order-product-id');
			var url = $(this).data('url');
			
			$('#statusHistoryModal').modal('show');
			
			$.ajax({
	           type:'POST',
	           url:url,
	           data:{_token:$('meta[name="csrf-token"]').attr('content'),opid:opid},
	           beforeSend:function(){
	           	 $('.statusHistoryBody').html(modalLoading);
	           },
	           success:function(data) {
	           		if(data!=0){
	           			$('.statusHistoryBody').html(data);
		           		
	           		} else {
	           			$('.statusHistoryBody').html(`<div class="alert alert-warning">Something went wrong. Try again after page refresh.</div>`);
	           		}
	           		
	           }
	        });
			
			
		});
		
		

		$('#statusHistoryModal').on('hidden.bs.modal', function (e) {
		  $('.statusHistoryBody').html(modalLoading);
		});
		
	});
</script>
		@endsection