252 lines
9.7 KiB
PHP
252 lines
9.7 KiB
PHP
@extends('layouts.backapp')
|
|
|
|
@section('title', 'Tambah Target KPI')
|
|
|
|
@section('styles')
|
|
<style>
|
|
.select2-container .select2-selection {
|
|
height: calc(1.5em + 0.75rem + 2px);
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: #495057;
|
|
background-color: #fff;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 0.25rem;
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.select2-container.select2-container--focus .select2-selection {
|
|
border-color: #80bdff;
|
|
outline: 0;
|
|
box-shadow: 0 0 0 0.2rem rgba(197, 214, 233, 0.25);
|
|
}
|
|
|
|
.select2-container .select2-selection--single .select2-selection__rendered {
|
|
padding-left: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.select2-container .select2-selection--single .select2-selection__arrow {
|
|
height: 100%;
|
|
}
|
|
|
|
.select2-results__option--highlighted[aria-selected] {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
/* Limit Select2 dropdown height */
|
|
.select2-results__options {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Style for Select2 results */
|
|
.select2-results__option {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.select2-results__option:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Improve Select2 search box */
|
|
.select2-search--dropdown .select2-search__field {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
|
|
<div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
|
|
<div class="kt-portlet kt-portlet--mobile">
|
|
<div class="kt-portlet__head kt-portlet__head--lg">
|
|
<div class="kt-portlet__head-label">
|
|
<h3 class="kt-portlet__head-title">
|
|
Tambah Target KPI
|
|
</h3>
|
|
</div>
|
|
<div class="kt-portlet__head-toolbar">
|
|
<div class="kt-portlet__head-actions">
|
|
<a href="{{ route('kpi.targets.index') }}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kt-portlet__body">
|
|
<form id="kpi-form" method="POST" action="{{ route('kpi.targets.store') }}">
|
|
@csrf
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="user_id" class="form-control-label">Mekanik <span class="text-danger">*</span></label>
|
|
<select name="user_id" id="user_id" class="form-control select2" required>
|
|
<option value="">Pilih Mekanik</option>
|
|
@foreach($mechanics as $mechanic)
|
|
<option value="{{ $mechanic->id }}" {{ old('user_id') == $mechanic->id ? 'selected' : '' }}>
|
|
{{ $mechanic->name }} ({{ $mechanic->dealer->name ?? 'N/A' }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@if($mechanics->isEmpty())
|
|
<div class="alert alert-warning mt-2">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Tidak ada mekanik yang ditemukan. Pastikan ada user dengan role "mechanic" di sistem.
|
|
</div>
|
|
@else
|
|
<small class="form-text text-muted">
|
|
Ditemukan {{ $mechanics->count() }} mekanik.
|
|
@if($mechanics->count() >= 50)
|
|
Menampilkan 50 mekanik pertama. Gunakan pencarian untuk menemukan mekanik tertentu.
|
|
@endif
|
|
</small>
|
|
@endif
|
|
@error('user_id')
|
|
<span class="text-danger">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="target_value" class="form-control-label">Target Nilai <span class="text-danger">*</span></label>
|
|
<input type="number" name="target_value" id="target_value" class="form-control"
|
|
value="{{ old('target_value') }}" min="1" required>
|
|
@error('target_value')
|
|
<span class="text-danger">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="description" class="form-control-label">Deskripsi</label>
|
|
<textarea name="description" id="description" class="form-control" rows="3"
|
|
placeholder="Deskripsi target (opsional)">{{ old('description') }}</textarea>
|
|
@error('description')
|
|
<span class="text-danger">{{ $message }}</span>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" name="is_active" id="is_active" class="custom-control-input"
|
|
value="1" {{ old('is_active', true) ? 'checked' : '' }}>
|
|
<label class="custom-control-label" for="is_active">
|
|
Target Aktif
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save"></i> Simpan Target
|
|
</button>
|
|
<a href="{{ route('kpi.targets.index') }}" class="btn btn-secondary">Kembali</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('javascripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Initialize Select2 with fallback
|
|
try {
|
|
// Initialize Select2 for mechanics with search limit
|
|
$('#user_id').select2({
|
|
theme: 'bootstrap4',
|
|
width: '100%',
|
|
placeholder: 'Pilih Mekanik',
|
|
allowClear: true,
|
|
minimumInputLength: 1,
|
|
maximumInputLength: 50,
|
|
maximumResultsForSearch: 10,
|
|
language: {
|
|
inputTooShort: function() {
|
|
return "Masukkan minimal 1 karakter untuk mencari";
|
|
},
|
|
inputTooLong: function() {
|
|
return "Maksimal 50 karakter";
|
|
},
|
|
noResults: function() {
|
|
return "Tidak ada hasil ditemukan";
|
|
},
|
|
searching: function() {
|
|
return "Mencari...";
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
} catch (error) {
|
|
console.log('Select2 not available, using regular select');
|
|
// Fallback: ensure regular select works
|
|
$('.select2').removeClass('select2').addClass('form-control');
|
|
}
|
|
|
|
// Form validation
|
|
$('#kpi-form').on('submit', function(e) {
|
|
var isValid = true;
|
|
var errors = [];
|
|
|
|
// Clear previous errors
|
|
$('.text-danger').remove();
|
|
|
|
// Validate required fields
|
|
if (!$('#user_id').val()) {
|
|
errors.push('Mekanik harus dipilih');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!$('#target_value').val() || $('#target_value').val() < 1) {
|
|
errors.push('Target nilai harus diisi dan minimal 1');
|
|
isValid = false;
|
|
}
|
|
|
|
|
|
|
|
if (!isValid) {
|
|
e.preventDefault();
|
|
if (typeof Swal !== 'undefined') {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Validasi Gagal',
|
|
html: errors.join('<br>'),
|
|
confirmButtonText: 'OK'
|
|
});
|
|
} else {
|
|
alert('Validasi Gagal:\n' + errors.join('\n'));
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|