263 lines
9.6 KiB
PHP
263 lines
9.6 KiB
PHP
@extends('layouts.backapp')
|
|
|
|
@section('title', 'Edit 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(0, 123, 255, 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;
|
|
}
|
|
|
|
/* Ensure Select2 is visible */
|
|
.select2-container {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.select2-dropdown {
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Fix Select2 width */
|
|
.select2-container--default .select2-selection--single {
|
|
height: calc(1.5em + 0.75rem + 2px);
|
|
padding: 0.375rem 0.75rem;
|
|
}
|
|
|
|
/* 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">
|
|
Edit 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.update', $target->id) }}">
|
|
@csrf
|
|
@method('PUT')
|
|
|
|
<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)
|
|
@php
|
|
$isSelected = old('user_id', $target->user_id) == $mechanic->id;
|
|
@endphp
|
|
<option value="{{ $mechanic->id }}"
|
|
{{ $isSelected ? 'selected' : '' }}>
|
|
{{ $mechanic->name }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
@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', $target->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', $target->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', $target->is_active) ? '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> Update 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 and delay
|
|
setTimeout(function() {
|
|
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');
|
|
}
|
|
}, 100);
|
|
|
|
// 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
|