@extends('layouts.main')

@section('title', 'Jadwal Kerja Pompa - Asset Management')

@section('pagetitle', 'Jadwal Kerja Pompa')

@section('content') 
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="card {{($data=='')?'':'hidden'}}" id="instalasi-data">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">List Jadwal Kerja Pompa</h5>
            </div>

            <div class="card-body">
                <!-- Notifikasi -->
            	@if (Session::has('error'))
                	<div class="alert alert-danger alert-styled-right alert-dismissible">
						<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
						{{ Session::get('error', 'Error') }}
				    </div>
                @endif
                @if (Session::has('success'))
                	<div class="alert alert-success alert-styled-right alert-arrow-right alert-dismissible">
						<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
						{{ Session::get('success', 'Success') }}
				    </div>
                @endif

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Instalasi</label>
                    <div class="col-lg-10">
                        {!! Form::select('instalasi', $instalasi, null, ['class'=>'form-control select2', 'id'=>'instalasi']) !!}
                    </div>
                </div>
				
				<div class="form-group row">
                    <label class="col-form-label col-lg-2">Lokasi</label>
                    <div class="col-lg-10">
                        {!! Form::select('lokasi', $lokasi, null, ['class'=>'form-control select2', 'id'=>'lokasi']) !!}
                    </div>
                </div>
				
                <!-- ./notifikasi -->
                <a href="{{ route('jadwalkerja::jadwalkerja-entri') }}" id="tambah-btn" class="btn btn-success legitRipple"><i class="fa fa-plus"></i> Tambah Baru</a>
                <!-- Table -->
                <table class="table datatable-basic" id="tabel">
                    <thead>
                        <tr>
                            <!-- <th>Kode</th>      -->
                            <th>Aset</th>
                            <th>Lokasi</th>
                            <th>Minggu</th>
                            <!-- <th>1</th>
							<th>2</th>
							<th>3</th>
							<th>4</th>
							<th>5</th>
							<th>6</th>
							<th>7</th>
							<th>8</th>
							<th>9</th>
							<th>10</th>
							<th>11</th>
							<th>12</th>
							<th>13</th>
							<th>14</th>
							<th>15</th>
							<th>16</th>
							<th>17</th>
							<th>18</th>
							<th>19</th>
							<th>20</th>
							<th>21</th>
							<th>22</th>
							<th>23</th>
							<th>24</th>
							<th>25</th>
							<th>26</th>
							<th>27</th>
							<th>28</th>
							<th>29</th>
							<th>30</th>
							<th>31</th>
							<th>32</th>
							<th>33</th>
							<th>34</th>
							<th>35</th>
							<th>36</th>
							<th>37</th>
							<th>38</th>
							<th>39</th>
							<th>40</th>
							<th>41</th>
							<th>42</th>
							<th>43</th>
							<th>44</th>
							<th>45</th>
							<th>46</th>
							<th>47</th>
							<th>48</th>
							<th>49</th>
							<th>50</th>
							<th>51</th>
							<th>52</th> -->
                            <th>Menu</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
                <!-- ./table -->
			</div>            
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
        <!-- END PAGE BASE CONTENT -->
    <!-- /form inputs -->
@endsection
@section('js')
<!-- <script src="{{asset('global_assets/scripts/datatable.js')}}" type="text/javascript"></script> -->
<script type="text/javascript" src="{{url('global_assets/plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('global_assets/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<!-- <script src="{{asset('global_assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script> -->
<script>
$(document).ready(function () {
//    alert('aa');
    $('#tabel').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('jadwalkerja::jadwalkerja-data') }}",
        "columns": [    
            // {data: 'id'},        
            {data: 'nama_aset', name: 'nama_aset', defaultContent: '-'},
            {data: 'name', name: 'name', defaultContent: '-'},
            {data: 'minggu', name: 'minggu', defaultContent: '-'},
           /*  {data: 'x1', name: 'x1', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x2', name: 'x2', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x3', name: 'x3', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x4', name: 'x4', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x5', name: 'x5', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x6', name: 'x6', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x7', name: 'x7', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x8', name: 'x8', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x9', name: 'x9', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x10', name: 'x10', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x11', name: 'x11', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x12', name: 'x12', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x13', name: 'x13', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x14', name: 'x14', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x15', name: 'x15', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x16', name: 'x16', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x17', name: 'x17', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x18', name: 'x18', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x19', name: 'x19', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x20', name: 'x20', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x21', name: 'x21', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x22', name: 'x22', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x23', name: 'x23', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x24', name: 'x24', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x25', name: 'x25', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x26', name: 'x26', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x27', name: 'x27', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x28', name: 'x28', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x29', name: 'x29', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x30', name: 'x30', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x31', name: 'x31', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x32', name: 'x32', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x33', name: 'x33', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x34', name: 'x34', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x35', name: 'x35', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x36', name: 'x36', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x37', name: 'x37', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x38', name: 'x38', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x39', name: 'x39', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x40', name: 'x40', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x41', name: 'x41', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x42', name: 'x42', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x43', name: 'x43', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x44', name: 'x44', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x45', name: 'x45', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x46', name: 'x46', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x47', name: 'x47', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x48', name: 'x48', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x49', name: 'x49', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x50', name: 'x50', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x51', name: 'x51', defaultContent: '-', orderable: false, searchable: false},
			{data: 'x52', name: 'x52', defaultContent: '-', orderable: false, searchable: false}, */
            {data: 'menu', orderable: false, searchable: false}
        ],
        "order": [[0, 'asc']],
        "autoWidth": false,
        "scrollX": true,
        "dom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
        "pagingType": "simple_numbers",
        "language": {
            search: '<span>Filter:</span> _INPUT_',
            searchPlaceholder: 'Type to filter...',
            lengthMenu: '<span>Show:</span> _MENU_',
            paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
        }
    });
	
	
	$(".select2").select2();
	
	$('#instalasi').change(function() {
        if ($(this).val() != '') {            
            $('#tabel').DataTable().ajax.url("{{ route('jadwalkerja::jadwalkerja-data') }}?instalasi=" + $(this).val()).load();
			
			$('#lokasi').empty();
			$('#lokasi').append('<option value="">Semua Lokasi</option>');
			
			if ($(this).val() != '') {
				console.log($(this).val());
				var url = "{{ route('jadwalkerja::lokasi-select') }}?instalasi=" + $(this).val();
				console.log(url);
				$.ajax({
					type: "get",
					url: url,
					success: function(result) {
						console.log(result.template);
						// $('#asset').append(result.data);
						$('#lokasi').append(result.template);
					}
				})
			}
			
        }else{
			$('#tabel').DataTable().ajax.url("{{ route('jadwalkerja::jadwalkerja-data') }}").load();
		}
    });
	
	$('#lokasi').change(function() {
		instalasi = $('#instalasi').val();
		if ($(this).val() != '') {       
			console.log($(this).val());
            $('#tabel').DataTable().ajax.url("{{ route('jadwalkerja::jadwalkerja-data') }}?instalasi=" + instalasi + "&lokasi=" + $(this).val()).load();
			
        }else{
			$('#tabel').DataTable().ajax.url("{{ route('jadwalkerja::jadwalkerja-data') }}?instalasi=" +instalasi).load();
		}
	});
});
</script>
@endsection