@extends('superAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Companies
@endsection

@section('styles')
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
	<!-- MAIN BODY CONTENT -->
	<div class="top-header">
	    <h1>Companies</h1>
	    <a href="{{ route('superAdmin.addCompany') }}">
		    <div class="action-group">
		      <span class="add-company">
		        Add New Company <img src="{{ asset('assets/images/circle-plus.svg') }}" alt="">
		      </span>
		    </div>
	    </a>
	</div>

	@if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    
	<div class="row">
	  	<div class="col-md-12">
	        <div class="card">
	            <div class="card-body">
	              	<div class="row">
	                	<div class="col-md-3">
						   <select name="checkstatus" id="checkstatus" class="form-control">
	                    		<option value="">Select status</option>
								<option value="1">Active</option>
								<option value="0">Deactive</option>
	                  		</select>
	                	</div>
	              	</div>

	              	<!-- COmpanies table -->
	              	<div class="table-responsive">
	                	<table id="companies-table" class="table card-table dataTable table-hover table-vcenter text-nowrap" style="width:100%">
	                  		<thead>
	                    		<tr>
	                      			<th>Name</th>
	                      			<th>Location</th>
	                      			<th width="15%">active/ deactivate</th>
                                    <th>id</th>
	                    		</tr>
	                  		</thead>
	                  		<tbody>
	                  		</tbody>
	                  	</table>
	            	</div>
	          	</div>
	        </div>
		</div>
	</div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')
<!-- Data tables -->
	<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
	<!-- <script src="{{ asset('assets/js/datatable.js') }}"></script> -->

<script type="text/javascript">

var oTable = '';
$(document).ready(function () {
    oTable = $('#companies-table').DataTable({
        "language": {
            "lengthMenu": "Show: _MENU_ records per page",
            "zeroRecords": "Oops No record Found",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        paging: true,
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        ajax: {
            "url": "{{ route('superAdmin.company') }}",
            "type": "GET",
            "data": function(d) {
                d.checkstatus = $('#checkstatus').val();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        },
        columns: [
			{
                data: null,
                name: 'company_name',
				render: function (data, type, row) {
                    return '<a href="'+baseUrl+'company/editCompany/'+data['id']+'" ><img  title="" src="' + siteUrl + 'storage/images/company/logo/thumbnail/'+data['company_logo']+'" alt="No image found">' + data['company_name']+'</a>';
                }
			},
            {
                data: 'company_address',
                name: 'company_address',
            },
            {
                data: null,
                className: 'text-right',
                render: function (data, type, row) {
                    // add 'active_status' class to rework the Active button not Location view button. Now it is disabled
                    var location_url="{{ url('/superadmin/company/companyLocation/') }}"+"/"+row.id;
                	return '<a href="'+location_url+'" class="btn btn-primary btn-pill">Location</a><button class="btn btn-primary btn-pill active_status" data-id="'+ row.id +'" data-status="'+ row.is_active +'">'+ (row.is_active == 1 ? "Deactivate" : "Active") + '</button>';
                }
            },
            { data: 'id', name: 'id' },
        ],
        'columnDefs': [
            {
                'targets': [2], /* column index */
                'orderable': false, /* true or false */
            },
            {
                'targets': [2], /* column index */
                "searchable": false
            },
            {
                "targets": [3],
                "visible": false
            }
        ],
        'aaSorting': [3, 'DESC']
    });

	$(document).on('click', '.active_status', function (event) {

        alert('You can not deactivate this as this is on Partial Realease');
        return false;
		event.preventDefault();
        var status = $(this).attr('data-status');
        var company_id = $(this).attr('data-id');
        if (status == 1 )
            {
                var status = 0;
            }else{
                var status = 1;
            }
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('superAdmin.changeCompanyStatus') }}",
            method: 'post',
            dataType: 'json',
			data : { 
                is_active : status, 
                company_id : company_id, 
                _token: $('meta[name="csrf_token"]').attr('content')
            },
            success: function (result) {
                if (result.success == true) {
                    oTable.draw();
                } else {
                    //Do nothing
                }
            }
        });

    });

	$("#checkstatus").change(function() {
		oTable.draw();
	});

});

</script>

@endsection