@extends('layouts.app')

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

        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{trans('lang.vendor_plural')}}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.php">{{trans('lang.dashboard')}}</a></li>
                <li class="breadcrumb-item"><a href= "{!! route('vendors') !!}" >{{trans('lang.vendor_plural')}}</a></li>
                <li class="breadcrumb-item active">{{trans('lang.vendor_edit')}}</li>
            </ol>
        </div>
    <div>

    <div class="card-body">
      	<div id="data-table_processing" class="dataTables_processing panel panel-default" style="display: none;">{{trans('lang.processing')}}</div>
      	<div class="row">
          	<div class="col-md-6">
              	<div class="form-group row">
                	<label class="col-3 control-label">{{trans('lang.vendor_name')}}</label>
               		<div class="col-9">
                		<input type="text" class="form-control vendor_name">
                		<div class="form-text text-muted">
                  			{{ trans("lang.vendor_name_help") }}
                		</div>
              		</div>
            	</div>
      			<div class="form-group row">
        			<label class="col-3 control-label">{{trans('lang.vendor_cuisines')}}</label>
        			<div class="col-9">
       
        				<select id='vendor_cuisines' class="form-control">
        					<option value="">{{ trans("lang.select_cuisines") }}</option>
        				</select>
        				<div class="form-text text-muted">
                  			{{ trans("lang.vendor_cuisines_help") }}
        				</div>
      				</div>
      			</div>
            	<div class="form-group row">
        			<label class="col-3 control-label">{{trans('lang.vendor_phone')}}</label>
        			<div class="col-9">
        				<input type="text" class="form-control vendor_phone">
        				<div class="form-text text-muted">
                  			{{ trans("lang.vendor_phone_help") }}
        				</div>
      				</div>
      			</div>
            	<div class="form-group row">
        			<label class="col-3 control-label">{{trans('lang.vendor_address')}}</label>
        			<div class="col-9">
        				<input type="text" class="form-control vendor_address">
        				<div class="form-text text-muted">
                  			{{ trans("lang.vendor_address_help") }}
        				</div>
      				</div>
      			</div>
      

      			<div class="form-group row">
        			<label class="col-3 control-label">{{trans('lang.vendor_latitude')}}</label>
        			<div class="col-9">
        				<input type="text" class="form-control vendor_latitude">
        				<div class="form-text text-muted">
                  			{{ trans("lang.vendor_latitude_help") }}
        				</div>
      				</div>

      			</div>

      			<div class="form-group row">
        			<label class="col-3 control-label">{{trans('lang.vendor_longitude')}}</label>
        			<div class="col-9">
        				<input type="text" class="form-control vendor_longitude">
        				<div class="form-text text-muted">
                  			{{ trans("lang.vendor_longitude_help") }}
        				</div>
      				</div>
      			</div>
          </div>
          <div class="col-md-6">


      <div class="form-group row">
        <label class="col-3 control-label ">{{trans('lang.vendor_description')}}</label>
        <textarea rows="10" class=" clo-9 vendor_description form-control" id="vendor_description"></textarea>
      </div>
      
      <div class="form-group row">
        <label class="col-3 control-label">{{trans('lang.vendor_image')}}</label>
        <div class="col-7">
        <input type="file" onChange="handleFileSelect(event)">
        <div id="uploding_image"></div>
        <div class="form-text text-muted">
                  {{ trans("lang.vendor_image_help") }}
        </div>
      </div>
    </div>


          </div>
        </div>

    <h2>{{trans('lang.admin_area')}}</h2>

      <div class="form-group row">
        <label class="col-3 control-label">{{trans('lang.vendor_users')}}</label>
        <input type="text" class=" col-3 form-control vendor_owners" disabled>
      </div>
      </div>

      <div class="form-group col-12 text-right">
          <button type="button" class="btn btn-primary  save_vendor_btn" ><i class="fa fa-save"></i> {{trans('lang.save')}}</button>
         <a href="{!! route('vendors') !!}" class="btn btn-default"><i class="fa fa-undo"></i>{{trans('lang.cancel')}}</a>
      </div>

    </div>
  </div>
</div>


 @endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
 <script>
	var id = "";
	var database = firebase.firestore();
	var ref = database.collection('vendors').where("id","==",id);
	var photo ="";
	var vendorOwnerId = "";
	var vendorOwnerOnline = false;
	$(document).ready(function(){
  		jQuery("#data-table_processing").show();
  		ref.get().then( async function(snapshots){
			var vendor = snapshots.docs[0].data();
			$(".vendor_name").val(vendor.title);
			$(".vendor_cuisines").val(vendor.filters.Cuisine);
			$(".vendor_address").val(vendor.location);
			$(".vendor_latitude").val(vendor.latitude);
			$(".vendor_longitude").val(vendor.longitude);
			$(".vendor_description").val(vendor.description);

			vendorOwnerOnline = vendor.isActive;
	   		photo = vendor.photo;
	    	vendorOwnerId = vendor.author;
	 		await database.collection('users').where("id","==",vendor.author).get().then( async function(snapshots){
	   			snapshots.docs.forEach((listval) => {
	            var user = listval.data();
				$(".vendor_owners").val(user.firstName+" "+user.lastName);
	          })
			});

			await database.collection('vendor_categories').get().then( async function(snapshots){
	   			snapshots.docs.forEach((listval) => {
	            	var data = listval.data();
	            	if(data.id == vendor.categoryID){
	                	$('#vendor_cuisines').append($("<option selected></option>")
	                    	.attr("value", data.id)
	                    	.text(data.title));
	            	}else{
	                	$('#vendor_cuisines').append($("<option></option>")
	                    	.attr("value", data.id)
	                    	.text(data.title));
			    	}
	          	})

			});  
	    
	    	if(vendor.hasOwnProperty('phonenumber')){
	     		$(".vendor_phone").val(vendor.phonenumber);
	    	}
	  		jQuery("#data-table_processing").hide();
  		})


  
		$(".save_vendor_btn").click(function(){
		  	var vendorname = $(".vendor_name").val();
			var cuisines = $("#vendor_cuisines option:selected").val();
			var address = $(".vendor_address").val();	
			var latitude = parseFloat($(".vendor_latitude").val());
			var longitude = parseFloat($(".vendor_longitude").val());
			var description = $(".vendor_description").val();
			var phonenumber = $(".vendor_phone").val();
			var categoryTitle = $( "#vendor_cuisines option:selected" ).text();

		    database.collection('vendors').doc(id).update({'title':vendorname,'description':description,'latitude':latitude,
		      'longitude':longitude,'location':address,'photo':photo,'categoryID':cuisines,'phonenumber':phonenumber,'categoryTitle':categoryTitle}).then(function(result) {
		                window.location.href = '{{ route("vendors")}}';
		             }); 
		})

	})

	var storageRef = firebase.storage().ref('images');
	function handleFileSelect(evt) {
  		var f = evt.target.files[0];
  		var reader = new FileReader();
	  	reader.onload = (function(theFile) {
		    return function(e) {
		        
		      var filePayload = e.target.result;
		      var hash = CryptoJS.SHA256(Math.random() + CryptoJS.SHA256(filePayload));
		        var val =f.name;       
		      var ext=val.split('.')[1];
		      var docName=val.split('fakepath')[1];
		      var filename = (f.name).replace(/C:\\fakepath\\/i, '')

		      var timestamp = Number(new Date());      
		      var uploadTask = storageRef.child(filename).put(theFile);
		      uploadTask.on('state_changed', function(snapshot){

		      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
		      console.log('Upload is ' + progress + '% done');
		      jQuery("#uploding_image").text("Image is uploading...");
		    }, function(error) {
		    }, function() {
		        uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
		            jQuery("#uploding_image").text("Upload is completed");
		            photo = downloadURL;

		      });   
		    });
	    
	    };
	  })(f);
  reader.readAsDataURL(f);
}   

</script>
@endsection