Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard pasar

Browse Source
This commit is contained in:
Syaharani
2026-10-21 10:14:49 +07:00
parent 4ab745cfe5
commit 013cb7b728
4 changed files with 1039 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/pasar.blade.php
+475 -63
View File
@@ -3,12 +3,12 @@
@push('style')
<style>
.pasar-filter-card .filter-item {
min-width: 210px;
min-width: 190px;
}
.pasar-kpi-value {
color: var(--bs-heading-color);
font-size: 1.85rem;
font-size: 1.6rem;
font-weight: 600;
line-height: 1.2;
overflow-wrap: anywhere;
@@ -25,14 +25,103 @@
line-height: 1.4;
}
.pasar-empty-state {
min-height: 220px;
.chart-group-header-toggle {
cursor: pointer;
background-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.08);
border-inline-start: 4px solid var(--bs-primary, #9D8EF0);
box-shadow: none;
transition: background-color 0.2s ease;
}
.chart-group-header-toggle:hover {
background-color: rgba(var(--bs-primary-rgb, 115, 103, 240), 0.13);
}
.chart-group-header-toggle .card-body {
padding: 12px 16px;
}
.chart-group-header-toggle h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 2px;
}
.chart-group-header-toggle:focus-visible {
outline: 2px solid var(--bs-primary);
outline-offset: 3px;
}
.chart-group-icon-toggle {
width: 34px;
height: 34px;
flex-shrink: 0;
}
.chart-group-icon-toggle .icon-base {
font-size: 24px;
width: 24px;
height: 24px;
}
.chart-group-panel.show,
.chart-group-panel.collapsing {
margin-bottom: 1.5rem;
}
.pasar-chart-card .card-title h5 {
color: var(--bs-heading-color);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0;
}
.pasar-chart-card .card-title small,
.chart-group-header-toggle p {
font-size: 0.8125rem;
line-height: 1.4;
}
.pasar-chart {
min-height: 330px;
}
.pasar-chart-empty {
min-height: 330px;
display: flex;
align-items: center;
justify-content: center;
color: var(--bs-secondary-color);
font-size: 0.8125rem;
text-align: center;
}
.pasar-chart-card .apexcharts-tooltip {
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
white-space: normal;
max-width: 260px;
}
.pasar-chart-tooltip {
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
}
.pasar-trend-tooltip-row {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 6px;
}
@media (max-width: 575.98px) {
.pasar-filter-card .filter-item {
width: 100%;
@@ -47,35 +136,6 @@
<form id="form-filter" class="col-12" method="GET" action="{{ route('dashboard.pasar') }}">
<div class="card card-border-shadow-primary pasar-filter-card">
<div class="card-body py-3">
<div class="d-flex align-items-center gap-2 flex-wrap">
<div class="d-flex align-items-center me-2">
<i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
<span class="fw-medium">Komoditas <span class="text-danger">*</span></span>
</div>
<div class="filter-item">
<select id="filter-komoditas" class="form-select form-select-sm" name="komoditas_id">
<option value="">Pilih Komoditas</option>
@foreach ($komoditas as $item)
<option value="{{ $item->id }}" {{ old('komoditas_id', $komoditas_id) == $item->id ? 'selected' : '' }}>
{{ $item->nama }}
</option>
@endforeach
</select>
</div>
<button type="submit" class="btn btn-outline-secondary btn-sm">
<i class="icon-base ti tabler-filter me-1"></i>
Filter
</button>
<button type="button" id="btn-reset-dashboard-filter" class="btn btn-outline-secondary btn-sm">
<i class="icon-base ti tabler-refresh me-1"></i>
Reset
</button>
</div>
<hr class="my-3">
<div class="d-flex align-items-center gap-2 flex-wrap">
<div class="d-flex align-items-center me-2">
<i class="icon-base ti tabler-map-2 me-2"></i>
@@ -111,39 +171,57 @@
</select>
</div>
</div>
<hr class="my-3">
<div class="d-flex align-items-center gap-2 flex-wrap">
<div class="d-flex align-items-center me-2">
<i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
<span class="fw-medium">Data</span>
</div>
<div class="filter-item">
<select id="filter-komoditas" class="form-select form-select-sm" name="komoditas_id">
<option value="">Semua Komoditas</option>
@foreach ($komoditas as $item)
<option value="{{ $item->id }}" {{ old('komoditas_id', $komoditas_id) == $item->id ? 'selected' : '' }}>
{{ $item->nama }}
</option>
@endforeach
</select>
</div>
<div class="filter-item">
<select id="filter-segmen" class="form-select form-select-sm" name="segmen">
<option value="">Semua Segmen</option>
@foreach ($segments as $segment)
<option value="{{ $segment['name'] }}" {{ old('segmen', $segmen) == $segment['name'] ? 'selected' : '' }}>
{{ $segment['name'] }}
</option>
@endforeach
</select>
</div>
<button type="submit" class="btn btn-outline-secondary btn-sm">
<i class="icon-base ti tabler-filter me-1"></i>
Filter
</button>
<button type="button" id="btn-reset-dashboard-filter" class="btn btn-outline-secondary btn-sm">
<i class="icon-base ti tabler-refresh me-1"></i>
Reset
</button>
</div>
</div>
</div>
</form>
</div>
@if (! $selectedKomoditas)
<div class="alert alert-primary d-flex align-items-start gap-3" role="alert">
<i class="icon-base ti tabler-info-circle mt-1"></i>
<div>
<h6 class="alert-heading mb-1">Pilih komoditas terlebih dahulu</h6>
<div>Data dashboard pasar baru akan ditampilkan setelah filter komoditas wajib diisi.</div>
</div>
</div>
<div class="card">
<div class="card-body pasar-empty-state">
<div>
<div class="avatar avatar-lg mx-auto mb-3">
<span class="avatar-initial rounded bg-label-primary">
<i class="icon-base ti tabler-building-store icon-28px"></i>
</span>
</div>
<h5 class="mb-1">Belum ada data pasar yang ditampilkan</h5>
<p class="text-body-secondary mb-0">Gunakan filter komoditas untuk melihat harga jual rata-rata.</p>
</div>
</div>
</div>
@else
<div class="row g-4 mb-4">
<div class="col-xl-4 col-md-6">
<div class="row g-4 mb-4">
@foreach ($priceCards as $priceCard)
<div class="col-12 col-md-6 col-xl-3">
<div class="card card-border-shadow-{{ $priceCard['variant'] }} h-100">
<div class="card-body">
<div class="d-flex align-items-center gap-4">
<div class="d-flex flex-column align-items-start gap-3">
<div class="avatar avatar-lg">
<span class="avatar-initial rounded bg-label-{{ $priceCard['variant'] }}">
<i class="icon-base ti {{ $priceCard['icon'] }} icon-28px"></i>
@@ -161,15 +239,125 @@
</div>
</div>
<div class="mt-4 pt-3 border-top d-flex align-items-center justify-content-between gap-3">
<span class="badge bg-label-success">{{ $priceCard['caption'] }}</span>
<div class="mt-4 pt-3 border-top d-flex align-items-center justify-content-between gap-2 flex-wrap">
<span class="badge bg-label-{{ $priceCard['variant'] }}">{{ $priceCard['records'] > 0 ? 'Rata-rata harga' : 'Belum ada data' }}</span>
<small class="text-body-secondary">{{ number_format($priceCard['records'], 0, ',', '.') }} data harga</small>
</div>
</div>
</div>
</div>
@endforeach
</div>
<div class="card chart-group-header-toggle mb-4" role="button" tabindex="0"
data-bs-toggle="collapse" data-bs-target="#saluran-harga-charts"
aria-expanded="false" aria-controls="saluran-harga-charts" aria-label="Tampilkan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Saluran &amp; Harga</h5>
<p class="mb-0 text-body-secondary">Saluran penjualan, hubungan dengan pembeli, waktu penjualan, akses ke saluran alternatif, dan tren harga.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-down"></i>
</span>
</div>
@endif
</div>
@php
$chartDefinitions = [
'saluranPenjualan' => ['title' => 'Saluran Penjualan Utama', 'description' => 'Kepada siapa petani biasanya menjual hasil panen?', 'variant' => 'success'],
'hubunganPembeli' => ['title' => 'Sifat Hubungan dengan Pembeli', 'description' => 'Hubungan jual petani dengan pembeli utama saat ini.', 'variant' => 'primary'],
'waktuPenjualan' => ['title' => 'Waktu Penjualan Hasil Panen', 'description' => 'Kapan petani biasanya menjual hasil panen?', 'variant' => 'warning'],
'aksesSaluranLain' => ['title' => 'Pengalaman & Akses ke Saluran Lain', 'description' => 'Pengalaman menjual ke tempat lain dan akses yang masih dimiliki.', 'variant' => 'info'],
];
@endphp
<div class="collapse chart-group-panel" id="saluran-harga-charts">
<div class="row g-4 mb-4">
@foreach ($chartDefinitions as $key => $definition)
<div class="col-12 col-lg-6">
<div class="card pasar-chart-card h-100">
<div class="card-header d-flex align-items-start justify-content-between gap-2">
<div class="card-title mb-0">
<h5 class="m-0 me-2" id="title-{{ $key }}">{{ $definition['title'] }}</h5>
<small class="text-body-secondary">{{ $definition['description'] }}</small>
</div>
</div>
<div class="card-body d-flex flex-column">
<div id="chart-{{ $key }}" class="pasar-chart" role="img" aria-labelledby="title-{{ $key }}" aria-describedby="summary-{{ $key }}"></div>
<span id="summary-{{ $key }}" class="visually-hidden">
@foreach ($marketCharts[$key]['labels'] as $index => $label)
{{ $label }}: {{ $marketCharts[$key]['series'][$index] }} responden ({{ $marketCharts[$key]['percentages'][$index] }}%).
@endforeach
</span>
</div>
</div>
</div>
@endforeach
@forelse ($priceTrend['commodities'] as $commodity)
<div class="col-12 col-lg-6">
<div class="card pasar-chart-card h-100">
<div class="card-header">
<div class="card-title mb-0">
<h5 class="m-0 me-2" id="title-tren-harga-{{ $commodity['id'] }}">Tren Harga 3 Musim — {{ $commodity['name'] }}</h5>
<small class="text-body-secondary">Rata-rata harga jual per bentuk produk selama tiga periode panen (Rp/kg).</small>
</div>
</div>
<div class="card-body">
<div id="chart-tren-harga-{{ $commodity['id'] }}" class="pasar-chart" role="img" aria-labelledby="title-tren-harga-{{ $commodity['id'] }}" aria-describedby="summary-tren-harga-{{ $commodity['id'] }}"></div>
<span id="summary-tren-harga-{{ $commodity['id'] }}" class="visually-hidden"></span>
</div>
</div>
</div>
@empty
<div class="col-12">
<div class="card pasar-chart-card">
<div class="card-header">
<div class="card-title mb-0"><h5 class="m-0">Tren Harga 3 Musim</h5></div>
</div>
<div class="card-body pasar-chart-empty">Belum ada komoditas untuk filter yang dipilih.</div>
</div>
</div>
@endforelse
</div>
</div>
<div class="card chart-group-header-toggle mb-4" role="button" tabindex="0"
data-bs-toggle="collapse" data-bs-target="#kesiapan-premium-charts"
aria-expanded="false" aria-controls="kesiapan-premium-charts" aria-label="Tampilkan chart">
<div class="card-body d-flex justify-content-between align-items-center gap-3">
<div>
<h5>Kesiapan Pasar Premium</h5>
<p class="mb-0 text-body-secondary">Kesadaran petani tentang pasar premium, persyaratan masuk, dan pengalaman mengaksesnya.</p>
</div>
<span class="btn btn-icon btn-label-secondary btn-sm chart-group-icon-toggle" aria-hidden="true">
<i class="icon-base ti tabler-chevron-down"></i>
</span>
</div>
</div>
<div class="collapse chart-group-panel" id="kesiapan-premium-charts">
<div class="row g-4 mb-4">
<div class="col-12">
<div class="card pasar-chart-card">
<div class="card-header">
<div class="card-title mb-0">
<h5 class="m-0 me-2" id="title-kesadaranPremium">Kesadaran Pasar Premium</h5>
<small class="text-body-secondary">Pengetahuan tentang pasar premium dan persyaratan yang dibutuhkan untuk masuk ke pasar tersebut.</small>
</div>
</div>
<div class="card-body">
<div id="chart-kesadaranPremium" class="pasar-chart" role="img" aria-labelledby="title-kesadaranPremium" aria-describedby="summary-kesadaranPremium"></div>
<span id="summary-kesadaranPremium" class="visually-hidden">
@foreach ($premiumAwareness['fullLabels'] as $index => $label)
{{ $label }}: {{ $premiumAwareness['series'][$index] }} responden ({{ $premiumAwareness['percentages'][$index] }}%).
@endforeach
</span>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@@ -177,6 +365,230 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
const wilayah = @json($wilayah);
const marketCharts = @json($marketCharts);
const chartDefinitions = @json($chartDefinitions);
const priceTrend = @json($priceTrend);
const premiumAwareness = @json($premiumAwareness);
function escapeHtml(value) {
const element = document.createElement('span');
element.textContent = String(value);
return element.innerHTML;
}
function formatNumber(value, digits = 0) {
return Number(value).toLocaleString('id-ID', { maximumFractionDigits: digits });
}
const compactLabels = {
saluranPenjualan: ['Tengkulak/pedagang lokal', 'Koperasi', 'BUMDes', 'Pembeli langsung/eksportir', 'Lainnya'],
waktuPenjualan: ['Langsung setelah panen', 'Ditumpuk beberapa waktu', 'Saat butuh uang mendesak'],
aksesSaluranLain: ['Tidak pernah', 'Berhenti, tanpa akses', 'Berhenti, bisa kembali', 'Sesekali masih menjual', 'Akses alternatif aktif'],
kesadaranPremium: ['Belum pernah mendengar', 'Belum paham persyaratan', 'Sedikit paham persyaratan', 'Paham, belum mengakses', 'Akses premium konsisten'],
};
const mobileLabels = {
saluranPenjualan: ['Tengkulak/lokal', 'Koperasi', 'BUMDes', 'Pembeli/eksportir', 'Lainnya'],
hubunganPembeli: ['Bebas pindah', 'Langganan tetap', 'Berbasis hutang', 'Titip jual', 'Komitmen volume', 'Semi-kontrak'],
waktuPenjualan: ['Setelah panen', 'Ditumpuk dulu', 'Uang mendesak'],
aksesSaluranLain: ['Tidak pernah', 'Tanpa akses', 'Bisa kembali', 'Sesekali jual', 'Akses aktif'],
kesadaranPremium: ['Belum mendengar', 'Belum paham syarat', 'Sedikit paham', 'Paham, belum akses', 'Akses konsisten'],
};
function hasTrendData(commodity) {
return commodity && commodity.series.some(function (series) {
return series.data.some(function (value) { return value !== null && Number(value) > 0; });
});
}
function formatPrice(value) {
return value === null || value === undefined ? 'Belum ada data' : 'Rp ' + formatNumber(value) + '/kg';
}
function renderPriceTrend(commodity) {
const element = document.getElementById('chart-tren-harga-' + commodity.id);
const summary = document.getElementById('summary-tren-harga-' + commodity.id);
if (!hasTrendData(commodity) || typeof ApexCharts === 'undefined') {
element.classList.add('pasar-chart-empty');
element.textContent = !hasTrendData(commodity)
? 'Belum ada data harga untuk komoditas dan filter yang dipilih.'
: 'Chart belum dapat dimuat. Silakan muat ulang halaman.';
return;
}
summary.textContent = commodity.name + '. ' + commodity.series.map(function (series) {
return series.name + ': ' + series.data.map(function (value, index) {
return priceTrend.periods[index] + ' ' + formatPrice(value);
}).join(', ');
}).join('. ');
const colors = config.chartColors.series.slice(0, 4);
const labelStyle = { colors: config.colors.bodyColor, fontSize: '12px', fontFamily: config.fontFamily };
new ApexCharts(element, {
chart: { type: 'line', height: 360, fontFamily: config.fontFamily, foreColor: config.colors.bodyColor, toolbar: { show: false }, zoom: { enabled: false } },
series: commodity.series,
colors: colors,
stroke: { width: 3, curve: 'straight' },
markers: { size: 5, strokeWidth: 2, hover: { sizeOffset: 2 } },
dataLabels: { enabled: false },
xaxis: {
categories: priceTrend.periods,
tickPlacement: 'between',
labels: { rotate: 0, style: labelStyle },
axisBorder: { color: config.chartColors.grid },
axisTicks: { color: config.chartColors.grid },
},
yaxis: {
min: 0,
title: { text: 'Harga (Rp/kg)', style: { color: config.colors.bodyColor, fontFamily: config.fontFamily, fontWeight: 400 } },
labels: { style: labelStyle, formatter: function (value) { return formatNumber(value); } },
},
grid: { borderColor: config.chartColors.grid, strokeDashArray: 4, padding: { left: 8, right: 20 } },
legend: { position: 'bottom', fontSize: '13px', fontFamily: config.fontFamily, labels: { colors: config.colors.bodyColor }, itemMargin: { horizontal: 12, vertical: 6 } },
tooltip: {
shared: true,
intersect: false,
custom: function ({ dataPointIndex }) {
const rows = commodity.series.map(function (series, index) {
return `<div class="pasar-trend-tooltip-row"><span style="color:${colors[index]}">${escapeHtml(series.name)}</span><strong>${formatPrice(series.data[dataPointIndex])}</strong></div>`;
}).join('');
return `<div class="pasar-chart-tooltip" style="background:${config.colors.cardColor};color:${config.colors.headingColor}"><strong>${escapeHtml(commodity.name)} — ${escapeHtml(priceTrend.periods[dataPointIndex])}</strong>${rows}</div>`;
},
},
responsive: [{
breakpoint: 576,
options: {
chart: { height: 420 },
legend: { fontSize: '12px', itemMargin: { horizontal: 6, vertical: 4 } },
xaxis: {
labels: {
hideOverlappingLabels: false,
style: { fontSize: '11px' },
formatter: function (value) {
return { 'Dua Tahun Lalu': '2 thn lalu', 'Tahun Lalu': 'Tahun lalu', 'Panen Terakhir': 'Terakhir' }[value] || value;
},
},
},
yaxis: {
title: { text: undefined },
labels: { style: { fontSize: '11px' }, formatter: function (value) { return formatNumber(value); } },
},
},
}],
}).render();
}
function renderResponseChart(key, data, definition) {
const element = document.getElementById('chart-' + key);
if (!data.respondents || typeof ApexCharts === 'undefined') {
element.classList.add('pasar-chart-empty');
element.textContent = !data.respondents
? 'Belum ada data jawaban untuk filter yang dipilih.'
: 'Chart belum dapat dimuat. Silakan muat ulang halaman.';
return;
}
const color = config.chartColors.semantic[definition.variant];
const borderColor = config.chartColors.grid;
const labelStyle = { colors: config.colors.bodyColor, fontSize: '12px', fontFamily: config.fontFamily };
const maxCount = Math.max(...data.series);
const tickCount = Math.min(4, maxCount);
const axisMax = Math.ceil(maxCount * 1.25 / tickCount) * tickCount;
new ApexCharts(element, {
chart: { type: 'bar', height: 330, fontFamily: config.fontFamily, foreColor: config.colors.bodyColor, toolbar: { show: false } },
series: [{ name: 'Responden', data: data.series }],
colors: [color],
plotOptions: { bar: { horizontal: true, borderRadius: 5, barHeight: '62%', dataLabels: { position: 'top' } } },
dataLabels: {
enabled: true,
textAnchor: 'start',
offsetX: 6,
style: { fontSize: '12px', fontFamily: config.fontFamily, fontWeight: 500, colors: [config.colors.headingColor] },
formatter: function (value, options) {
return `${formatNumber(value)} (${formatNumber(data.percentages[options.dataPointIndex], 1)}%)`;
},
},
xaxis: {
categories: compactLabels[key] || data.labels,
min: 0,
max: axisMax,
tickAmount: tickCount,
labels: { style: labelStyle, formatter: function (value) { return formatNumber(value); } },
axisBorder: { color: borderColor },
axisTicks: { color: borderColor },
},
yaxis: { labels: { maxWidth: 185, style: labelStyle } },
grid: { borderColor: borderColor, strokeDashArray: 4, padding: { right: 20 } },
legend: { show: false },
tooltip: {
theme: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light',
custom: function ({ dataPointIndex }) {
return `<div class="pasar-chart-tooltip" style="background:${color};color:${config.colors.headingColor};font-family:${config.fontFamily}">${escapeHtml(data.fullLabels[dataPointIndex])}: <strong>${formatNumber(data.series[dataPointIndex])} responden (${formatNumber(data.percentages[dataPointIndex], 1)}%)</strong></div>`;
},
},
responsive: [{
breakpoint: 576,
options: {
xaxis: { categories: mobileLabels[key], tickAmount: 2 },
yaxis: { labels: { maxWidth: 125, style: { fontSize: '11px' } } },
grid: { padding: { right: 10 } },
dataLabels: { style: { fontSize: '11px' }, formatter: function (value) { return formatNumber(value); } },
},
}],
}).render();
}
function renderMarketCharts() {
Object.entries(marketCharts).forEach(function ([key, data]) {
renderResponseChart(key, data, chartDefinitions[key]);
});
priceTrend.commodities.forEach(renderPriceTrend);
}
function setupChartPanel(panelId, renderCharts) {
const chartPanel = document.getElementById(panelId);
const chartControl = document.querySelector('.chart-group-header-toggle[aria-controls="' + chartPanel.id + '"]');
const chartIcon = chartControl.querySelector('.chart-group-icon-toggle i');
let rendered = false;
function syncChartPanelState() {
const expanded = chartPanel.classList.contains('show');
const label = expanded ? 'Sembunyikan chart' : 'Tampilkan chart';
chartControl.setAttribute('aria-expanded', String(expanded));
chartControl.setAttribute('aria-label', label);
chartControl.title = label;
chartIcon.classList.toggle('tabler-chevron-up', expanded);
chartIcon.classList.toggle('tabler-chevron-down', !expanded);
}
chartControl.addEventListener('keydown', function (event) {
if (event.target !== chartControl || !['Enter', ' '].includes(event.key)) return;
event.preventDefault();
chartControl.click();
});
chartPanel.addEventListener('shown.bs.collapse', function (event) {
if (event.target !== chartPanel) return;
syncChartPanelState();
if (!rendered) {
renderCharts();
rendered = true;
}
window.dispatchEvent(new Event('resize'));
});
chartPanel.addEventListener('hidden.bs.collapse', function (event) {
if (event.target === chartPanel) syncChartPanelState();
});
syncChartPanelState();
}
setupChartPanel('saluran-harga-charts', renderMarketCharts);
setupChartPanel('kesiapan-premium-charts', function () {
renderResponseChart('kesadaranPremium', premiumAwareness, { variant: 'primary' });
});
function fillSelect($select, items, placeholder) {
$select.empty().append(new Option(placeholder, ''));
@@ -208,7 +620,7 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
$('#filter-provinsi, #filter-kabkota, #filter-kecamatan, #filter-desa, #filter-komoditas').select2({ width: '100%' });
$('#filter-provinsi, #filter-kabkota, #filter-kecamatan, #filter-desa, #filter-komoditas, #filter-segmen').select2({ width: '100%' });
$('#filter-provinsi').on('change', function () {
const provinsi = selectedProvinsi();
resources/views/produktivitas/petani/akses-pasar/index.blade.php
+51 -52
View File
@@ -31,12 +31,12 @@
<div class="card mb-6">
<div class="card-body pt-12">
<h5 class="pb-3 border-bottom mb-4">Saluran Penjualan & Akses Pasar</h5>
<h5 class="pb-4 border-bottom mb-4">Saluran Penjualan & Akses Pasar</h5>
<h6 class="fw-bold text-dark mb-2">Saluran Penjualan Utama</h6>
<h5 class="mb-4 mt-4">Saluran Penjualan Utama</h5>
<div class="mb-4">
<label class="form-label fw-semibold">Kepada siapa Bapak/Ibu biasanya menjual hasil panen? (boleh pilih lebih dari satu)</label>
<div class="row g-2">
<p class="form-label d-block">Kepada siapa Bapak/Ibu biasanya menjual hasil panen? (boleh pilih lebih dari satu)</p>
<div class="row">
@php
$tujuanOptions = ['Tengkulak/pedagang lokal', 'Koperasi', 'BUMDes', 'Langsung ke pembeli/eksportir'];
@endphp
@@ -55,16 +55,16 @@
<input class="form-check-input" type="checkbox" name="tujuan_penjualan[]" value="Lainnya" id="tujuan-lainnya" {{ in_array('Lainnya', (array) old('tujuan_penjualan', $aksesPasar?->tujuan_penjualan ?? []), true) ? 'checked' : '' }}>
<label class="form-check-label" for="tujuan-lainnya">Lainnya:</label>
</div>
<input type="text" class="form-control form-control-sm w-auto flex-grow-1 max-w-400" style="max-width: 400px;" name="tujuan_penjualan_lainnya" value="{{ old('tujuan_penjualan_lainnya', $aksesPasar?->tujuan_penjualan_lainnya) }}" placeholder="Sebutkan lainnya...">
<input type="text" class="form-control w-auto flex-grow-1 max-w-400" style="max-width: 400px;" name="tujuan_penjualan_lainnya" value="{{ old('tujuan_penjualan_lainnya', $aksesPasar?->tujuan_penjualan_lainnya) }}" placeholder="Sebutkan lainnya...">
</div>
</div>
</div>
</div>
<h6 class="fw-bold text-dark mt-4 mb-2">Sifat Hubungan dengan Pembeli</h6>
<h5 class="mb-4 mt-4">Sifat Hubungan Dengan Pembeli</h5>
<div class="mb-4">
<label class="form-label fw-semibold">Bagaimana sifat hubungan jual Bapak/Ibu dengan pembeli utama saat ini?</label>
<div class="row g-2">
<p class="form-label d-block">Bagaimana sifat hubungan jual Bapak/Ibu dengan pembeli utama saat ini?</p>
<div class="row">
@php
$sifatHubunganOptions = [
'Bebas, bisa pindah pembeli kapan saja',
@@ -86,10 +86,10 @@
</div>
</div>
<h6 class="fw-bold text-dark mt-4 mb-2">Bentuk Produk yang Dijual</h6>
<h5 class="mb-4 mt-4">Bentuk Produk Yang Dijual</h5>
<div class="mb-4">
<label class="form-label fw-semibold">Dalam bentuk apa produk dijual?</label>
<div class="row g-2">
<p class="form-label d-block">Dalam bentuk apa produk dijual?</p>
<div class="row">
@php
$bentukPenjualanOptions = [
'Buah segar hasil petik (gelondongan)',
@@ -109,10 +109,10 @@
</div>
</div>
<h6 class="fw-bold text-dark mt-4 mb-2">Frekuensi Penjualan</h6>
<h5 class="mb-4 mt-4">Frekuensi Penjualan</h5>
<div class="mb-4">
<label class="form-label fw-semibold">Kapan biasanya menjual hasil panen?</label>
<div class="d-flex flex-column gap-2">
<p class="form-label d-block">Kapan biasanya menjual hasil panen?</p>
<div class="d-flex flex-column">
@php
$frekuensiOptions = [
'Langsung setelah panen',
@@ -121,20 +121,19 @@
];
@endphp
@foreach($frekuensiOptions as $freq)
<div class="form-check mb-1">
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="frekuensi_penjualan" value="{{ $freq }}" id="freq-{{ Str::slug($freq) }}" {{ old('frekuensi_penjualan', $aksesPasar?->frekuensi_penjualan) === $freq ? 'checked' : '' }}>
<label class="form-check-label" for="freq-{{ Str::slug($freq) }}">{{ $freq }}</label>
</div>
@endforeach
</div>
</div>
<hr class="my-4">
<h5 class="pb-3 border-bottom mb-4">Pengalaman Saluran Lain</h5>
<h5 class="pb-4 border-bottom mb-4 mt-4">Pengalaman Saluran Lain</h5>
<div class="row">
<div class="col-md-12 mb-4 form-control-validation">
<label class="form-label d-block fw-bold">Apakah pernah menjual ke tempat lain sebelumnya?</label>
<label class="form-label d-block">Apakah pernah menjual ke tempat lain sebelumnya?</label>
@foreach($skorPengalamanOptions as $option)
<div class="form-check mb-2">
<input class="form-check-input @error('skor_pengalaman') is-invalid @enderror" type="radio"
@@ -158,8 +157,8 @@
<div class="col-md-6 mb-4"></div>
<div class="col-md-12 mb-4 form-control-validation">
<label class="form-label d-block mb-2" for="saluran-terdahulu">Jika pernah, dulu menjual ke mana? (boleh pilih lebih dari satu)</label>
<div class="row g-2">
<label class="form-label d-block" for="saluran-terdahulu">Jika pernah, dulu menjual ke mana? (boleh pilih lebih dari satu)</label>
<div class="row">
@foreach($saluranTerdahuluOptions as $option)
@if($option['value'] !== $saluranLainnyaValue)
<div class="col-md-6">
@@ -191,7 +190,7 @@
Lainnya:
</label>
</div>
<input type="text" class="form-control form-control-sm w-auto flex-grow-1 @error('saluran_terdahulu_lainnya') is-invalid @enderror" style="max-width: 400px;" id="saluran-lainnya" name="saluran_terdahulu_lainnya" value="{{ old('saluran_terdahulu_lainnya', $aksesPasar?->saluran_terdahulu_lainnya) }}" placeholder="Sebutkan saluran lainnya...">
<input type="text" class="form-control w-auto flex-grow-1 @error('saluran_terdahulu_lainnya') is-invalid @enderror" style="max-width: 400px;" id="saluran-lainnya" name="saluran_terdahulu_lainnya" value="{{ old('saluran_terdahulu_lainnya', $aksesPasar?->saluran_terdahulu_lainnya) }}" placeholder="Sebutkan saluran lainnya...">
</div>
</div>
</div>
@@ -203,10 +202,10 @@
</div>
</div>
<h5 class="pb-3 border-bottom mb-4 mt-4">HARGA DI SETIAP TITIK</h5>
<h6 class="mb-2">Harga Jual Panen Terakhir</h6>
<p class="mb-1">Harga jual komoditas tiga musim panen terakhir:</p>
<p class="mb-4">Dalam tiga musim panen terakhir, berapa harga jual yang Bapak/Ibu terima untuk komoditas ini sesuai dengan bentuk produk yang dijual?</p>
<h5 class="pb-4 border-bottom mb-4 mt-4">Harga Di Setiap Titik</h5>
<h5 class="mb-4 mt-4">Harga Jual Panen Terakhir</h5>
<p class="form-label d-block">Harga jual komoditas tiga musim panen terakhir:</p>
<p class="form-label d-block">Dalam tiga musim panen terakhir, berapa harga jual yang Bapak/Ibu terima untuk komoditas ini sesuai dengan bentuk produk yang dijual?</p>
<div class="table-responsive mb-4">
<table class="table table-bordered align-middle">
@@ -223,7 +222,7 @@
<tr>
<td>
<input type="hidden" name="harga_jual[{{ $row['index'] }}][bentuk_produk]" value="{{ $row['bentuk'] }}">
<strong>{{ $row['bentuk'] }}:</strong>
{{ $row['bentuk'] }}:
</td>
<td>
<div class="input-group">
@@ -252,12 +251,12 @@
</table>
</div>
<h6 class="fw-bold text-dark mt-4 mb-2">Sumber Informasi Harga</h6>
<div class="border rounded p-4 mb-4">
<h5 class="mb-4 mt-4">Sumber Informasi Harga</h5>
<div class="mb-4">
<div class="mb-4">
<label class="form-label fw-semibold">Sebelum menjual, apakah Bapak/Ibu sudah tahu harga yang akan diterima?</label>
<div class="row g-2">
<p class="form-label d-block">Sebelum menjual, apakah Bapak/Ibu sudah tahu harga yang akan diterima?</p>
<div class="row">
@php
$tahuHargaOptions = [
'Selalu tahu sebelum pergi jual',
@@ -279,8 +278,8 @@
</div>
<div class="mb-0">
<label class="form-label fw-semibold">Dari mana biasanya Bapak/Ibu tahu harga hasil panen sebelum menjual? (boleh pilih lebih dari satu)</label>
<div class="row g-2">
<p class="form-label d-block">Dari mana biasanya Bapak/Ibu tahu harga hasil panen sebelum menjual? (boleh pilih lebih dari satu)</p>
<div class="row">
@php
$sumberInfoHargaOptions = [
'Tengkulak/pedagang yang datang langsung',
@@ -311,7 +310,7 @@
<input class="form-check-input @error('sumber_info_harga') is-invalid @enderror" type="checkbox" name="sumber_info_harga[]" value="{{ $sumberInfoLainnyaValue }}" id="sumber-lainnya-checkbox" {{ in_array($sumberInfoLainnyaValue, (array) old('sumber_info_harga', $aksesPasar?->sumber_info_harga ?? []), true) ? 'checked' : '' }}>
<label class="form-check-label text-nowrap" for="sumber-lainnya-checkbox">Lainnya:</label>
</div>
<input type="text" class="form-control form-control-sm w-auto flex-grow-1 @error('sumber_info_harga_lainnya') is-invalid @enderror" style="max-width: 400px;" id="sumber-info-lainnya-input" name="sumber_info_harga_lainnya" value="{{ old('sumber_info_harga_lainnya', $aksesPasar?->sumber_info_harga_lainnya) }}" placeholder="Sebutkan sumber lainnya...">
<input type="text" class="form-control w-auto flex-grow-1 @error('sumber_info_harga_lainnya') is-invalid @enderror" style="max-width: 400px;" id="sumber-info-lainnya-input" name="sumber_info_harga_lainnya" value="{{ old('sumber_info_harga_lainnya', $aksesPasar?->sumber_info_harga_lainnya) }}" placeholder="Sebutkan sumber lainnya...">
</div>
</div>
</div>
@@ -321,18 +320,18 @@
</div>
<h5 class="pb-3 border-bottom mb-4 mt-4">PELUANG NILAI TAMBAH</h5>
<h5 class="pb-4 border-bottom mb-4 mt-4">Peluang Nilai Tambah</h5>
<div class="border rounded p-4 mb-4">
<div class="mb-4">
<div class="mb-4">
<h6 class="mb-1 text-primary">Detail Praktik Fermentasi</h6>
<p class="text-muted small mb-0">Apakah sudah ada praktik fermentasi atau pengolahan pascapanen yang Ibu/Bapak lakukan?</p>
<h5 class="mb-4 mt-4">Detail Praktik Fermentasi</h5>
<p class="form-label d-block">Apakah sudah ada praktik fermentasi atau pengolahan pascapanen yang Ibu/Bapak lakukan?</p>
</div>
<div class="row">
<div class="col-md-4 mb-4 form-control-validation d-flex flex-column">
<div class="mb-2 d-flex align-items-end">
<label class="form-label mb-0" for="praktik-fermentasi">Praktik fermentasi yang dilakukan</label>
<div class="d-flex align-items-end">
<label class="form-label" for="praktik-fermentasi">Praktik fermentasi yang dilakukan</label>
</div>
<div>
@foreach($praktikFermentasiOptions as $option)
@@ -353,8 +352,8 @@
</div>
<div class="col-md-4 mb-4 form-control-validation d-flex flex-column">
<div class="mb-2 d-flex align-items-end">
<label class="form-label mb-0" for="proses-fermentasi">Jika ya, bagaimana prosesnya?</label>
<div class="d-flex align-items-end">
<label class="form-label" for="proses-fermentasi">Jika ya, bagaimana prosesnya?</label>
</div>
<div>
<textarea class="form-control @error('proses_fermentasi') is-invalid @enderror" id="proses-fermentasi" name="proses_fermentasi" rows="2" placeholder="Ceritakan prosesnya di sini...">{{ old('proses_fermentasi', $aksesPasar?->proses_fermentasi) }}</textarea>
@@ -363,8 +362,8 @@
</div>
<div class="col-md-4 mb-4 form-control-validation d-flex flex-column">
<div class="mb-2 d-flex align-items-end">
<label class="form-label mb-0" for="model-fermentasi">Menurut Bapak/Ibu, apa model yang paling memungkinkan?</label>
<div class="d-flex align-items-end">
<label class="form-label" for="model-fermentasi">Menurut Bapak/Ibu, apa model yang paling memungkinkan?</label>
</div>
<div>
<textarea class="form-control @error('model_fermentasi_memungkinkan') is-invalid @enderror" id="model-fermentasi" name="model_fermentasi_memungkinkan" rows="2" placeholder="Model fermentasinya...">{{ old('model_fermentasi_memungkinkan', $aksesPasar?->model_fermentasi_memungkinkan) }}</textarea>
@@ -374,11 +373,11 @@
</div>
</div>
<h5 class="pb-3 border-bottom mb-4 mt-4">AKSES PASAR PREMIUM</h5>
<h6 class="mb-3">Kesadaran Pasar Premium*</h6>
<h5 class="pb-4 border-bottom mb-4 mt-4">Akses Pasar Premium</h5>
<h5 class="mb-4 mt-4">Kesadaran Pasar Premium*</h5>
<div class="row">
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label d-block mb-2" for="skor-premium">Pengetahuan & akses pasar premium</label>
<label class="form-label d-block" for="skor-premium">Pengetahuan & akses pasar premium</label>
@foreach($skorKesadaranPremiumOptions as $option)
<div class="form-check mb-2">
<input class="form-check-input @error('skor_kesadaran_premium') is-invalid @enderror"
@@ -396,16 +395,16 @@
</div>
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label mb-2" for="sumber-info">Sumber informasi utama</label>
<label class="form-label" for="sumber-info">Sumber informasi utama</label>
<input type="text" class="form-control @error('sumber_info_premium') is-invalid @enderror" id="sumber-info" name="sumber_info_premium" value="{{ old('sumber_info_premium', $aksesPasar?->sumber_info_premium) }}">
@error('sumber_info_premium')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>
</div>
<h5 class="pb-3 border-bottom mb-4 mt-4">KEPERCAYAAN & PERSEPSI RISIKO</h5>
<h5 class="pb-4 border-bottom mb-4 mt-4">Kepercayaan & Persepsi Risiko</h5>
<div class="row">
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label d-block mb-2" for="tingkat-kepercayaan">Seberapa percaya Bapak/Ibu untuk menjual ke pembeli atau pasar baru, di luar pembeli yang biasa?</label>
<label class="form-label d-block" for="tingkat-kepercayaan">Seberapa percaya Bapak/Ibu untuk menjual ke pembeli atau pasar baru, di luar pembeli yang biasa?</label>
@foreach($tingkatKepercayaanOptions as $option)
<div class="form-check mb-2">
<input class="form-check-input @error('tingkat_kepercayaan_pembeli_baru') is-invalid @enderror"
@@ -423,7 +422,7 @@
</div>
<div class="col-md-6 mb-4 form-control-validation">
<label class="form-label mb-2" for="alasan-kepercayaan">Apa yang membuat Bapak/Ibu ragu atau yakin untuk mencoba pembeli baru?</label>
<label class="form-label" for="alasan-kepercayaan">Apa yang membuat Bapak/Ibu ragu atau yakin untuk mencoba pembeli baru?</label>
<textarea class="form-control @error('alasan_kepercayaan_pembeli_baru') is-invalid @enderror"
id="alasan-kepercayaan"
name="alasan_kepercayaan_pembeli_baru"
@@ -436,7 +435,7 @@
<div class="mt-4 text-end">
<a href="{{ route('petani.index') }}#data-petani" class="btn btn-secondary me-2">Kembali</a>
<button type="submit" class="btn btn-success">
<i class="icon-base ti tabler-device-floppy me-1_5 icon-sm"></i>Simpan Akses Pasar
<i class="icon-base ti tabler-check me-1_5 icon-sm"></i>Simpan
</button>
</div>
</div>
@@ -538,4 +537,4 @@
syncPraktikFermentasi();
});
</script>
@endpush
@endpush