TIF_E41211041/resources/views/pages/jadwal/create.blade.php

344 lines
18 KiB
PHP

@extends('layouts.second_app')
@section('title', 'Prodi')
@section('content')
<div class="page-header">
<h4 class="page-title">Tambah Jadwal</h4>
<ul class="breadcrumbs">
<li class="nav-home">
<a href="{{ url('/') }}">
<i class="flaticon-home"></i>
</a>
</li>
<li class="separator">
<i class="flaticon-right-arrow"></i>
</li>
<li class="nav-item">
<a href="{{ route('master-data.jadwal') }}">Jadwal</a>
</li>
<li class="separator">
<i class="flaticon-right-arrow"></i>
</li>
<li class="nav-item">
<a href="{{ route('master-data.jadwal.create') }}">Tambah Jadwal</a>
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="card-title">Tambah</div>
</div>
<form action="{{ route('master-data.jadwal.store') }}" method="POST">
@csrf
<div class="card-body">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>
Prodi @include('components.text-required')
</label>
<select class="form-control" name="kode_prodi" required>
<option value="">-- Pilih Prodi --</option>
@foreach ($prodi as $item)
<option value="{{ $item->kode_prodi }}"
{{ old('kode_prodi') == $item->kode_prodi ? 'selected' : '' }}>
{{ $item->nama }}
</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Hari @include('components.text-required')
</label>
<select class="form-control" name="hari" required>
<option value="">-- Pilih Hari --</option>
<option value="senin">Senin</option>
<option value="selasa">Selesa</option>
<option value="rabu">Rabu</option>
<option value="kamis">Kamis</option>
<option value="jumat">Jumat</option>
<option value="sabtu">Sabtu</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Semester @include('components.text-required')
</label>
<select class="form-control" name="semester" required>
<option value="">-- Pilih Semester --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Golongan @include('components.text-required')
</label>
<select class="form-control" name="golongan" required>
<option value="">-- Pilih Golongan --</option>
@foreach ($golongan as $item)
<option value="{{ $item->golongan }}" {{ old('golongan') == $item->golongan ? 'selected' : ''}}>
{{ $item->golongan }}</option>
@endforeach
</select>
</div>
</div>
</div>
<br>
<div class="content-dynamis" id="content-dynamis">
<div class="row" id="card">
<div class="col-md-11">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Jam Masuk @include('components.text-required')</label>
<div class="input-group mb-3">
<input type="text" class="form-control timePicker jam-masuk" name="jam_masuk[]" placeholder="Jam Masuk">
<div class="input-group-append input-group-addon">
<span class="input-group-text"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Toleransi Jam Masuk @include('components.text-required')</label>
<input type="text" class="form-control" name="jam_toleransi_masuk[]" placeholder="Contoh. 15">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Jam Selesai @include('components.text-required')</label>
<div class="input-group mb-3">
<input type="text" class="form-control timePicker jam-selesai" name="jam_selesai[]" placeholder="Jam Selesai">
<div class="input-group-append input-group-addon">
<span class="input-group-text"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="durasi">Durasi</label>
<input type="text" class="form-control durasi" name="durasi[]" placeholder="Durasi" readonly>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>
Mata Kuliah @include('components.text-required')
</label>
<select class="form-control" name="id_mk[]" required>
<option value="">-- Pilih Mata Kuliah --</option>
@foreach ($matkul as $item)
<option value="{{ $item->id }}" {{ old('id') == $item->id ? 'selected' : '' }}>{{ $item->nama }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleFormControlSelect1">
Ruang @include('components.text-required')
</label>
<select class="form-control" name="id_ruang[]" required>
<option value="">-- Pilih Ruang --</option>
@foreach ($ruang as $item)
<option value="{{ $item->id }}"
{{ old('id') == $item->id ? 'selected' : '' }}>
{{ $item->jurusan->nama }} - {{ $item->nama_kelas }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<button class="btn btn-success mt-2" id="add-content">
+
</button>
</div>
</div>
</div>
<button class="btn btn-primary ml-2 mt-2" id="alert_success">
<span class="btn-label">
<i class="far fa-save"></i>
</span>
Simpan
</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('extraScript')
<script>
$(document).ready(function () {
var idCard = 1;
// Fungsi untuk menginisialisasi timepicker
function initializeTimePicker(element) {
element.datetimepicker({
useCurrent: false,
format: "HH:mm",
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-crosshairs',
clear: 'fa fa-trash',
close: 'fa fa-times'
}
});
}
initializeTimePicker($('.timePicker'));
// Fungsi untuk menghitung durasi otomatis
function hitungDurasi(row) {
var jamMasuk = row.find('.jam-masuk').val();
var jamSelesai = row.find('.jam-selesai').val();
var durasiInput = row.find('.durasi');
if (jamMasuk && jamSelesai) {
var startTime = moment(jamMasuk, "HH:mm");
var endTime = moment(jamSelesai, "HH:mm");
if (endTime.isBefore(startTime)) {
endTime.add(1, 'days');
}
var duration = moment.duration(endTime.diff(startTime));
var totalJam = duration.asHours();
durasiInput.val(totalJam + " Jam");
}
}
// $('#content-dynamis').on('dp.change', '.jam-masuk, .jam-selesai', function () {
// hitungDurasi($(this).closest('.row'));
// });
$('#content-dynamis').on('click', '#add-content', function () {
var newRow = $(`
<div class="row mt-3" id="card-${idCard}">
<div class="col-md-11">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Jam Masuk @include('components.text-required')</label>
<div class="input-group mb-3">
<input type="text" class="form-control timePicker jam-masuk" name="jam_masuk[]" placeholder="Jam Masuk">
<div class="input-group-append input-group-addon">
<span class="input-group-text"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Toleransi Jam Masuk @include('components.text-required')</label>
<input type="text" class="form-control" name="jam_toleransi_masuk[]" placeholder="Contoh. 15">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Jam Selesai @include('components.text-required')</label>
<div class="input-group mb-3">
<input type="text" class="form-control timePicker jam-selesai" name="jam_selesai[]" placeholder="Jam Selesai">
<div class="input-group-append input-group-addon">
<span class="input-group-text"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Durasi</label>
<input type="text" class="form-control durasi" name="durasi[]" placeholder="Durasi" readonly>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>
Mata Kuliah @include('components.text-required')
</label>
<select class="form-control" name="id_mk[]" required>
<option value="">-- Pilih Mata Kuliah --</option>
@foreach ($matkul as $item)
<option value="{{ $item->id }}" {{ old('id') == $item->id ? 'selected' : '' }}>{{ $item->nama }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleFormControlSelect1">
Ruang @include('components.text-required')
</label>
<select class="form-control" name="id_ruang[]" required>
<option value="">-- Pilih Ruang --</option>
@foreach ($ruang as $item)
<option value="{{ $item->id }}"
{{ old('id') == $item->id ? 'selected' : '' }}>
{{ $item->jurusan->nama }} - {{ $item->nama_kelas }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<button class="btn btn-danger mt-2 remove-content" data-id="${idCard}">-</button>
</div>
</div>
`);
$('#content-dynamis').append(newRow);
// Inisialisasi timepicker pada elemen baru
initializeTimePicker(newRow.find('.timePicker'));
idCard++;
});
// Menghapus elemen dinamis
$('#content-dynamis').on('click', '.remove-content', function () {
$(this).closest('.row').remove();
});
// Event listener untuk elemen dinamis saat terjadi perubahan
$('#content-dynamis').on('dp.change', '.jam-masuk, .jam-selesai', function () {
hitungDurasi($(this).closest('.row'));
});
});
</script>
@endpush