173 lines
7.3 KiB
PHP
173 lines
7.3 KiB
PHP
@extends('layouts.master')
|
|
|
|
@section('content')
|
|
<div class="card shadow-sm">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 font-weight-bold">{{ $title }}</h5>
|
|
<a href="{{ route($route.'.create') }}" class="btn btn-primary float-right">Upload</a>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
<div class="row">
|
|
<div class="col-md-2 pr-1" id="inventoryYearContainer">
|
|
<div class="form-group">
|
|
<label for="inventoryYear">Filter Tahun Inventory:</label>
|
|
<div class="input-group">
|
|
<select name="inventoryYear" id="inventoryYear" class="form-control">
|
|
@for ($year = date('Y'); $year >= 2000; $year--)
|
|
<option value="{{ $year }}"
|
|
{{ request('inventoryYear', date('Y')) == $year ? 'selected' : '' }}>
|
|
{{ $year }}
|
|
</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 pr-1" id="sectorContainer">
|
|
<div class="form-group">
|
|
<label for="sector">Filter Sektor:</label>
|
|
<select id="sector" name="sector" class="form-control">
|
|
<option value="">SEMUA SEKTOR</option>
|
|
@foreach ($sectors as $sector)
|
|
<option value="{{ $sector->code }}"
|
|
{{ request('sector', null) == $sector->code ? 'selected' : '' }}>
|
|
{{ $sector->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub-Sector Filter (Container hidden initially) -->
|
|
<div class="col-md-2 pr-1" id="subSectorContainer" style="visibility: hidden; height: 0;">
|
|
<div class="form-group">
|
|
<label for="subSector">Filter Sub Sektor:</label>
|
|
<select id="subSector" name="subSector" class="form-control w-100">
|
|
<option value="">SEMUA SUB SEKTOR</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table w-100"
|
|
data-search="true"
|
|
data-toggle="table"
|
|
data-pagination="true"
|
|
data-toolbar="#toolbar"
|
|
data-show-refresh="false"
|
|
data-url="{{route($route.'.grid')}}"
|
|
data-ajax-options='{"xhrFields": {"withCredentials": true}}'
|
|
data-sort-name="ids"
|
|
data-sort-order="desc"
|
|
data-page-size="10"
|
|
data-id-field="id"
|
|
id="grid-data">
|
|
<thead class="table-primary text-primary">
|
|
<tr>
|
|
<th data-width="150" data-field="action">#</th>
|
|
<th data-field="sector">Sektor</th>
|
|
<th data-field="inventory_year">Tahun Inventory</th>
|
|
<th data-field="name">Judul</th>
|
|
<th data-field="agency">Instansi</th>
|
|
<th data-field="file">File</th>
|
|
<th data-field="created_at">Tgl Upload</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('js')
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#sector').select2({
|
|
placeholder: 'Pilih Kategori',
|
|
allowClear: true
|
|
});
|
|
$('#subSector').select2({
|
|
placeholder: 'Pilih Sub Sektor',
|
|
allowClear: true
|
|
});
|
|
$('#inventoryYear').select2({
|
|
placeholder: 'Pilih Tahun',
|
|
});
|
|
|
|
var table = $('#data-table');
|
|
|
|
// Handle sector change and fetch sub-sectors dynamically
|
|
$('#sector').on('change', function() {
|
|
var sectorCode = $(this).val();
|
|
fetchSubSectors(sectorCode);
|
|
table.draw();
|
|
});
|
|
|
|
// Handle sub-sector change
|
|
$('#subSector').on('change', function() {
|
|
table.draw();
|
|
});
|
|
|
|
// Handle inventory year change
|
|
$('#inventoryYear').on('change', function() {
|
|
table.draw();
|
|
});
|
|
|
|
// Function to fetch sub-sectors based on the selected sector
|
|
function fetchSubSectors(sectorCode) {
|
|
$('#subSector').empty().append('<option value="">SEMUA SUB SEKTOR</option>').addClass('form-control');
|
|
|
|
if (sectorCode) {
|
|
$.ajax({
|
|
url: '{{ route('modules.subsectors.fetch') }}', // Define route to fetch sub-sectors
|
|
method: 'GET',
|
|
data: {
|
|
sector_code: sectorCode
|
|
},
|
|
success: function(data) {
|
|
if (data.length > 0) {
|
|
// Make the sub-sector container visible while keeping layout intact
|
|
$('#subSectorContainer').css({
|
|
'visibility': 'visible',
|
|
'height': 'auto'
|
|
});
|
|
|
|
$.each(data, function(index, subSector) {
|
|
$('#subSector').append('<option value="' + subSector.code +
|
|
'">' + subSector.name + '</option>');
|
|
});
|
|
|
|
// Reinitialize select2 for sub-sector after data is appended
|
|
$('#subSector').select2({
|
|
placeholder: 'Pilih Sub Sektor',
|
|
allowClear: true
|
|
});
|
|
} else {
|
|
// Hide the sub-sector container if no data
|
|
$('#subSectorContainer').css({
|
|
'visibility': 'hidden',
|
|
'height': '0'
|
|
});
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error fetching sub-sectors.');
|
|
}
|
|
});
|
|
} else {
|
|
// Hide sub-sector if no sector is selected
|
|
$('#subSectorContainer').css({
|
|
'visibility': 'hidden',
|
|
'height': '0'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|