@extends('layouts.app')
@section('content')
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-md-12">
				<div class="card card-outline card-info">
					<div class="card-header">
						<div class="card-title">
							<h3>
								<i class="fas fa-solid fa-building"></i>
								@lang('messages.all_companies')
							</h3>
						</div>
						<button type="button" class="btn btn-sm btn-primary float-right" data-href="{{action('Superadmin\ManageCompaniesController@create')}}" id="add_company">
							<i class="fas fa-solid fa-building"></i>
							@lang('messages.add')
						</button>
					</div>
					<div class="card-body">
						<div class="row mb-4">
							<div class="col-md-12">
								<div class="box-group" id="accordion">
									<div class="panel box box-primary">
					                  <div class="box-header with-border">
					                    <h4 class="box-title">
					                      <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
					                      	<i class="fas fa-filter"></i>
					                        @lang('messages.filter')
					                      </a>
					                    </h4>
					                  </div>
					                  <div id="collapseTwo" class="panel-collapse collapse">
					                    <div class="box-body">
					                    	<div class="row">
									        	<div class="col-md-3">
													<div class="form-group">
										                <label for="filter_by_status">
										                    @lang('messages.companies')
										                </label>
										                <select name="filter_by_status" id="filter_by_status" class="form-control">
										                	<option value="">
									                            @lang('messages.all')
									                        </option>
										                </select>
										            </div>
												</div>
									        </div>
					                    </div>
					                  </div>
					                </div>
				            	</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive">
									<div id="export-btns" class="float-right"></div>
									<table class="table" id="companies_table">
				                        <thead>
				                            <tr>
												<th></th>
				                                <th>@lang('messages.name')</th>
                                                <!-- th>@lang('messages.address')</th -->
                                                <th>@lang('messages.email')</th>
                                                <!-- th>@lang('messages.phone')</th -->
                                                <!-- th>@lang('messages.mobile')</th -->
                                                <!-- th>@lang('messages.fax')</th -->
                                                <!-- th>@lang('messages.web')</th -->
                                                <!-- th>@lang('messages.subdomain')</th -->
                                                <th>@lang('messages.company')</th>
                                                <th>@lang('messages.owner')</th>
                                                <th>@lang('messages.created_by')</th>
                                                <!-- th>@lang('messages.created_at')</th -->
                                                <!-- th>@lang('messages.updated_at')</th -->
				                                <th>@lang('messages.action')</th>
				                            </tr>
				                        </thead>
				                        <tbody></tbody>
				                    </table>
				                </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
	<div class="modal" id="company_modal" tabindex="-1" role="dialog"></div>
@endsection
@section('footer')
<script type="text/javascript">
	$(document).ready(function(){
		// $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
		// 	console.log("dataTable Error | settings > %O | helpPage > %O | message > %O", settings, helpPage, message);
		// };
		$.fn.dataTable.ext.errMode = 'none';
		var companies_table = $('#companies_table')
					.on( 'error.dt', function ( e, settings, techNote, message ) {
						console.log("dataTable Error | settings > %O | techNote > %O | message > %O", settings, techNote, message);
					} )
					.DataTable({
						processing: true,
		                serverSide: true,
						// ajax: function (data, callback, settings) {
						// 	callback( JSON.parse( localStorage.getItem('dataTablesData') ) );
						// },
		                ajax:{
		                    url: '/superadmin/companies',
							type: "GET",
		                    data: function(d) {
		                        // d.status = $('#filter_by_status').val();
								// return $.extend( {}, d, {
								// 	'status': $('#filter_by_status').val()
								// } );
		                    },
							// dataSrc: function ( json ) {
							// 	console.log("dataSrc > %O", json);
							// 	return json.data;
							// },
							complete: function(xhr, responseText){
								console.log("responseText > %s", responseText);
							},
							error: function (xhr, error, code){
								console.log(error, code);
							}
		                },
		                buttons: [
						   	{
						       	extend: 'csv',
						       	footer: true,
						       	exportOptions: {
						            columns: [0,1,2,3,4]
						        },
						        title: '{{config("app.name") ."-". __("messages.all_companies")}}'
						   	},
						   	{
						       	extend: 'excelHtml5',
						       	footer: false,
						       	exportOptions: {
						            columns: [0,1,2,3,4]
						        },
						        title: '{{config("app.name") ."-". __("messages.all_companies")}}'
						   }         
						],
						dom: 'lBfrtip',
		                fixedHeader: false,
		                columns: [
							{data: 'rownum', name: 'rownum'},
                            { data: 'name', name: 'companies.name' },
                            // { data: 'address', name: 'companies.address' },
                            { data: 'email', name: 'companies.email' },
                            // { data: 'phone', name: 'companies.phone' },
                            // { data: 'mobile', name: 'companies.mobile' },
                            // { data: 'fax', name: 'companies.fax' },
                            // { data: 'web', name: 'companies.web' },
                            // { data: 'subdomain', name: 'companies.subdomain' },
                            { 
								data: function ( row, type, set ) {
									// if ( type === 'display' ) { }
									return row.parent_company_email;
								},
								name: 'parentCompany.email',
                                render: function(data){
									return (data);
                                }
                            },
                            { 
								data: function ( row, type, set ) {
									// if ( type === 'display' ) { }
									return row.owner_email;
								},
								name: 'owner.email',
                                render: function(data){
                                    return (data);
                                }
                            },
                            { 
								data: function ( row, type, set ) {
									// if ( type === 'display' ) { }
									return row.created_user_email;
								},
								name: 'createdUser.email',
                                render: function(data){
									return (data);
                                }
                            },
                            // { data: 'created_at', name: 'companies.created_at' },
                            // { data: 'updated_at', name: 'companies.updated_at' },
                            { 
                                data: 'action',
                                name: 'action',
                                render: function(data){
                                    return (data);
                                },
                                sortable:false
                            }
		                ],
						initComplete: function () {
							console.log("initComplete");
						}
		});

		companies_table.buttons().container().appendTo($('#export-btns'));

		$(document).on('click', '.delete_company', function () {
			var url = $(this).data('href');

			if (confirm('Are you sure?')) {
				$.ajax({
					method:"DELETE",
					url: url,
					dataType: "json",
					success:function(response) {
						if(response.success == true){
	                        toastr.success(response.msg);
	                        companies_table.ajax.reload();
	                    } else {    
	                        toastr.error(response.msg);
	                    }
					}
				});
			}
		});

		$(document).on('click', '#add_company', function () {
			var url = $(this).data('href');
			$.ajax({
				method: "GET",
				url: url,
				dataType: "html",
				success: function (response) {
					$("#company_modal").html(response).modal('show');
				}
			});
		});

		$(document).on('click', '.edit_company', function () {
			var url = $(this).data('href');
			$.ajax({
				method: "GET",
				url: url,
				dataType: "html",
				success: function (response) {
					$("#company_modal").html(response).modal('show');
				}
			});
		});

		$(document).on('click', '.show_company', function () {
			var url = $(this).data('href');
			$.ajax({
				method: "GET",
				url: url,
				dataType: "html",
				success: function (response) {
					$("#company_modal").html(response).modal('show');
				}
			});
		});

		$("#company_modal").on('shown.bs.modal', function () {
			if ($("form#add_company_form").length) {
				$("form#add_company_form").validate({
					rules: {},
			        messages: {}
		    	});
			}

			if ($("form#edit_company_form").length) {
				$("form#edit_company_form").validate({
					rules: {},
			        messages: {}
		    	});
			}

			if ($("#form_design").length) {
				$(document).on('change', '#form_design', function(){
					if ($("#form_design").is(":checked")) {
						$("#form_view").attr('checked', true);
					} else {
						$("#form_view").attr('checked', false);
					}
				});
			}
		});

		$(document).on('submit', 'form#add_company_form', function (e) {
			e.preventDefault();
			var settings = {};
			var data = null;
			if (window.FormData !== undefined) {
				// data = new FormData($("form#add_company_form")[0]); 
				data = new FormData( e.target );
				settings = {
					processData : false,
					contentType : false,
				};
			} else {
				data = $("form#add_company_form").serialize();
				settings = {};
			}
			var url = $("form#add_company_form").attr('action');
			var ladda = Ladda.create(document.querySelector('.submit_btn'));
            ladda.start();
			$.ajax({
				method: "POST",
				url: url,
				dataType: "json",
				data: data,
				...settings,
				//encode      : true,
				//cache : false,
				success: function (response) {
					ladda.stop();
					if (response.success) {
						$("#company_modal").modal('hide');
						toastr.success(response.msg);
                        companies_table.ajax.reload();
					} else {
						toastr.error(response.msg);
					}
				}
			});
		});

		$(document).on('submit', 'form#edit_company_form', function (e) {
			e.preventDefault();
			var settings = {};
			var data = null;
			if (window.FormData !== undefined) {
				// data = new FormData($("form#edit_company_form")[0]); 
				data = new FormData( e.target );
				settings = {
					processData : false,
					contentType : false,
				};
			} else {
				data = $("form#edit_company_form").serialize();
				settings = {};
			}
			var url = $("form#edit_company_form").attr('action');
			var ladda = Ladda.create(document.querySelector('.submit_btn'));
            ladda.start();
			$.ajax({
				method: "PUT",
				url: url,
				dataType: "json",
				data: data,
				...settings,
				//encode      : true,
				//cache : false,
				success: function (response) {
					ladda.stop();
					if (response.success) {
						$("#company_modal").modal('hide');
						toastr.success(response.msg);
                        companies_table.ajax.reload();
					} else {
						toastr.error(response.msg);
					}
				}
			});
		});
		
		$(document).on('submit', 'form[data-type="form"]', function (e) {
			e.preventDefault();
			var settings = {};
			var data = null;
			// var data = $(this).serialize();
			if (window.FormData !== undefined) {
				// data = new FormData($("form[data-type='form']")[0]); 
				data = new FormData( e.target );
				settings = {
					processData : false,
					contentType : false,
				};
			} else {
				data = $("form[data-type='form']").serialize();
				settings = {};
			}
			var url = $(this).attr('action');
			var ladda = Ladda.create(this.querySelector('.submit_btn'));
            ladda.start();
			$.ajax({
				method: "PUT",
				url: url,
				dataType: "json",
				data: data,
				...settings,
				//encode      : true,
				//cache : false,
				success: function (response) {
					ladda.stop();
					if (response.success) {
						$("#company_modal").modal('hide');
						toastr.success(response.msg);
					} else {
						toastr.error(response.msg);
					}
				}
			});
		});

		$(document).on('change', '#filter_by_status', function() {
			companies_table.ajax.reload();
		});
	});
</script>
@endsection