lampuotomatis/resources/views/administrator/edit.blade.php

261 lines
16 KiB
PHP

@extends('layouts.master')
@section('title')
@lang('translation.dashboards')
@endsection
@section('css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin="" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
#map {
height: 500px;
}
</style>
<link href="{{ URL::asset('build/libs/jsvectormap/css/jsvectormap.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<div class="container-fluid page-body-wrapper">
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<!-- Info Alert -->
<div class="alert alert-info alert-dismissible alert-label-icon label-arrow fade show material-shadow"
role="alert">
<i class="ri-airplay-line label-icon"></i><strong>Informasi</strong> - Pastikan seluruh kolom data
terisi!
</div>
<div class="card">
<form action="{{ route('administrator.update', $administrator) }}" method="post"
enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="row card-header">
<h4 class="card-title mt-2 col"><i class="ri-admin-fill me-1"></i>Edit Administrator</h4>
<div class="col-auto align-content-center">
<div class="text-end">
<button type="submit" class="btn btn-primary"><i
class="ri-save-3-line me-1"></i>Submit</button>
</div>
</div><!--end col-->
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="mb-3">
<label for="namapelanggan" class="form-label">Nama Pelanggan</label>
<input type="text" class="form-control" placeholder="Masukkan nama pelanggan"
name="name" id="namapelanggan" value="{{ $administrator->name }}"
maxlength="25" required>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="telp" class="form-label">Nomor Telepon</label>
<input type="tel" class="form-control"
placeholder="Masukkan nomor telepon (contoh: 081234567890)" id="telp"
name="telp" value="{{ $administrator->telp }}" required>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control"
placeholder="Masukkan email lengkap (contoh: example@gamil.com)"
id="email" name="email" value="{{ $administrator->email }}"
maxlength="30" required>
</div>
</div>
<div class="col-6">
<div class="mb-3">
<label class="form-label" for="password-input">Password</label>
<div class="position-relative auth-pass-inputgroup mb-3">
<input name="password" type="password" class="form-control"
placeholder="Enter password" id="password-input">
<button
class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-toggle"
type="button" id="password-addon"
style="height: 100%; width: 40px; z-index: 10;"><i
class="ri-eye-fill align-middle"></i></button>
</div>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="autoSizingSelect" class="form-label">Status</label>
<select name="status" class="form-select" data-choices
data-choices-sorting="true" id="autoSizingSelect" required>
<option value="Aktif" {{ old('status') == 'Aktif' ? 'selected' : '' }}>
Aktif</option>
<option value="Tidak Aktif"
{{ old('status') == 'Tidak Aktif' ? 'selected' : '' }}>Tidak
Aktif</option>
</select>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="join_date" class="form-label">Tanggal Registrasi</label>
<input type="date" class="form-control" id="join_date" name="join_date"
value="{{ $administrator->join_date }}" required>
</div>
</div><!--end col-->
<div class="col-12">
<div class="mb-3">
<label for="images">Foto customer</label><br>
{{-- <img id="previewImage" class="mb-2" src="{{ $administrator->getImage() }}"
width="100%" alt=""> --}}
<input type="file" name="images"
class="form-control @error('images') is-invalid @enderror" id="images">
@error('images')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div><!--end col-->
</div><!--end row-->
</div>
<div class="card-footer bg-transparent border-top">
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="address" class="form-label">Alamat Lengkap</label>
<textarea class="form-control" id="address" name="address" rows="3" placeholder="Masukkan alamat lengkap">{{ $administrator->address }}</textarea>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="province" class="form-label">Provinsi</label>
@php
$provinces = new App\Http\Controllers\LocationController();
$provinces = $provinces->provinces();
@endphp
<select id="province" name="province" class="form-select">
<option value="{{ $administrator->province }}" selected>
{{ \Indonesia::findProvince($administrator->province)?->name ?? 'Pilih province' }}
</option>
@foreach ($provinces as $item)
<option value="{{ $item->id }}"
{{ $administrator->customer == $item->id ? 'selected' : '' }}>
{{ $item->name }}</option>
@endforeach
</select>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="regency" class="form-label">Kab/Kota</label>
<select id="regency" name="regency" class="form-select">
<option value="{{ $administrator->regency }}" selected>
{{ \Indonesia::findCity($administrator->regency)?->name ?? '-' }}
</option>
</select>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="district" class="form-label">Kecamatan</label>
<select id="district" name="district" class="form-select">
<option value="{{ $administrator->district }}" selected>
{{ \Indonesia::findDistrict($administrator->district)?->name ?? '-' }}
</option>
</select>
</div>
</div><!--end col-->
<div class="col-6">
<div class="mb-3">
<label for="village" class="form-label">Desa</label>
<select id="village" name="village" class="form-select">
<option value="{{ $administrator->village }}" selected>
{{ \Indonesia::findVillage($administrator->village)?->name ?? '-' }}
</option>
</select>
</div>
</div><!--end col-->
</div>
</div>
</form>
</div>
</div>
</div>
@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function onChangeSelect(url, id, name) {
// send ajax request to get the cities of the selected province and append to the select tag
$.ajax({
url: url,
type: 'GET',
data: {
id: id
},
success: function(data) {
$('#' + name).empty();
$('#' + name).append('<option>==Pilih Salah Satu==</option>');
$.each(data, function(key, value) {
$('#' + name).append('<option value="' + key + '">' + value + '</option>');
});
}
});
}
$(function() {
$('#province').on('change', function() {
onChangeSelect('{{ route('cities') }}', $(this).val(), 'regency');
});
$('#regency').on('change', function() {
onChangeSelect('{{ route('districts') }}', $(this).val(), 'district');
})
$('#district').on('change', function() {
onChangeSelect('{{ route('villages') }}', $(this).val(), 'village');
})
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const passwordToggle = document.getElementById('password-addon');
const passwordField = document.getElementById('password-input');
passwordToggle.addEventListener('click', function(e) {
console.log("Toggle password button clicked!");
e.preventDefault();
e.stopPropagation();
const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
passwordField.setAttribute('type', type);
const iconElement = this.querySelector('i');
if (type === 'text') {
iconElement.classList.remove('ri-eye-fill');
iconElement.classList.add('ri-eye-off-fill');
} else {
iconElement.classList.remove('ri-eye-off-fill');
iconElement.classList.add('ri-eye-fill');
}
// Hilangkan fokus/kursor dari field password
passwordField.blur();
});
passwordToggle.addEventListener('mousedown', function(e) {
e.preventDefault();
});
});
</script>
@endsection