@extends('dashboard/layout.app')
@section('title','BettrAi | Vednor Device Mapping') 
@section('content')
<style>
  .swal2-popup {
    padding: 2rem;
    border-radius: 0.42rem;
    margin-top: 50px !important;
}
.repeater_icons{
    padding: 15px 10px 15px 15px !important;
}
    </style>
 <div class="card p-5">
		<div class="row" style="margin-top:10px;">	
			<div class="col-9">
                <h5 id="vendor_form_dtitle"> Add Vendor () - Device Mapping</h5>
            </div>
			
			<div class="col-3" style="margin-bottom: 10px;text-align: right;">
										<a href="{{ url('/vendorLists') }}" onclick="add_new_vendor()"
						class="btn btn-light-primary font-weight-bold mr-5 add_new_btn">Back To Vendor List</a>
								</div>
		</div>		

<div class="card-body" id="device_vendor_popup_body" style="overflow-x: hidden;">	
    
    <form name="device_vendor_form" id="device_vendor_form" method="post">	
        <input type="hidden" name="vendor_id" id="d_vendor_id" value="">
        <input type="hidden" name="device_id" id="device_id" value="">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="form-group row">
                     <div class="col-5">
                         <label>Device Name<span class="text-danger">*</span></label>
                     </div>
                     <div class="col-5">
                        <input type="text"  class="form-control" name="device_name" id="device_name" value="" onblur="isVendorDeviceExits()" placeholder="Please enter here">		
                     </div>
                </div>
                <div class="form-group row">
                    <label class="col-12"> Measurements<span class="text-danger">*</span></label>
                                    </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="form-group row">
                     <div class="col-1"></div>
                     <div class="col-5">
                        <label>	Device Description</label>
                    </div>
                    <div class="col-5">
                        <input type="text"  class="form-control" name="device_description" id="device_description" value="" placeholder="Please enter here">		
                    </div>
                </div>  
                <div class="col-12 form-group row">
					<div class="col-12 form-group row">
						<div class="col-12 form-group row">
							<div class="col-1"></div>		
							<div class="col-4">
								<label>	Device Model No</label>
							</div>
							<div class="col-7">
								<label>	Device Price($)</label>
							</div>
						</div>
						<div class="col-lg-12 disease-repeater-list">
							<div class="form-group row align-items-center data-repeater-item">
								<div class="col-lg-1"></div>
								<div class="col-lg-4">
									<input type="text" class="form-control device_movdels" placeholder="Device Model" name="device_model_no[]">
								</div><div class="col-lg-4">
									<input type="number" class="form-control device_price" placeholder="Device Price" name="device_price[]">
								</div>
								<div class="col-md-1">
								</div>
								<div class="col-lg-2">
									<a href="javascript:;" class="btn btn-sm font-weight-bolder btn-light-primary disease-repeater-create repeater_icons" onclick="adddisease_repeater()">
									<i class="la la-plus"></i></a>
								</div>
							</div>
						</div>
					</div>
			   </div> 
                <div class="form-group row">
                    <div class="col-1"></div>
                    <div class="col-7">
                        <label>	Is device integrated with BettrAi ? <span class="text-danger">*</span></label>
                    </div>   
                    <div class="col-3">
                        <label >
                            <input type="radio" name="is_device_integrated" id="is_device_integrated-1" value="1"  autocomplete="nope">Yes &nbsp;&nbsp;&nbsp;
                        </label> 
                        <label>
                            <input type="radio" name="is_device_integrated" id="is_device_integrated-0" value="0" checked="checked" autocomplete="nope">No
                        </label>
                    </div>		
                </div>    
            </div>
        </div>   

        <div class="card-toolbar pb-10" style="float: left; width: 100%; text-align: center">
            <button type="button"
                class="btn btn-light-primary font-weight-bold mr-3" onclick="save_device();">Save</button>													
            <a class="btn btn-light-danger font-weight-bold" onclick="reset_device_form()">Reset</a>																
        </div>
    </form>
    <div class="row table-responsive" style="overflow-x:hidden; ">
        <table class="table table-head-custom table-vertical-center p-5" id="kt_advance_table_widget_8">          
            <thead>
                <tr>
                    <th>Device Name </th>
                    <th>Description </th>
                    <th>Device Model</th>
                    <!--<th>Device Price</th>-->
                    <th>Integrated With Bettrai</th>
                    <th style="width: 25%;">Action</th>
                </tr>
            </thead>    	
            <tbody>  
            
            </tbody>
        </table>
    </div>
    <div id="divLoadingInPopup1" class="tabloadershow"></div>
</div>
</div>
<script src="{{ asset('/assets/plugins/custom/datatables/datatables.bundle.js')}}"></script>
<script	src="{{ asset('/assets/js/pages/crud/datatables/basic/paginations.js')}}"></script>

<script>
    $(document).ready(function(){
        $('.mask_phone').inputmask({
            mask: '999-999-9999',                
            showMaskOnFocus: false,
            showMaskOnHover: false        
        });
        setTimeout(() => {
            device_list();            
        }, 1500); 
    });
    function reset_device_form(){
        $('#device_vendor_form')[0].reset();
        $("#d_vendor_id").val("");
		$('.disease-repeater-list').html('');
		let item = '<div class="form-group row align-items-center data-repeater-item"><div class="col-1"></div>'+
		'<div class="col-lg-4"><input type="text" class="form-control device_movdels" placeholder="Device Model" name="device_model_no[]" value=""></div'+
		'><div class="col-lg-4"><input type="number" class="form-control device_price" placeholder="Device Price" name="device_price[]"  value=""></div>';
		item +='<div class="col-md-1"></div><div class="col-md-2"><a href="javascript:;" class="btn btn-sm font-weight-bolder btn-light-primary disease-repeater-create repeater_icons" onclick="adddisease_repeater();"><i class="la la-plus" style=""></i></a></div></div>';
		
		$('.disease-repeater-list').html(item); 
    }
    function save_device(){
        var device_name = $("#device_name").val();
        if(device_name==''){
            swal("Please enter device name")
            return false;
        }   
        var selectedvitals = $('input[name="vital_sign[]"]:checked').length;
        if(selectedvitals<1){
            swal("Please select atleast one vital sign")
            return false;
        }
        var isexist = isVendorDeviceExits();
        var isexist = 0;
        if(isexist=='1'){
            return false;
        }else{
            var formData = new FormData();
            formData = new FormData($('#device_vendor_form')[0]);
            formData.append("_token", '{{csrf_token()}}'); 
            $(".tabloadershow").show();
            var post_url = "{{ url('/saveVendorDeviceMapping') }}";
            $.ajax({
                url : post_url,
                type:"POST",
                data:formData,
                contentType: false,
                processData: false,
                dataType : 'JSON',
                success: function(data){
                    $(".tabloadershow").hide();
                    $(".succ_msg").show();
                    device_list()
                    setTimeout(() => {
                        $(".succ_msg").hide();
                    }, 1500);
                    reset_device_form()    

                }
            });
        }
    }
    function device_list(){
        var vendor_id = "";
        
        $("#kt_advance_table_widget_8").dataTable().fnDestroy();
        $('#kt_advance_table_widget_8').dataTable({
            'processing': true,
            'serverSide': true,
            'serverMethod': 'get',
            oLanguage: {sProcessing: "<img src='{{ url('assets/images/loading-icon.gif') }}'>"},
            ajax: {
                url: "{{ url('/vendorDeviceMapping') }}?vendor_id="+vendor_id,
            },            
            'columns': [
                { data: 'device_name' },
                { data: 'device_description' },
                { data: 'device_model_no' },
               // { data: 'device_price' },
                { data: 'is_device_integrated' },
                { data: 'action' }
            ],	 columnDefs: [ {
                className: 'control',
                orderable: true,                          
            }],
            order: [ 2, 'desc' ],
            drawCallback: function () {
                $('[data-toggle="tooltip"]').tooltip();
                $('[data-toggle="popover"]').popover();
                
            }
        });
    }
    function edit_device_popup(device_id){
        $(".tabloadershow").show();
        var post_url = "{{ url('/getDeviceMappingDetailsByID') }}?device_id="+device_id;
        $.ajax({
            url : post_url,
            type:"GET",
            contentType: false,
            processData: false,
            dataType : 'JSON',
            success: function(data){
                var device_data = data.device_data;
                var vital_id = device_data.vital_id;    

                var vital_signs = vital_id.split(",");
                for(let i=0; i<vital_signs.length;i++){
                    $("#vital_sign_"+vital_signs[i]).prop('checked',true)
                }
                $("#device_name").val(device_data.device_name);
                $("#device_description").val(device_data.device_description);
                $("#device_mobile_no").val(device_data.device_mobile_no);
                $("#device_price").val(device_data.device_price);
                $("#device_id").val(device_data.id);
                $("#is_device_integrated-"+device_data.is_device_integrated).prop('checked',true);
				
				var dev_model_Str = device_data.device_model;
				var dev_price_Str = device_data.deviceprice;
				
				var dev_model_arr = dev_model_Str.split(",");
				var dev_price_arr = dev_price_Str.split(",");
				if(dev_model_arr.length>0){
					$('.disease-repeater-list').html('');
					for(let i=0; i<dev_model_arr.length;i++){
						
						let item = '<div class="form-group row align-items-center data-repeater-item"><div class="col-1"></div>'+
						'<div class="col-lg-4"><input type="text" class="form-control device_movdels" placeholder="Device Model" name="device_model_no[]" value="'+dev_model_arr[i]+'"></div'+
						'><div class="col-lg-4"><input type="number" class="form-control device_price" placeholder="Device Price" name="device_price[]"  value="'+dev_price_arr[i]+'"></div>';
						if(i==0){
							item +='<div class="col-md-1"></div><div class="col-md-2"><a href="javascript:;" class="btn btn-sm font-weight-bolder btn-light-primary disease-repeater-create repeater_icons" onclick="adddisease_repeater();"><i class="la la-plus" style=""></i></a></div></div>';
						}else{
							item +='<div class="col-md-1"></div><div class="col-md-2"><a href="javascript:;" class="btn btn-sm font-weight-bolder btn-light-danger disease-repeater-delete repeater_icons" onclick="remove_diseaserepeater();"><i class="la la-trash-o" style=""></i></a></div></div>';
						}
						$('.disease-repeater-list').append(item);
					}
				}
				$("html, body").animate({ scrollTop: 0 }, "slow"); 
				$('html,body').animate({scrollTop: $("#device_name").offset().top}, 500, function() {
					$("#device_name").focus();
					$(".tabloadershow").hide();
				}); 
				//$("#device_name").focus();
                
            }
        })
    }

    function isVendorDeviceExits(){
        var device_name = $("#device_name").val();
        var vendor_id = $("#d_vendor_id").val();
        var device_id = $("#device_id").val();
        if(device_name!=''){
            var post_url = "{{ url('/isExistsVendorDevice') }}?name="+device_name+"&vendor_id="+vendor_id+"&device_id="+device_id;
            var isexists = 0;
            $.ajax({
                url : post_url,
                type:"GET",
                dataType:'JSON',
                async:false,
                success: function(data){
                    if(data.isexists==1){
                        swal("Device Name "+device_name+" is already exists")
                        isexists = data.isexists;
                    }
                }
            });
            return isexists;
        }else{
            return true;
        }
        
    }
 	
function adddisease_repeater(){
	let item = '<div class="form-group row align-items-center data-repeater-item"><div class="col-1"></div><div class="col-lg-4"><input type="text" class="form-control device_movdels" placeholder="Device Model" name="device_model_no[]"></div><div class="col-lg-4"><input type="number" class="form-control device_price" placeholder="Device Price" name="device_price[]"></div><div class="col-md-1"></div><div class="col-md-2"><a href="javascript:;" class="btn btn-sm font-weight-bolder btn-light-danger disease-repeater-delete repeater_icons" onclick="remove_diseaserepeater();"><i class="la la-trash-o" style=""></i></a></div></div>';
	$('.disease-repeater-list').append(item);
}

function remove_diseaserepeater(){
	var self = $('.disease-repeater-delete').closest('.data-repeater-item').get(0);
	$(self).remove();
}
$(document).on('keyup', ".device_price",function () {
    let val =$(this).val();
    if(val>=0){

    }else{
       swal("Please enter valid price")
        $(this).val('');
    }
});
</script>
@endsection