@extends('companyAdmin.layouts.auth')

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

@section('styles')
<!-- Data table css -->
	<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>Company Location</h1>
		<div class="action-group">
			<a href="{{ route('companyAdmin.addLocation') }}">
				<span class="add-company">
					Add New Location <img src="{{ asset('assets/images/circle-plus.svg') }}" alt="">
				</span>
			</a>
		</div>
	</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('companyAdmin.companyLocation') }}",
            "type": "GET",
            "data": function(d) {
                d.checkstatus = $('#checkstatus').val();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        },
        columns: [
            {
                data: null,
                name: 'name',
                render: function (data, type, row) {
                  return '<img title="" src="' + siteUrl + 'storage/images/company/logo/thumbnail/'+data['get_company']['company_logo']+'" alt="No image found">' + data['name'];
                }
            },
            {
                data: 'address', name: 'address',
            },
            {
                data: null,
                className: 'text-right',
                render: function (data, type, row) {
                	return '<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) {
		event.preventDefault();
        var status = $(this).attr('data-status');
        var serviceRow = $(this).attr('data-id');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('companyAdmin.changeLocationStatus') }}",
            method: 'post',
            dataType: 'json',
            data: {
                is_active: status,
                id: serviceRow,
                _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