@extends('layouts.app')

 
@section('header')
         <!-- Title Tag -->
    <title>Welcome</title>
    <link rel="stylesheet" href={{asset("/assets/plugins/morris/morris.css")}}>
    <link rel="stylesheet" href={{asset("/assets/css/chartist.min.css")}}>
   	<link rel="stylesheet" href={{asset("/assets/css/dashboard.css")}}>
   	
   	<link rel="stylesheet" href={{asset("/assets/plugins/jqwidgets/styles/jqx.base.css")}} type="text/css" />
   	<link rel="stylesheet" href={{asset("/assets/plugins/jqwidgets/styles/jqx.shinyblack.css")}} type="text/css" />
   	
    <style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
@endsection

@section('pageTitle')

	Custom types

@endsection


@section('content')

        <!-- \\ Begin Banner Section \\ -->
        <div class="Banner_sec" id="dashboardTran">
            <!--  \\ Begin banner Side -->
            <div class="bannerside" id="bannersideTran">
	            <div class="Center" id="CenterTran" >
                    <!--  \\ Begin Left Side -->
                    
                    
                    <div  class="leftside" id="LeftsideTran">
                      
                    </div> 
                    
	            </div>
	            <div class="CenterGrid" id='CenterGridCustomType' >                       								
                    	<div id="grid"></div>
                    	&nbsp
                    	<div id="griddetail"></div>
                    </div>
	            
            </div>
            
            <!--  // End banner Side // -->
            
            <div class="clear"></div>
        </div>
        
        
        
        <!-- // End Banner Section // -->
         <div class="bgcolor"></div>
         
         
       
  
        

@endsection



@section('FinalScript')
   <!--Morris Chart-->

        <script src={{asset("/assets/pages/dashborad.js")}}></script>
        <script src={{asset("/assets/js/chartist.min.js")}}></script>
        <script src={{asset("/assets/plugins/chart.js/dist/Chart.min.js")}}></script>
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxcore.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdata.js")}}></script> 
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxbuttons.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxscrollbar.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxmenu.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.js")}}></script>
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.edit.js")}}></script>  
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.selection.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.filter.js")}}></script> 
        
        
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxlistbox.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdropdownlist.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxcheckbox.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxcalendar.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxnumberinput.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdatetimeinput.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/globalization/globalize.js")}}></script>
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.grouping.js")}}></script>
   		<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.selection.js")}}></script> 
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.sort.js")}}></script>
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.columnsresize.js")}}></script>
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.aggregates.js")}}></script>
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdropdownlist.js")}}></script>
        
      
		<script type="text/javascript">



			
		

		function UpdateTransaction(rowdata){

			var CustomTypeId =  rowdata.CustomTypeId;
			var IsDuplicate =  rowdata.IsDuplicate;
			var CustomType = rowdata.CustomType;
			var IsFixed =  rowdata.IsFixed;
			
            
			
			 $.ajax({
	             type: 'POST',

	             url: "{{url('/updateCustomTypeAjax')}}",
	             data: {CustomTypeId: CustomTypeId, IsDuplicate: IsDuplicate, CustomType: CustomType, IsFixed: IsFixed},
	             error: function (xhr, ajaxOptions, thrownError) {
					alert(thrownError);
	                 
	             },
	             success: function (data) {
	            	 alertify.success('Modificat');
	             }
	         });
	      }
		

		function UpdateCustomDetail(rowdata){

			var id =  rowdata.TransactionTypeCustomDetailId;
			var Name =  rowdata.Partner;
			var TransactionTypeId = rowdata.TransactionTypeId;
			
            
			
			 $.ajax({
	             type: 'POST',

	             url: "{{url('/updateCustomTypeDetailAjax')}}",
	             data: {id: id, TranTypeId: TransactionTypeId, Name: Name},
	             error: function (xhr, ajaxOptions, thrownError) {
					alert(thrownError);
	                 
	             },
	             success: function (data) {

		             allDetail = data;
	            	 alertify.success('Modificat');
	             }
	         });
	      }
		

		var source ;
		
		function getTransactionsDetail(data) {
            // prepare the data
            //var data = generatedata(200);
            
			 if (typeof $("#grid").attr('role') !== "undefined"){
            	source.localdata = data;
                // passing "cells" to the 'updatebounddata' method will refresh only the cells values when the new rows count is equal to the previous rows count.
                $("#grid").jqxGrid('updatebounddata', 'cells');
                veziFiltru();
                return;
			 }
            
            source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                 	
                 	UpdateTransaction(rowdata);   
                 
                    
                    commit(true);
                },
                datafields:
                [
                	{ name: 'CustomTypeId', type: 'number' },
                	{ name: 'CustomType', type: 'string' },
                    { name: 'Direction', type: 'string' },
                    { name: 'IsDuplicate', type: 'number' },
                    { name: 'IsFixed', type: 'number' }, 
                ]
            };

             var addfilter = function () {
                 var filtergroup = new $.jqx.filter();
                 var filter_or_operator = 1;
                 var filtervalue = '';
                 var filtercondition = 'contains';
                 var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                 filtervalue = '';
                 filtercondition = 'starts_with';
                 var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
  
                 filtergroup.addfilter(filter_or_operator, filter1);
                 filtergroup.addfilter(filter_or_operator, filter2);
         
             }

             
            var dataAdapter = new $.jqx.dataAdapter(source);



             
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: '570px',
                height: '800px',
                
                source: dataAdapter,
                editable: true,
               
                filterable: true,
                sortable:true,
           
                
                theme: 'shinyblack',
               
                enabletooltips: true,
                columnsresize: true,
                selectionmode: 'singlecell',
               
                columns: [

                 { text: 'CustomTypeId', datafield: 'CustomTypeId', columntype: 'textbox', hidden:true,  align: 'center'},
                  { text: 'Custom Type', datafield: 'CustomType', columntype: 'textbox', width: 300 ,  align: 'center'},
                  { text: 'Direction', datafield: 'Direction', columntype: 'textbox', width: 100 ,  align: 'center'},  
                  { text: 'Duplicate', datafield: 'IsDuplicate', columntype: 'checkbox', width: 67 ,  align: 'center'},
                  { text: 'Fixed', datafield: 'IsFixed', columntype: 'checkbox', width: 67 ,  align: 'center'},
               
                  
                ]
            });



            $("#grid").on('rowclick', function (event) {
                
                var TransactionTypeCustomId = event.args.row.bounddata.CustomTypeId;
                var records = [];

                var len = allDetail.length;

                for(var i = 0 ; i < len; i++){
                	if (allDetail[i].TransactionTypeCustomId == TransactionTypeCustomId) {
                        records.push(allDetail[i]);	
                    };
                    
                };
                    
                    
               

                sourceD.localdata = records;
                
                adapter = new $.jqx.dataAdapter(sourceD);
        
                
 
                            
               
               $("#griddetail").jqxGrid({ source: adapter }); 
                
              //  typesadapter.dataBind()
            });

			// cream detaliul 

            var sourceD = {
            
              //  localdata: allDetail,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
          
                 	
                 	UpdateCustomDetail(rowdata);   
                 
                    
                    commit(true);
                },
                datafields:
                [
                	

                	{ name: 'TransactionType', value: 'TransactionTypeId', values: { source: typesadapter.records, value: 'TransactionTypeId', name: 'Name' } },
                	{ name: 'TransactionTypeId', type: 'string'},
                	{ name: 'Partner', type: 'string' },
                    { name: 'TransactionTypeCustomDetailId', type: 'number' },
                    
                    
                ]
            	};

             var addfilter = function () {
                 var filtergroup = new $.jqx.filter();
                 var filter_or_operator = 1;
                 var filtervalue = '';
                 var filtercondition = 'contains';
                 var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                 filtervalue = '';
                 filtercondition = 'starts_with';
                 var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
  
                 filtergroup.addfilter(filter_or_operator, filter1);
                 filtergroup.addfilter(filter_or_operator, filter2);
         
            	 }

             
            var dataAdapterD= new $.jqx.dataAdapter(sourceD);


            	

           	 $("#griddetail").jqxGrid(
                     {
                         width: '900px',
                         height: '800px',
                         
                         source: dataAdapterD,
                         editable: true,
                        
                         filterable: true,
                         sortable:true,
                    
                         
                         theme: 'shinyblack',
                        
                         enabletooltips: true,
                         columnsresize: true,
                         selectionmode: 'singlecell',
                        
                         columns: [

                        	
                        	   { text: 'Transaction Type', datafield: 'TransactionTypeId', displayfield: 'TransactionType', columntype: 'dropdownlist', width: 300  , align: 'center', 
									
									createeditor: function (row, value, editor) {
			                            editor.jqxDropDownList({ source: typesadapter, displayMember: 'Name', valueMember: 'TransactionTypeId' });
			                        }
                   	   
                            	   },
                               { text: 'Partner', datafield: 'Partner', width: 500  , align: 'center'},
                               { text: 'TransactionTypeCustomDetailId', datafield: 'TransactionTypeCustomDetailId', width: 180 , hidden:true,  align: 'center'}
                           
                         ]
                     });

		};


	


		
    </script>

 	<script>

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

 
	function getCurrentLink(){
		return 'customtypes';
	}

	var all = [];
	var allDetail = [];
	var tranTypes = [];
	
	@foreach($types as $t) 
		all.push({CustomTypeId:{{$t->TransactionTypeCustomId}}, CustomType:'{{$t->CustomType}}', IsDuplicate:{{$t->IsDuplicate}}, Direction:'{{$t->Direction}}', IsFixed:{{$t->IsFixed}}});
	@endforeach   


	@foreach($details as $t) 
		allDetail.push(	{TransactionTypeCustomId: {{$t->TransactionTypeCustomId}},TransactionTypeCustomDetailId: {{$t->TransactionTypeCustomDetailId}}, Partner:'{{$t->Partner}}', TransactionTypeId:'{{$t->TransactionTypeId}}' });
	@endforeach  


	@foreach($trantypes as $t) 
		tranTypes.push(	{TransactionTypeId: {{$t->TransactionTypeId}},  Name:'{{$t->Name}}' });
	@endforeach 
	

	 
	var typesource =
	{
		localdata: tranTypes,
		async: false,
		datatype: "array",
		datafields: [
			{ name: 'TransactionTypeId',type: 'number'},
            { name: 'Name',type: 'string'}
		],
		
	};

	var typesadapter = new $.jqx.dataAdapter(typesource, {autoBind: true});
                
   



	getTransactionsDetail(all);

	

	
 </script>
 


         
         
@endsection