history bel, tampilan ruangan,jurusan,siswa,kelas Controller(paginate)
This commit is contained in:
parent
98f6829669
commit
3529b0324d
|
|
@ -9,6 +9,7 @@ class JurusanController extends Controller
|
|||
{
|
||||
public function index(){
|
||||
$jurusan = Jurusan::all();
|
||||
$jurusan = Jurusan::paginate(10);
|
||||
return view('admin.jurusan.index', compact('jurusan'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ class KelasController extends Controller
|
|||
{
|
||||
public function index(){
|
||||
$kelas = Kelas::with('jurusan')->get();
|
||||
$kelas = Kelas::paginate(10);
|
||||
return view('admin.kelas.index', compact('kelas'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ class RuanganController extends Controller
|
|||
{
|
||||
public function index(){
|
||||
$ruangan = Ruangan::with('jurusan', 'kelas')->get();
|
||||
$ruangan = Ruangan::paginate(10);
|
||||
return view('admin.ruangan.index', compact('ruangan'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,76 +2,172 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Jurusan;
|
||||
use App\Models\Kelas;
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Models\Siswa;
|
||||
use App\Models\Kelas;
|
||||
use App\Models\Jurusan;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
use Illuminate\Support\Facades\Validator;
|
||||
|
||||
class SiswaController extends Controller
|
||||
{
|
||||
public function index2(Request $request)
|
||||
/**
|
||||
* Display a listing of the resource.
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
$siswa = Siswa::with(['kelas', 'jurusan'])->get();
|
||||
return view('admin.siswa', compact('siswa'));
|
||||
}
|
||||
//GET api/admin/siswa
|
||||
public function index(Request $request)
|
||||
{
|
||||
// Ambil semua data siswa
|
||||
$siswa = Siswa::with(['kelas', 'jurusan'])->get();
|
||||
|
||||
return response()->json([
|
||||
'message' => 'Siswa ditemukan',
|
||||
'data' => $siswa
|
||||
]);
|
||||
$siswa = Siswa::with(['kelas', 'jurusan'])->latest()->get();
|
||||
$siswa = Siswa::paginate(10);
|
||||
$kelas = Kelas::all();
|
||||
$jurusan = Jurusan::all();
|
||||
return view('admin.siswa.index', compact('siswa', 'kelas', 'jurusan'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for creating a new resource.
|
||||
*/
|
||||
public function create()
|
||||
{
|
||||
$kelas = Kelas::all();
|
||||
$jurusan = Jurusan::all();
|
||||
|
||||
return view('admin.siswa.create', compact('kelas', 'jurusan'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Store a newly created resource in storage.
|
||||
*/
|
||||
public function store(Request $request)
|
||||
{
|
||||
$request->validate([
|
||||
'nama_siswa' => 'required|string|max:255',
|
||||
'nisn' => 'required|integer|unique:siswa,nisn',
|
||||
'tanggal_lahir' => 'required|date',
|
||||
// Validasi data
|
||||
$validator = Validator::make($request->all(), [
|
||||
'foto_siswa' => 'required|image|mimes:jpeg,png,jpg|max:2048',
|
||||
'nama_siswa' => 'required|string|max:255',
|
||||
'nisn' => 'required|numeric|unique:siswa,nisn',
|
||||
'tanggal_lahir' => 'required|date',
|
||||
'jenis_kelamin' => 'required|in:L,P',
|
||||
'alamat' => 'required|string',
|
||||
'no_hp' => 'required|numeric',
|
||||
'email' => 'required|email|unique:siswa,email',
|
||||
'id_jurusan' => 'required|exists:jurusan,id',
|
||||
'no_hp' => 'required|string|max:15',
|
||||
'alamat' => 'required|string',
|
||||
'id_kelas' => 'required|exists:kelas,id',
|
||||
'id_jurusan' => 'required|exists:jurusan,id',
|
||||
]);
|
||||
|
||||
// Cek apakah ada upload foto
|
||||
if ($validator->fails()) {
|
||||
return redirect()->back()
|
||||
->withErrors($validator)
|
||||
->withInput();
|
||||
}
|
||||
|
||||
// Upload foto siswa
|
||||
if ($request->hasFile('foto_siswa')) {
|
||||
$fotoPath = $request->file('foto_siswa')->store('public/foto_siswa');
|
||||
$fotoName = basename($fotoPath);
|
||||
} else {
|
||||
$fotoName = null;
|
||||
$foto = $request->file('foto_siswa');
|
||||
$fotoName = time() . '_' . $foto->getClientOriginalName();
|
||||
$fotoPath = $foto->storeAs('siswa', $fotoName, 'public');
|
||||
}
|
||||
|
||||
// Simpan data siswa
|
||||
$siswa = Siswa::create([
|
||||
'nama_siswa' => $request->nama_siswa,
|
||||
'nisn' => $request->nisn,
|
||||
'tanggal_lahir' => $request->tanggal_lahir,
|
||||
'foto_siswa' => $fotoName,
|
||||
'jenis_kelamin' => $request->jenis_kelamin,
|
||||
'alamat' => $request->alamat,
|
||||
'no_hp' => $request->no_hp,
|
||||
'email' => $request->email,
|
||||
'id_jurusan' => $request->id_jurusan,
|
||||
'id_kelas' => $request->id_kelas,
|
||||
$siswa = new Siswa();
|
||||
$siswa->foto_siswa = $fotoPath ?? null;
|
||||
$siswa->nama_siswa = $request->nama_siswa;
|
||||
$siswa->nisn = $request->nisn;
|
||||
$siswa->tanggal_lahir = $request->tanggal_lahir;
|
||||
$siswa->jenis_kelamin = $request->jenis_kelamin;
|
||||
$siswa->email = $request->email;
|
||||
$siswa->no_hp = $request->no_hp;
|
||||
$siswa->alamat = $request->alamat;
|
||||
$siswa->id_kelas = $request->id_kelas;
|
||||
$siswa->id_jurusan = $request->id_jurusan;
|
||||
$siswa->save();
|
||||
|
||||
return redirect()->route('admin.siswa.index')
|
||||
->with('success', 'Siswa baru berhasil didaftarkan!');
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the form for editing the specified resource.
|
||||
*/
|
||||
public function edit(string $id)
|
||||
{
|
||||
$siswa = Siswa::findOrFail($id);
|
||||
$kelas = Kelas::all();
|
||||
$jurusan = Jurusan::all();
|
||||
|
||||
return view('admin.siswa.edit', compact('siswa', 'kelas', 'jurusan'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the specified resource in storage.
|
||||
*/
|
||||
public function update(Request $request, string $id)
|
||||
{
|
||||
$siswa = Siswa::findOrFail($id);
|
||||
|
||||
// Validasi data
|
||||
$validator = Validator::make($request->all(), [
|
||||
'foto_siswa' => 'nullable|image|mimes:jpeg,png,jpg|max:2048',
|
||||
'nama_siswa' => 'required|string|max:255',
|
||||
'nisn' => 'required|numeric|unique:siswa,nisn,' . $id,
|
||||
'tanggal_lahir' => 'required|date',
|
||||
'jenis_kelamin' => 'required|in:L,P',
|
||||
'email' => 'required|email|unique:siswa,email,' . $id,
|
||||
'no_hp' => 'required|string|max:15',
|
||||
'alamat' => 'required|string',
|
||||
'id_kelas' => 'required|exists:kelas,id',
|
||||
'id_jurusan' => 'required|exists:jurusan,id',
|
||||
]);
|
||||
|
||||
// Jika request dari API, kembalikan response JSON
|
||||
if ($request->wantsJson()) {
|
||||
return response()->json([
|
||||
'message' => 'Siswa berhasil ditambahkan',
|
||||
'data' => $siswa,
|
||||
], 201);
|
||||
if ($validator->fails()) {
|
||||
return redirect()->back()
|
||||
->withErrors($validator)
|
||||
->withInput();
|
||||
}
|
||||
|
||||
// Jika request dari Web (Blade), redirect ke halaman daftar siswa
|
||||
return redirect()->route('siswa.index')->with('success', 'Siswa berhasil ditambahkan');
|
||||
// Update foto siswa jika ada
|
||||
if ($request->hasFile('foto_siswa')) {
|
||||
// Hapus foto lama jika ada
|
||||
if ($siswa->foto_siswa && Storage::disk('public')->exists($siswa->foto_siswa)) {
|
||||
Storage::disk('public')->delete($siswa->foto_siswa);
|
||||
}
|
||||
|
||||
$foto = $request->file('foto_siswa');
|
||||
$fotoName = time() . '_' . $foto->getClientOriginalName();
|
||||
$fotoPath = $foto->storeAs('siswa', $fotoName, 'public');
|
||||
$siswa->foto_siswa = $fotoPath;
|
||||
}
|
||||
|
||||
// Update data siswa
|
||||
$siswa->nama_siswa = $request->nama_siswa;
|
||||
$siswa->nisn = $request->nisn;
|
||||
$siswa->tanggal_lahir = $request->tanggal_lahir;
|
||||
$siswa->jenis_kelamin = $request->jenis_kelamin;
|
||||
$siswa->email = $request->email;
|
||||
$siswa->no_hp = $request->no_hp;
|
||||
$siswa->alamat = $request->alamat;
|
||||
$siswa->id_kelas = $request->id_kelas;
|
||||
$siswa->id_jurusan = $request->id_jurusan;
|
||||
$siswa->save();
|
||||
|
||||
return redirect()->route('admin.siswa.index')
|
||||
->with('success', 'Data siswa berhasil diperbarui!');
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the specified resource from storage.
|
||||
*/
|
||||
public function destroy(string $id)
|
||||
{
|
||||
$siswa = Siswa::findOrFail($id);
|
||||
|
||||
// Hapus foto siswa jika ada
|
||||
if ($siswa->foto_siswa && Storage::disk('public')->exists($siswa->foto_siswa)) {
|
||||
Storage::disk('public')->delete($siswa->foto_siswa);
|
||||
}
|
||||
|
||||
$siswa->delete();
|
||||
|
||||
return redirect()->route('admin.siswa.index')
|
||||
->with('success', 'Siswa berhasil dihapus!');
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
use App\Models\JadwalBel;
|
||||
use App\Models\Status;
|
||||
use App\Models\BellHistory;
|
||||
use App\Services\MqttService;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
|
|
@ -39,6 +40,14 @@ function (string $topic, string $message) {
|
|||
$this->handleAckResponse($message);
|
||||
}
|
||||
);
|
||||
|
||||
// Tambahkan subscribe untuk topik bell ring
|
||||
$this->mqttService->subscribe(
|
||||
$this->mqttConfig['topics']['responses']['bell_ring'],
|
||||
function (string $topic, string $message) {
|
||||
$this->handleBellRing($message);
|
||||
}
|
||||
);
|
||||
} catch (\Exception $e) {
|
||||
Log::error('Failed to initialize MQTT subscriptions: ' . $e->getMessage());
|
||||
}
|
||||
|
|
@ -335,19 +344,35 @@ public function ring(Request $request)
|
|||
'repeat' => 'sometimes|integer|min:1|max:10',
|
||||
'volume' => 'sometimes|integer|min:0|max:30'
|
||||
]);
|
||||
|
||||
try {
|
||||
// Catat ke history terlebih dahulu
|
||||
BellHistory::create([
|
||||
'hari' => Carbon::now()->isoFormat('dddd'),
|
||||
'waktu' => Carbon::now()->format('H:i:s'),
|
||||
'file_number' => $validated['file_number'],
|
||||
'trigger_type' => BellHistory::TRIGGER_MANUAL,
|
||||
'ring_time' => Carbon::now(),
|
||||
'volume' => $validated['volume'] ?? 15,
|
||||
'repeat' => $validated['repeat'] ?? 1
|
||||
]);
|
||||
|
||||
// Kirim perintah ke MQTT
|
||||
$message = json_encode([
|
||||
'action' => 'ring',
|
||||
'timestamp' => Carbon::now()->toDateTimeString(),
|
||||
'file_number' => $validated['file_number'],
|
||||
'repeat' => $validated['repeat'] ?? 1,
|
||||
'volume' => $validated['volume'] ?? 15
|
||||
'volume' => $validated['volume'] ?? 15,
|
||||
'trigger_type' => BellHistory::TRIGGER_MANUAL
|
||||
]);
|
||||
|
||||
$this->mqttService->publish(
|
||||
$this->mqttConfig['topics']['commands']['ring'],
|
||||
$message,
|
||||
1
|
||||
);
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Perintah bel berhasil dikirim',
|
||||
|
|
@ -357,6 +382,7 @@ public function ring(Request $request)
|
|||
]
|
||||
]);
|
||||
} catch (\Exception $e) {
|
||||
Log::error('Gagal mengirim bel manual: ' . $e->getMessage());
|
||||
return response()->json([
|
||||
'success' => false,
|
||||
'message' => 'Gagal mengirim perintah bel: ' . $e->getMessage()
|
||||
|
|
@ -611,4 +637,61 @@ protected function logMqttActivity($action, $message)
|
|||
);
|
||||
}
|
||||
|
||||
protected function handleBellRing(string $message)
|
||||
{
|
||||
try {
|
||||
$data = json_decode($message, true);
|
||||
|
||||
// Validasi data yang diterima
|
||||
if (!isset($data['hari']) || !isset($data['waktu']) || !isset($data['file_number']) || !isset($data['trigger_type'])) {
|
||||
Log::error('Invalid bell ring data format');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simpan ke history
|
||||
BellHistory::create([
|
||||
'hari' => $data['hari'],
|
||||
'waktu' => $data['waktu'],
|
||||
'file_number' => $data['file_number'],
|
||||
'trigger_type' => $data['trigger_type'],
|
||||
'ring_time' => Carbon::now(),
|
||||
'volume' => $data['volume'] ?? 15, // Default volume 15
|
||||
'repeat' => $data['repeat'] ?? 1 // Default repeat 1x
|
||||
]);
|
||||
|
||||
Log::info('Bell ring recorded to history', ['data' => $data]);
|
||||
|
||||
} catch (\Exception $e) {
|
||||
Log::error('Error handling bell ring: ' . $e->getMessage());
|
||||
}
|
||||
}
|
||||
|
||||
public function history(Request $request)
|
||||
{
|
||||
try {
|
||||
$query = BellHistory::query()->latest('ring_time');
|
||||
|
||||
if ($request->filled('date')) {
|
||||
$query->whereDate('ring_time', $request->date);
|
||||
}
|
||||
|
||||
if ($request->filled('search')) {
|
||||
$query->where(function($q) use ($request) {
|
||||
$q->where('hari', 'like', '%'.$request->search.'%')
|
||||
->orWhere('file_number', 'like', '%'.$request->search.'%')
|
||||
->orWhere('trigger_type', 'like', '%'.$request->search.'%');
|
||||
});
|
||||
}
|
||||
|
||||
$histories = $query->paginate(15);
|
||||
|
||||
return view('admin.bel.history', [
|
||||
'histories' => $histories
|
||||
]);
|
||||
|
||||
} catch (\Exception $e) {
|
||||
Log::error('Error fetching history: ' . $e->getMessage());
|
||||
return back()->with('error', 'Gagal memuat riwayat bel');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<?php
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Factories\HasFactory;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
|
||||
class BellHistory extends Model
|
||||
{
|
||||
use HasFactory;
|
||||
|
||||
const TRIGGER_SCHEDULE = 'schedule';
|
||||
const TRIGGER_MANUAL = 'manual';
|
||||
|
||||
protected $fillable = [
|
||||
'hari',
|
||||
'waktu',
|
||||
'file_number',
|
||||
'trigger_type',
|
||||
'ring_time',
|
||||
'volume',
|
||||
'repeat'
|
||||
];
|
||||
|
||||
protected $casts = [
|
||||
'ring_time' => 'datetime',
|
||||
'volume' => 'integer',
|
||||
'repeat' => 'integer'
|
||||
];
|
||||
|
||||
public static function getTriggerTypes()
|
||||
{
|
||||
return [
|
||||
self::TRIGGER_SCHEDULE => 'Jadwal',
|
||||
self::TRIGGER_MANUAL => 'Manual'
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
'responses' => [
|
||||
'status' => 'bel/sekolah/response/status',
|
||||
'ack' => 'bel/sekolah/response/ack',
|
||||
'bell_ring' => 'bel/sekolah/response/ring',
|
||||
],
|
||||
'announcements' => [
|
||||
'general' => 'bel/sekolah/pengumuman',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up()
|
||||
{
|
||||
Schema::create('bell_histories', function (Blueprint $table) {
|
||||
$table->id();
|
||||
$table->string('hari');
|
||||
$table->time('waktu');
|
||||
$table->string('file_number', 4);
|
||||
$table->enum('trigger_type', ['schedule', 'manual']);
|
||||
$table->integer('volume');
|
||||
$table->integer('repeat');
|
||||
$table->timestamp('ring_time');
|
||||
$table->timestamps();
|
||||
});
|
||||
}
|
||||
|
||||
public function down()
|
||||
{
|
||||
Schema::dropIfExists('bell_histories');
|
||||
}
|
||||
};
|
||||
|
|
@ -4,25 +4,29 @@
|
|||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-md p-6">
|
||||
<!-- Card Container -->
|
||||
<div class="bg-white rounded-2xl shadow-lg p-6">
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-800">Tambah Jadwal Bel Baru</h2>
|
||||
<button onclick="showHelp()" class="text-blue-500 hover:text-blue-700">
|
||||
<h2 class="text-2xl font-bold text-gray-800">Tambah Jadwal Bel Baru</h2>
|
||||
<button onclick="showHelp()" class="text-blue-500 hover:text-blue-700 transition-colors duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<form id="createForm" action="{{ route('bel.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<!-- Input Fields -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Hari -->
|
||||
<div>
|
||||
<label for="hari" class="block text-sm font-medium text-gray-700 mb-1">Hari <span class="text-red-500">*</span></label>
|
||||
<select name="hari" id="hari" required
|
||||
class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
|
||||
class="block w-full rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 transition duration-300">
|
||||
<option value="">Pilih Hari</option>
|
||||
@foreach(\App\Models\JadwalBel::DAYS as $day)
|
||||
<option value="{{ $day }}" {{ old('hari') == $day ? 'selected' : '' }}>
|
||||
|
|
@ -40,7 +44,7 @@ class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 f
|
|||
<label for="waktu" class="block text-sm font-medium text-gray-700 mb-1">Waktu <span class="text-red-500">*</span></label>
|
||||
<input type="time" name="waktu" id="waktu" required
|
||||
value="{{ old('waktu') }}"
|
||||
class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
|
||||
class="block w-full rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 transition duration-300">
|
||||
@error('waktu')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
|
|
@ -51,7 +55,7 @@ class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 f
|
|||
<label for="file_number" class="block text-sm font-medium text-gray-700 mb-1">File MP3 <span class="text-red-500">*</span></label>
|
||||
<div class="relative">
|
||||
<select name="file_number" id="file_number" required
|
||||
class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border appearance-none">
|
||||
class="block w-full rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 appearance-none transition duration-300">
|
||||
<option value="">Pilih File</option>
|
||||
@for($i = 1; $i <= 50; $i++)
|
||||
<option value="{{ sprintf('%04d', $i) }}"
|
||||
|
|
@ -62,7 +66,7 @@ class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 f
|
|||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
|
||||
<path d="M9.293 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,14 +76,15 @@ class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 f
|
|||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="is_active" id="is_active" value="1"
|
||||
{{ old('is_active', true) ? 'checked' : '' }}
|
||||
class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
||||
<label for="is_active" class="ml-2 block text-sm text-gray-700">Aktifkan Jadwal Ini</label>
|
||||
class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 transition duration-300">
|
||||
<label for="is_active" class="text-sm text-gray-700">Aktifkan Jadwal Ini</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-8 flex justify-end space-x-3">
|
||||
<button type="button" onclick="confirmCancel()"
|
||||
class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg inline-flex items-center transition duration-300 shadow hover:shadow-md">
|
||||
|
|
@ -109,10 +114,10 @@ function showHelp() {
|
|||
title: 'Panduan Tambah Jadwal',
|
||||
html: `
|
||||
<div class="text-left">
|
||||
<p class="mb-2"><b>Hari:</b> Pilih hari sesuai jadwal bel</p>
|
||||
<p class="mb-2"><b>Waktu:</b> Masukkan waktu dalam format HH:MM</p>
|
||||
<p class="mb-2"><b>File MP3:</b> Pilih file suara yang akan diputar (0001-0050)</p>
|
||||
<p><b>Status:</b> Centang untuk mengaktifkan jadwal ini</p>
|
||||
<p class="mb-2"><b>Hari:</b> Pilih hari sesuai jadwal bel.</p>
|
||||
<p class="mb-2"><b>Waktu:</b> Masukkan waktu dalam format HH:MM.</p>
|
||||
<p class="mb-2"><b>File MP3:</b> Pilih file suara yang akan diputar (0001-0050).</p>
|
||||
<p><b>Status:</b> Centang untuk mengaktifkan jadwal ini.</p>
|
||||
</div>
|
||||
`,
|
||||
icon: 'info',
|
||||
|
|
@ -125,7 +130,7 @@ function showHelp() {
|
|||
function confirmCancel() {
|
||||
Swal.fire({
|
||||
title: 'Batalkan Penambahan?',
|
||||
text: 'Data yang sudah diisi akan hilang',
|
||||
text: 'Data yang sudah diisi akan hilang.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3B82F6',
|
||||
|
|
@ -146,6 +151,7 @@ function confirmCancel() {
|
|||
const submitBtn = document.getElementById('submitBtn');
|
||||
const originalText = submitBtn.innerHTML;
|
||||
|
||||
// Show loading spinner
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = `
|
||||
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
|
|
@ -155,8 +161,10 @@ function confirmCancel() {
|
|||
Menyimpan...
|
||||
`;
|
||||
|
||||
// Simpan data
|
||||
// Submit the form after a short delay to simulate processing
|
||||
setTimeout(() => {
|
||||
this.submit();
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Riwayat Bel Sekolah')
|
||||
|
||||
@section('content')
|
||||
<div class="p-4 sm:p-6">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="p-3 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Riwayat Bunyi Bel</h1>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Catatan lengkap semua aktivitas bel sekolah</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="{{ route('bel.index') }}" class="px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-300 flex items-center shadow-sm hover:shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Kembali
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Section -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6 transition-all duration-300">
|
||||
<form id="filter-form" action="{{ route('bel.history') }}" method="GET" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<!-- Search Box -->
|
||||
<div class="md:col-span-2">
|
||||
<label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Pencarian</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" id="search" name="search" value="{{ request('search') }}" placeholder="Cari berdasarkan file/hari..."
|
||||
class="block w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-700 transition duration-300 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trigger Type Filter -->
|
||||
<div>
|
||||
<label for="trigger_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Jenis Trigger</label>
|
||||
<select id="trigger_type" name="trigger_type" class="block w-full pl-3 pr-10 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-700 transition duration-300 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
|
||||
<option value="">Semua Jenis</option>
|
||||
<option value="schedule" {{ request('trigger_type') == 'schedule' ? 'selected' : '' }}>Jadwal</option>
|
||||
<option value="manual" {{ request('trigger_type') == 'manual' ? 'selected' : '' }}>Manual</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Filter -->
|
||||
<div>
|
||||
<label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tanggal</label>
|
||||
<input type="date" id="date" name="date" value="{{ request('date') }}"
|
||||
class="block w-full pl-3 pr-10 py-2 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-700 transition duration-300 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Total Data: <span class="font-medium">{{ $histories->total() }}</span>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
@if(request()->hasAny(['search', 'trigger_type', 'date']))
|
||||
<a href="{{ route('bel.history') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-300 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
Reset
|
||||
</a>
|
||||
@endif
|
||||
<button type="submit" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl hover:from-blue-600 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-lg flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Terapkan Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Bell History Table -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-300">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Waktu</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Hari</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Jam</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">File</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Trigger</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Volume</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Pengulangan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
@forelse($histories as $history)
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ $history->ring_time->format('d M Y') }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ $history->ring_time->format('H:i:s') }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100">
|
||||
{{ $history->hari }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ $history->waktu }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gradient-to-r from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 text-purple-800 dark:text-purple-200">
|
||||
{{ $history->file_number }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($history->trigger_type == 'schedule')
|
||||
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 text-green-800 dark:text-green-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Jadwal
|
||||
</span>
|
||||
@else
|
||||
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 text-blue-800 dark:text-blue-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||
</svg>
|
||||
Manual
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m4.242-12.728a9 9 0 012.728 2.728" />
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{{ $history->volume ?? '15' }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
<span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full">
|
||||
{{ $history->repeat ?? '1' }}x
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-6 py-12 text-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Tidak ada data riwayat</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Belum ada aktivitas bel yang tercatat</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@if($histories->hasPages())
|
||||
<div class="bg-white dark:bg-gray-800 px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400 mb-2 sm:mb-0">
|
||||
Menampilkan <span class="font-medium">{{ $histories->firstItem() }}</span> sampai <span class="font-medium">{{ $histories->lastItem() }}</span> dari <span class="font-medium">{{ $histories->total() }}</span> entri
|
||||
</div>
|
||||
<div class="flex space-x-1">
|
||||
{{ $histories->links('vendor.pagination.tailwind') }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Live Clock
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const clockElement = document.getElementById('liveClock');
|
||||
if (clockElement) {
|
||||
clockElement.textContent =
|
||||
now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
}
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
// Toast notification
|
||||
const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
didOpen: (toast) => {
|
||||
toast.addEventListener('mouseenter', Swal.stopTimer)
|
||||
toast.addEventListener('mouseleave', Swal.resumeTimer)
|
||||
}
|
||||
});
|
||||
|
||||
// // Show success message if exists
|
||||
// @if(session('success'))
|
||||
// Toast.fire({
|
||||
// icon: 'success',
|
||||
// title: '{{ session('success') }}',
|
||||
// background: '#f0fdf4',
|
||||
// iconColor: '#16a34a',
|
||||
// color: '#166534'
|
||||
// });
|
||||
// @endif
|
||||
|
||||
// @if(session('error'))
|
||||
// Toast.fire({
|
||||
// icon: 'error',
|
||||
// title: '{{ session('error') }}',
|
||||
// background: '#fef2f2',
|
||||
// iconColor: '#dc2626',
|
||||
// color: '#991b1b'
|
||||
// });
|
||||
// @endif
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -20,6 +20,14 @@
|
|||
<span id="liveClock">{{ now()->format('H:i:s') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Tombol History -->
|
||||
<a href="{{ route('bel.history') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center transition duration-300 shadow-md hover:shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Riwayat Bel
|
||||
</a>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<a href="{{ route('bel.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition duration-300 shadow-md hover:shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
|
|
@ -439,7 +447,6 @@ function confirmDeleteAll() {
|
|||
}
|
||||
|
||||
// Toggle schedule status
|
||||
// Toggle schedule status - MODIFIED VERSION
|
||||
function toggleScheduleStatus(checkbox, id) {
|
||||
const isActive = checkbox.checked;
|
||||
showLoading('Memperbarui status...');
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ class="dropdown-btn w-full text-left p-2 bg-gray-100 rounded-lg flex justify-bet
|
|||
</svg>
|
||||
</button>
|
||||
<ul class="dropdown hidden mt-2 ml-5 space-y-2">
|
||||
<li><a href="{{ route('admin.siswa') }}"
|
||||
<li><a href="{{ route('admin.siswa.index') }}"
|
||||
class="block p-2 rounded-lg {{ request()->is('admin/siswa') ? 'bg-blue-100 text-blue-600' : 'bg-gray-50 text-gray-800' }}">Siswa</a>
|
||||
</li>
|
||||
<li><a href="{{ route('admin.guru') }}"
|
||||
|
|
|
|||
|
|
@ -3,23 +3,98 @@
|
|||
@section('title', 'Smart School | Tambah Jurusan')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-2xl mx-auto">
|
||||
<!-- Header Card -->
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-white flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Tambah Jurusan Baru
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<h1 class="text-2xl font-semibold mb-4">Tambah Jurusan</h1>
|
||||
|
||||
<form action="{{ route('admin.jurusan.store') }}" method="POST">
|
||||
<!-- Form Section -->
|
||||
<div class="p-6">
|
||||
<form id="createForm" action="{{ route('admin.jurusan.store') }}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-4">
|
||||
<label for="nama_jurusan" class="block text-sm font-medium text-gray-700">Nama Jurusan</label>
|
||||
<input type="text" id="nama_jurusan" name="nama_jurusan" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" required>
|
||||
|
||||
<!-- Nama Jurusan -->
|
||||
<div class="mb-6">
|
||||
<label for="nama_jurusan" class="block text-sm font-medium text-gray-700 mb-2">Nama Jurusan</label>
|
||||
<input type="text" name="nama_jurusan" id="nama_jurusan"
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-300"
|
||||
value="{{ old('nama_jurusan') }}"
|
||||
placeholder="Contoh: Teknik Komputer dan Jaringan" required>
|
||||
@error('nama_jurusan')
|
||||
<div class="text-red-500 text-sm mt-2">{{ $message }}</div>
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">Simpan</button>
|
||||
<a href="{{ route('admin.jurusan.index') }}" class="ml-4 text-gray-700 hover:text-gray-900">Kembali</a>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="{{ route('admin.jurusan.index') }}"
|
||||
class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-300 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Batal
|
||||
</a>
|
||||
<button type="button" onclick="confirmCreate()"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-300 shadow-md hover:shadow-lg flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmCreate() {
|
||||
const form = document.getElementById('createForm');
|
||||
const namaJurusan = document.getElementById('nama_jurusan').value;
|
||||
|
||||
if (!namaJurusan) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Oops...',
|
||||
text: 'Nama jurusan harus diisi!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Tambah Jurusan Baru?',
|
||||
html: `Anda akan menambahkan jurusan:<br><strong>${namaJurusan}</strong>`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Simpan!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Menyimpan...',
|
||||
html: 'Mohon tunggu sebentar',
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -3,24 +3,90 @@
|
|||
@section('title', 'Smart School | Edit Jurusan')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-2xl mx-auto">
|
||||
<!-- Header Card -->
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-white flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
Edit Data Jurusan
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<h1 class="text-2xl font-semibold mb-4">Edit Jurusan</h1>
|
||||
|
||||
<form action="{{ route('admin.jurusan.update', $jurusan->id) }}" method="POST">
|
||||
<!-- Form Section -->
|
||||
<div class="p-6">
|
||||
<form id="editForm" action="{{ route('admin.jurusan.update', $jurusan->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="mb-4">
|
||||
<label for="nama_jurusan" class="block text-sm font-medium text-gray-700">Nama Jurusan</label>
|
||||
<input type="text" id="nama_jurusan" name="nama_jurusan" value="{{ old('nama_jurusan', $jurusan->nama_jurusan) }}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" required>
|
||||
|
||||
<!-- Nama Jurusan -->
|
||||
<div class="mb-6">
|
||||
<label for="nama_jurusan" class="block text-sm font-medium text-gray-700 mb-2">Nama Jurusan</label>
|
||||
<input type="text" name="nama_jurusan" id="nama_jurusan"
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-300"
|
||||
value="{{ old('nama_jurusan', $jurusan->nama_jurusan) }}"
|
||||
placeholder="Contoh: Teknik Komputer dan Jaringan" required>
|
||||
@error('nama_jurusan')
|
||||
<div class="text-red-500 text-sm mt-2">{{ $message }}</div>
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">Update</button>
|
||||
<a href="{{ route('admin.jurusan.index') }}" class="ml-4 text-gray-700 hover:text-gray-900">Kembali</a>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="{{ route('admin.jurusan.index') }}"
|
||||
class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-300 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Batal
|
||||
</a>
|
||||
<button type="button" onclick="confirmUpdate()"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-300 shadow-md hover:shadow-lg flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmUpdate() {
|
||||
const form = document.getElementById('editForm');
|
||||
const namaJurusan = document.getElementById('nama_jurusan').value;
|
||||
|
||||
Swal.fire({
|
||||
title: 'Update Data Jurusan?',
|
||||
html: `Anda akan mengupdate jurusan menjadi:<br><strong>${namaJurusan}</strong>`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Update!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Memperbarui...',
|
||||
html: 'Mohon tunggu sebentar',
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,46 +1,154 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Smart School | Jurusan')
|
||||
@section('title', 'Smart School | Manajemen Jurusan')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800">Manajemen Jurusan</h1>
|
||||
<p class="text-sm text-gray-600">Kelola data jurusan sekolah</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-2xl font-semibold">Data Jurusan</h1>
|
||||
<a href="{{ route('admin.jurusan.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
|
||||
+ Tambah Jurusan
|
||||
<a href="{{ route('admin.jurusan.create') }}"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition duration-300 shadow-md hover:shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Tambah Jurusan
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-200">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left text-gray-700">
|
||||
<th class="border px-4 py-2">No</th>
|
||||
<th class="border px-4 py-2">Nama Jurusan</th>
|
||||
<th class="border px-4 py-2 text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($jurusan as $index => $item)
|
||||
<tr class="border hover:bg-gray-50">
|
||||
<td class="border px-4 py-2">{{ $index + 1 }}</td>
|
||||
<td class="border px-4 py-2">{{ $item->nama_jurusan }}</td>
|
||||
<td class="border px-4 py-2 text-center">
|
||||
<a href="{{ route('admin.jurusan.edit', $item->id) }}" class="bg-yellow-400 hover:bg-yellow-500 text-white px-3 py-1 rounded">Edit</a>
|
||||
<form action="{{ route('admin.jurusan.destroy', $item->id) }}" method="POST" class="inline-block">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" onclick="return confirm('Yakin ingin menghapus?')" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">
|
||||
Hapus
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Stats Card -->
|
||||
<div class="grid grid-cols-1 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-blue-500">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 rounded-full bg-blue-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-sm font-medium text-gray-500">Total Jurusan</h3>
|
||||
<p class="text-lg font-semibold text-gray-700">{{ $jurusan->count() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<!-- Filter and Search -->
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<form action="{{ route('admin.jurusan.index') }}" method="GET" class="flex flex-wrap items-center gap-4 w-full md:w-auto">
|
||||
<!-- Search Box -->
|
||||
<div class="w-full md:w-auto flex-grow">
|
||||
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari Jurusan</label>
|
||||
<div class="relative">
|
||||
<input type="text" id="search" name="search" placeholder="Cari nama jurusan..."
|
||||
value="{{ request('search') }}"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 pl-10">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(request('search'))
|
||||
<div class="flex items-end">
|
||||
<a href="{{ route('admin.jurusan.index') }}" class="text-sm text-blue-600 hover:underline flex items-center mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Reset Filter
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jurusan Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Jurusan</th>
|
||||
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($jurusan as $index => $item)
|
||||
<tr class="hover:bg-gray-50 transition duration-150">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $index + 1 }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">{{ $item->nama_jurusan }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div class="flex justify-end space-x-2">
|
||||
<a href="{{ route('admin.jurusan.edit', $item->id) }}"
|
||||
class="text-yellow-600 hover:text-yellow-900 inline-flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</a>
|
||||
<form action="{{ route('admin.jurusan.destroy', $item->id) }}" method="POST" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="button" onclick="confirmDelete('{{ $item->nama_jurusan }}', this.form)"
|
||||
class="text-red-600 hover:text-red-900 inline-flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="3" class="px-6 py-4 text-center text-gray-500">Belum ada data jurusan</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@if($jurusan->hasPages())
|
||||
<div class="px-6 py-4 border-t border-gray-200">
|
||||
{{ $jurusan->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmDelete(name, form) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Jurusan?',
|
||||
html: `Anda akan menghapus jurusan <strong>${name}</strong>`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Hapus!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,32 +1,118 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Tambah Kelas')
|
||||
@section('title', 'Smart School | Tambah Kelas')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-white shadow-md rounded-lg p-6 max-w-lg mx-auto">
|
||||
<h1 class="text-2xl font-semibold mb-4">Tambah Kelas</h1>
|
||||
<form action="{{ route('admin.kelas.store') }}" method="POST">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-2xl mx-auto">
|
||||
<!-- Header Card -->
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-white flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Tambah Kelas Baru
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Form Section -->
|
||||
<div class="p-6">
|
||||
<form id="createForm" action="{{ route('admin.kelas.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block mb-1 font-medium">Nama Kelas</label>
|
||||
<input type="text" name="nama_kelas" class="w-full border px-4 py-2 rounded" required>
|
||||
<!-- Nama Kelas -->
|
||||
<div class="mb-6">
|
||||
<label for="nama_kelas" class="block text-sm font-medium text-gray-700 mb-2">Nama Kelas</label>
|
||||
<input type="text" name="nama_kelas" id="nama_kelas"
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-300"
|
||||
value="{{ old('nama_kelas') }}"
|
||||
placeholder="Contoh: X IPA 1" required>
|
||||
@error('nama_kelas')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block mb-1 font-medium">Jurusan</label>
|
||||
<select name="id_jurusan" class="w-full border px-4 py-2 rounded" required>
|
||||
<!-- Jurusan -->
|
||||
<div class="mb-6">
|
||||
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-2">Jurusan</label>
|
||||
<select name="id_jurusan" id="id_jurusan"
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-300">
|
||||
<option value="">-- Pilih Jurusan --</option>
|
||||
@foreach ($jurusan as $item)
|
||||
<option value="{{ $item->id }}">{{ $item->nama_jurusan }}</option>
|
||||
<option value="{{ $item->id }}" {{ old('id_jurusan') == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('id_jurusan')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<a href="{{ route('admin.kelas.index') }}" class="bg-gray-300 px-4 py-2 rounded mr-2">Batal</a>
|
||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Simpan</button>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="{{ route('admin.kelas.index') }}"
|
||||
class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-300 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Batal
|
||||
</a>
|
||||
<button type="button" onclick="confirmCreate()"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-300 shadow-md hover:shadow-lg flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmCreate() {
|
||||
const form = document.getElementById('createForm');
|
||||
const namaKelas = document.getElementById('nama_kelas').value;
|
||||
const jurusan = document.getElementById('id_jurusan').options[document.getElementById('id_jurusan').selectedIndex].text;
|
||||
|
||||
if (!namaKelas) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Oops...',
|
||||
text: 'Nama kelas harus diisi!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Tambah Kelas Baru?',
|
||||
html: `Anda akan menambahkan kelas:<br><strong>${namaKelas}</strong>`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Simpan!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Menyimpan...',
|
||||
html: 'Mohon tunggu sebentar',
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,35 +1,111 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Edit Kelas')
|
||||
@section('title', 'Smart School | Edit Kelas')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-white shadow-md rounded-lg p-6 max-w-lg mx-auto">
|
||||
<h1 class="text-2xl font-semibold mb-4">Edit Kelas</h1>
|
||||
<form action="{{ route('admin.kelas.update', $kelas->id) }}" method="POST">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-2xl mx-auto">
|
||||
<!-- Header Card -->
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
|
||||
<h1 class="text-xl font-semibold text-white flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
Edit Data Kelas
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Form Section -->
|
||||
<div class="p-6">
|
||||
<form id="editForm" action="{{ route('admin.kelas.update', $kelas->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block mb-1 font-medium">Nama Kelas</label>
|
||||
<input type="text" name="nama_kelas" value="{{ $kelas->nama_kelas }}" class="w-full border px-4 py-2 rounded" required>
|
||||
<!-- Nama Kelas -->
|
||||
<div class="mb-6">
|
||||
<label for="nama_kelas" class="block text-sm font-medium text-gray-700 mb-2">Nama Kelas</label>
|
||||
<input type="text" name="nama_kelas" id="nama_kelas"
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-300"
|
||||
value="{{ old('nama_kelas', $kelas->nama_kelas) }}"
|
||||
placeholder="Contoh: X IPA 1" required>
|
||||
@error('nama_kelas')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block mb-1 font-medium">Jurusan</label>
|
||||
<select name="id_jurusan" class="w-full border px-4 py-2 rounded" required>
|
||||
<!-- Jurusan -->
|
||||
<div class="mb-6">
|
||||
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-2">Jurusan</label>
|
||||
<select name="id_jurusan" id="id_jurusan"
|
||||
class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-300">
|
||||
<option value="">-- Pilih Jurusan --</option>
|
||||
@foreach ($jurusan as $item)
|
||||
<option value="{{ $item->id }}" {{ $kelas->id_jurusan == $item->id ? 'selected' : '' }}>
|
||||
<option value="{{ $item->id }}" {{ old('id_jurusan', $kelas->id_jurusan) == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('id_jurusan')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<a href="{{ route('admin.kelas.index') }}" class="bg-gray-300 px-4 py-2 rounded mr-2">Batal</a>
|
||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Update</button>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="{{ route('admin.kelas.index') }}"
|
||||
class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition duration-300 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Batal
|
||||
</a>
|
||||
<button type="button" onclick="confirmUpdate()"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition duration-300 shadow-md hover:shadow-lg flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmUpdate() {
|
||||
const form = document.getElementById('editForm');
|
||||
const namaKelas = document.getElementById('nama_kelas').value;
|
||||
const jurusan = document.getElementById('id_jurusan').options[document.getElementById('id_jurusan').selectedIndex].text;
|
||||
|
||||
Swal.fire({
|
||||
title: 'Update Data Kelas?',
|
||||
html: `Anda akan mengupdate kelas menjadi:<br>
|
||||
<strong>${namaKelas}</strong>`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Update!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Memperbarui...',
|
||||
html: 'Mohon tunggu sebentar',
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,50 +1,169 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Smart School | Kelas')
|
||||
@section('title', 'Smart School | Manajemen Kelas')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800">Manajemen Kelas</h1>
|
||||
<p class="text-sm text-gray-600">Kelola data kelas dan jurusan</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-2xl font-semibold">Data Kelas</h1>
|
||||
<a href="{{ route('admin.kelas.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
|
||||
+ Tambah Kelas
|
||||
<a href="{{ route('admin.kelas.create') }}"
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition duration-300 shadow-md hover:shadow-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Tambah Kelas
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-200">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left text-gray-700">
|
||||
<th class="border px-4 py-2">No</th>
|
||||
<th class="border px-4 py-2">Nama Kelas</th>
|
||||
<th class="border px-4 py-2">Nama Jurusan</th>
|
||||
<th class="border px-4 py-2 text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($kelas as $index => $item)
|
||||
<tr class="border hover:bg-gray-50">
|
||||
<td class="border px-4 py-2">{{ $index + 1 }}</td>
|
||||
<td class="border px-4 py-2">{{ $item->nama_kelas }}</td>
|
||||
<td class="border px-4 py-2">
|
||||
{{ $item->jurusan ? $item->jurusan->nama_jurusan : '-' }}
|
||||
</td>
|
||||
<td class="border px-4 py-2 text-center">
|
||||
<a href="{{ route('admin.kelas.edit', $item->id) }}" class="bg-yellow-400 hover:bg-yellow-500 text-white px-3 py-1 rounded">Edit</a>
|
||||
<form action="{{ route('admin.kelas.destroy', $item->id) }}" method="POST" class="inline-block">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" onclick="return confirm('Yakin ingin menghapus?')" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">
|
||||
Hapus
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Stats Card -->
|
||||
<div class="grid grid-cols-1 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-blue-500">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 rounded-full bg-blue-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-sm font-medium text-gray-500">Total Kelas</h3>
|
||||
<p class="text-lg font-semibold text-gray-700">{{ $kelas->count() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<!-- Filter and Search -->
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<form action="{{ route('admin.kelas.index') }}" method="GET" class="flex flex-wrap items-center gap-4 w-full md:w-auto">
|
||||
<!-- Search Box -->
|
||||
<div class="w-full md:w-auto flex-grow">
|
||||
<label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari Kelas</label>
|
||||
<div class="relative">
|
||||
<input type="text" id="search" name="search" placeholder="Cari nama kelas..."
|
||||
value="{{ request('search') }}"
|
||||
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 pl-10">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(request('search'))
|
||||
<div class="flex items-end">
|
||||
<a href="{{ route('admin.kelas.index') }}" class="text-sm text-blue-600 hover:underline flex items-center mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Reset Filter
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kelas Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Kelas</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jurusan</th>
|
||||
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($kelas as $index => $item)
|
||||
<tr class="hover:bg-gray-50 transition duration-150">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $index + 1 }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">{{ $item->nama_kelas }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($item->jurusan)
|
||||
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||
{{ $item->jurusan->nama_jurusan }}
|
||||
</span>
|
||||
@else
|
||||
<span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
|
||||
-
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div class="flex justify-end space-x-2">
|
||||
<a href="{{ route('admin.kelas.edit', $item->id) }}"
|
||||
class="text-yellow-600 hover:text-yellow-900 inline-flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</a>
|
||||
<form action="{{ route('admin.kelas.destroy', $item->id) }}" method="POST" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="button" onclick="confirmDelete('{{ $item->nama_kelas }}', this.form)"
|
||||
class="text-red-600 hover:text-red-900 inline-flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-4 text-center text-gray-500">Belum ada data kelas</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@if($kelas->hasPages())
|
||||
<div class="px-6 py-4 border-t border-gray-200">
|
||||
{{ $kelas->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmDelete(name, form) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Kelas?',
|
||||
html: `Anda akan menghapus kelas <strong>${name}</strong>`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Hapus!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -3,43 +3,267 @@
|
|||
@section('title', 'Smart School | Tambah Ruangan')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Header with Breadcrumb -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800">Tambah Ruangan Baru</h1>
|
||||
<nav class="flex mt-2" aria-label="Breadcrumb">
|
||||
<ol class="inline-flex items-center space-x-1 md:space-x-2">
|
||||
<li class="inline-flex items-center">
|
||||
<a href="{{ route('admin.dashboard') }}" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="{{ route('admin.ruangan.index') }}" class="ml-1 text-sm font-medium text-gray-600 hover:text-blue-500 md:ml-2">Manajemen Ruangan</a>
|
||||
</div>
|
||||
</li>
|
||||
<li aria-current="page">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Tambah Baru</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6 max-w-xl mx-auto">
|
||||
<h1 class="text-2xl font-semibold mb-4">Tambah Ruangan</h1>
|
||||
<!-- Form Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<!-- Card Header -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4 flex items-center">
|
||||
<div class="p-2 rounded-full bg-white bg-opacity-20 mr-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-white">Form Tambah Ruangan</h2>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.ruangan.store') }}" method="POST">
|
||||
<!-- Form Content -->
|
||||
<div class="p-6">
|
||||
<form id="createForm" action="{{ route('admin.ruangan.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="nama_ruangan" class="block font-medium">Nama Ruangan</label>
|
||||
<input type="text" name="nama_ruangan" id="nama_ruangan" class="w-full border px-4 py-2 rounded-lg" required value="{{ old('nama_ruangan') }}">
|
||||
<!-- Nama Ruangan -->
|
||||
<div class="mb-6">
|
||||
<label for="nama_ruangan" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Nama Ruangan
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input type="text" name="nama_ruangan" id="nama_ruangan"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 pl-10"
|
||||
value="{{ old('nama_ruangan') }}"
|
||||
placeholder="Contoh: Ruang 101" required>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@error('nama_ruangan')
|
||||
<p class="mt-2 text-sm text-red-600 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="id_kelas" class="block font-medium">Kelas</label>
|
||||
<select name="id_kelas" id="id_kelas" class="w-full border px-4 py-2 rounded-lg" required>
|
||||
<!-- Kelas -->
|
||||
<div class="mb-6">
|
||||
<label for="id_kelas" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
Kelas
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select name="id_kelas" id="id_kelas"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 appearance-none pl-10" required>
|
||||
<option value="">-- Pilih Kelas --</option>
|
||||
@foreach ($kelas as $k)
|
||||
<option value="{{ $k->id }}" {{ old('id_kelas') == $k->id ? 'selected' : '' }}>{{ $k->nama_kelas }}</option>
|
||||
<option value="{{ $k->id }}" {{ old('id_kelas') == $k->id ? 'selected' : '' }}>
|
||||
{{ $k->nama_kelas }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@error('id_kelas')
|
||||
<p class="mt-2 text-sm text-red-600 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="id_jurusan" class="block font-medium">Jurusan</label>
|
||||
<select name="id_jurusan" id="id_jurusan" class="w-full border px-4 py-2 rounded-lg" required>
|
||||
<!-- Jurusan -->
|
||||
<div class="mb-8">
|
||||
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
Jurusan
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select name="id_jurusan" id="id_jurusan"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 appearance-none pl-10" required>
|
||||
<option value="">-- Pilih Jurusan --</option>
|
||||
@foreach ($jurusan as $j)
|
||||
<option value="{{ $j->id }}" {{ old('id_jurusan') == $j->id ? 'selected' : '' }}>{{ $j->nama_jurusan }}</option>
|
||||
<option value="{{ $j->id }}" {{ old('id_jurusan') == $j->id ? 'selected' : '' }}>
|
||||
{{ $j->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@error('id_jurusan')
|
||||
<p class="mt-2 text-sm text-red-600 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<a href="{{ route('admin.ruangan.index') }}" class="mr-2 px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">Simpan</button>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-4 pt-4 border-t border-gray-200">
|
||||
<a href="{{ route('admin.ruangan.index') }}"
|
||||
class="px-6 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition duration-300 flex items-center shadow-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Kembali
|
||||
</a>
|
||||
<button type="button" onclick="confirmCreate()"
|
||||
class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white px-6 py-2.5 rounded-lg transition duration-300 shadow-lg hover:shadow-xl flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Simpan Ruangan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmCreate() {
|
||||
const form = document.getElementById('createForm');
|
||||
const namaRuangan = document.getElementById('nama_ruangan').value;
|
||||
const kelas = document.getElementById('id_kelas').options[document.getElementById('id_kelas').selectedIndex].text;
|
||||
const jurusan = document.getElementById('id_jurusan').options[document.getElementById('id_jurusan').selectedIndex].text;
|
||||
|
||||
if (!namaRuangan || !document.getElementById('id_kelas').value || !document.getElementById('id_jurusan').value) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Form Tidak Lengkap',
|
||||
html: 'Harap lengkapi semua field yang diperlukan!',
|
||||
confirmButtonColor: '#3B82F6',
|
||||
iconColor: '#EF4444',
|
||||
background: '#ffffff',
|
||||
backdrop: `
|
||||
rgba(234, 88, 12, 0.1)
|
||||
url("https://sweetalert2.github.io/images/nyan-cat.gif")
|
||||
left top
|
||||
no-repeat
|
||||
`
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Konfirmasi Tambah Ruangan',
|
||||
html: `
|
||||
<div class="text-left">
|
||||
<p class="mb-2">Anda akan menambahkan ruangan baru dengan detail:</p>
|
||||
<div class="bg-gray-50 p-3 rounded-lg">
|
||||
<div class="flex mb-1">
|
||||
<span class="w-24 font-medium">Nama Ruangan:</span>
|
||||
<span class="font-semibold">${namaRuangan}</span>
|
||||
</div>
|
||||
<div class="flex mb-1">
|
||||
<span class="w-24 font-medium">Kelas:</span>
|
||||
<span class="font-semibold">${kelas}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="w-24 font-medium">Jurusan:</span>
|
||||
<span class="font-semibold">${jurusan}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3B82F6',
|
||||
cancelButtonColor: '#6B7280',
|
||||
confirmButtonText: 'Ya, Simpan!',
|
||||
cancelButtonText: 'Batal',
|
||||
background: '#ffffff',
|
||||
backdrop: `
|
||||
rgba(0,0,0,0.7)
|
||||
url("https://sweetalert2.github.io/images/nyan-cat.gif")
|
||||
left top
|
||||
no-repeat
|
||||
`
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Menyimpan Data',
|
||||
html: 'Sedang memproses data ruangan...',
|
||||
timerProgressBar: true,
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -3,44 +3,268 @@
|
|||
@section('title', 'Smart School | Edit Ruangan')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Header with Breadcrumb -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800">Edit Data Ruangan</h1>
|
||||
<nav class="flex mt-2" aria-label="Breadcrumb">
|
||||
<ol class="inline-flex items-center space-x-1 md:space-x-2">
|
||||
<li class="inline-flex items-center">
|
||||
<a href="{{ route('admin.dashboard') }}" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="{{ route('admin.ruangan.index') }}" class="ml-1 text-sm font-medium text-gray-600 hover:text-blue-500 md:ml-2">Manajemen Ruangan</a>
|
||||
</div>
|
||||
</li>
|
||||
<li aria-current="page">
|
||||
<div class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Edit Ruangan</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6 max-w-xl mx-auto">
|
||||
<h1 class="text-2xl font-semibold mb-4">Edit Ruangan</h1>
|
||||
<!-- Form Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<!-- Card Header -->
|
||||
<div class="bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-4 flex items-center">
|
||||
<div class="p-2 rounded-full bg-white bg-opacity-20 mr-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-white">Form Edit Ruangan</h2>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.ruangan.update', $ruangan->id) }}" method="POST">
|
||||
<!-- Form Content -->
|
||||
<div class="p-6">
|
||||
<form id="editForm" action="{{ route('admin.ruangan.update', $ruangan->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="nama_ruangan" class="block font-medium">Nama Ruangan</label>
|
||||
<input type="text" name="nama_ruangan" id="nama_ruangan" class="w-full border px-4 py-2 rounded-lg" value="{{ old('nama_ruangan', $ruangan->nama_ruangan) }}" required>
|
||||
<!-- Nama Ruangan -->
|
||||
<div class="mb-6">
|
||||
<label for="nama_ruangan" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Nama Ruangan
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input type="text" name="nama_ruangan" id="nama_ruangan"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 pl-10"
|
||||
value="{{ old('nama_ruangan', $ruangan->nama_ruangan) }}"
|
||||
placeholder="Contoh: Ruang 101" required>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@error('nama_ruangan')
|
||||
<p class="mt-2 text-sm text-red-600 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="kelas_id" class="block font-medium">Kelas</label>
|
||||
<select name="kelas_id" id="kelas_id" class="w-full border px-4 py-2 rounded-lg" required>
|
||||
<!-- Kelas -->
|
||||
<div class="mb-6">
|
||||
<label for="id_kelas" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
Kelas
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select name="id_kelas" id="id_kelas"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 appearance-none pl-10" required>
|
||||
<option value="">-- Pilih Kelas --</option>
|
||||
@foreach ($kelas as $k)
|
||||
<option value="{{ $k->id }}" {{ $ruangan->kelas_id == $k->id ? 'selected' : '' }}>{{ $k->nama_kelas }}</option>
|
||||
<option value="{{ $k->id }}" {{ old('id_kelas', $ruangan->id_kelas) == $k->id ? 'selected' : '' }}>
|
||||
{{ $k->nama_kelas }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@error('id_kelas')
|
||||
<p class="mt-2 text-sm text-red-600 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="jurusan_id" class="block font-medium">Jurusan</label>
|
||||
<select name="jurusan_id" id="jurusan_id" class="w-full border px-4 py-2 rounded-lg" required>
|
||||
<!-- Jurusan -->
|
||||
<div class="mb-8">
|
||||
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-2 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
Jurusan
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select name="id_jurusan" id="id_jurusan"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition duration-300 appearance-none pl-10" required>
|
||||
<option value="">-- Pilih Jurusan --</option>
|
||||
@foreach ($jurusan as $j)
|
||||
<option value="{{ $j->id }}" {{ $ruangan->jurusan_id == $j->id ? 'selected' : '' }}>{{ $j->nama_jurusan }}</option>
|
||||
<option value="{{ $j->id }}" {{ old('id_jurusan', $ruangan->id_jurusan) == $j->id ? 'selected' : '' }}>
|
||||
{{ $j->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@error('id_jurusan')
|
||||
<p class="mt-2 text-sm text-red-600 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
{{ $message }}
|
||||
</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<a href="{{ route('admin.ruangan.index') }}" class="mr-2 px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
|
||||
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">Update</button>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-4 pt-4 border-t border-gray-200">
|
||||
<a href="{{ route('admin.ruangan.index') }}"
|
||||
class="px-6 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition duration-300 flex items-center shadow-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Kembali
|
||||
</a>
|
||||
<button type="button" onclick="confirmUpdate()"
|
||||
class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white px-6 py-2.5 rounded-lg transition duration-300 shadow-lg hover:shadow-xl flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Perbarui Data
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmUpdate() {
|
||||
const form = document.getElementById('editForm');
|
||||
const namaRuangan = document.getElementById('nama_ruangan').value;
|
||||
const kelas = document.getElementById('id_kelas').options[document.getElementById('id_kelas').selectedIndex].text;
|
||||
const jurusan = document.getElementById('id_jurusan').options[document.getElementById('id_jurusan').selectedIndex].text;
|
||||
|
||||
if (!namaRuangan || !document.getElementById('id_kelas').value || !document.getElementById('id_jurusan').value) {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Form Tidak Lengkap',
|
||||
html: 'Harap lengkapi semua field yang diperlukan!',
|
||||
confirmButtonColor: '#3B82F6',
|
||||
iconColor: '#EF4444',
|
||||
background: '#ffffff',
|
||||
backdrop: `
|
||||
rgba(234, 88, 12, 0.1)
|
||||
url("https://sweetalert2.github.io/images/nyan-cat.gif")
|
||||
left top
|
||||
no-repeat
|
||||
`
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
Swal.fire({
|
||||
title: 'Konfirmasi Perubahan Data',
|
||||
html: `
|
||||
<div class="text-left">
|
||||
<p class="mb-2">Anda akan memperbarui data ruangan dengan detail:</p>
|
||||
<div class="bg-gray-50 p-3 rounded-lg">
|
||||
<div class="flex mb-1">
|
||||
<span class="w-24 font-medium">Nama Ruangan:</span>
|
||||
<span class="font-semibold">${namaRuangan}</span>
|
||||
</div>
|
||||
<div class="flex mb-1">
|
||||
<span class="w-24 font-medium">Kelas:</span>
|
||||
<span class="font-semibold">${kelas}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span class="w-24 font-medium">Jurusan:</span>
|
||||
<span class="font-semibold">${jurusan}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3B82F6',
|
||||
cancelButtonColor: '#6B7280',
|
||||
confirmButtonText: 'Ya, Perbarui!',
|
||||
cancelButtonText: 'Batal',
|
||||
background: '#ffffff',
|
||||
backdrop: `
|
||||
rgba(0,0,0,0.7)
|
||||
url("https://sweetalert2.github.io/images/nyan-cat.gif")
|
||||
left top
|
||||
no-repeat
|
||||
`
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Memperbarui Data',
|
||||
html: 'Sedang menyimpan perubahan...',
|
||||
timerProgressBar: true,
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,50 +1,241 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Smart School | Ruangan')
|
||||
@section('title', 'Smart School | Manajemen Ruangan')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header Section with Gradient -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-800">Manajemen Ruangan</h1>
|
||||
<div class="flex items-center mt-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<p class="text-sm text-gray-600">Kelola data ruangan kelas dan jurusan dengan mudah</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h1 class="text-2xl font-semibold">Data Ruangan</h1>
|
||||
<a href="{{ route('admin.ruangan.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
|
||||
+ Tambah Ruangan
|
||||
<a href="{{ route('admin.ruangan.create') }}"
|
||||
class="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white px-6 py-3 rounded-lg flex items-center transition duration-300 shadow-lg hover:shadow-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Tambah Ruangan Baru
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-200">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left text-gray-700">
|
||||
<th class="border px-4 py-2">No</th>
|
||||
<th class="border px-4 py-2">Nama Ruangan</th>
|
||||
<th class="border px-4 py-2">Kelas</th>
|
||||
<th class="border px-4 py-2">Jurusan</th>
|
||||
<th class="border px-4 py-2 text-center">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($ruangan as $index => $item)
|
||||
<tr class="border hover:bg-gray-50">
|
||||
<td class="border px-4 py-2">{{ $index + 1 }}</td>
|
||||
<td class="border px-4 py-2">{{ $item->nama_ruangan }}</td>
|
||||
<td class="border px-4 py-2">{{ $item->kelas->nama_kelas ?? '-' }}</td>
|
||||
<td class="border px-4 py-2">{{ $item->jurusan->nama_jurusan ?? '-' }}</td>
|
||||
<td class="border px-4 py-2 text-center">
|
||||
<a href="{{ route('admin.ruangan.edit', $item->id) }}" class="bg-yellow-400 hover:bg-yellow-500 text-white px-3 py-1 rounded">Edit</a>
|
||||
<form action="{{ route('admin.ruangan.destroy', $item->id) }}" method="POST" class="inline-block">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" onclick="return confirm('Yakin ingin menghapus?')" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">
|
||||
Hapus
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<!-- Total Ruangan -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500 hover:shadow-md transition duration-300">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 rounded-full bg-blue-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-sm font-medium text-gray-500">Total Ruangan</h3>
|
||||
<p class="text-2xl font-bold text-gray-700">{{ $ruangan->count() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ruangan Aktif -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-500 hover:shadow-md transition duration-300">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 rounded-full bg-green-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-sm font-medium text-gray-500">Ruangan Tersedia</h3>
|
||||
<p class="text-2xl font-bold text-gray-700">{{ $ruangan->count() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ruangan per Jurusan -->
|
||||
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-purple-500 hover:shadow-md transition duration-300">
|
||||
<div class="flex items-center">
|
||||
<div class="p-3 rounded-full bg-purple-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h3 class="text-sm font-medium text-gray-500">Jurusan Terdaftar</h3>
|
||||
<p class="text-2xl font-bold text-gray-700">{{ $ruangan->unique('jurusan_id')->count() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<!-- Card Header with Filter -->
|
||||
<div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-800">Daftar Ruangan</h2>
|
||||
<p class="text-sm text-gray-500">Manajemen semua ruangan yang terdaftar</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('admin.ruangan.index') }}" method="GET" class="flex flex-wrap items-center gap-4 w-full md:w-auto">
|
||||
<!-- Search Box -->
|
||||
<div class="w-full md:w-auto flex-grow">
|
||||
<div class="relative">
|
||||
<input type="text" id="search" name="search" placeholder="Cari nama ruangan..."
|
||||
value="{{ request('search') }}"
|
||||
class="block w-full md:w-64 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 pl-10 pr-4 py-2">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(request('search'))
|
||||
<div class="flex items-end">
|
||||
<a href="{{ route('admin.ruangan.index') }}" class="text-sm text-blue-600 hover:text-blue-800 hover:underline flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Reset Filter
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ruangan Table -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">No</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Nama Ruangan</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Kelas</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Jurusan</th>
|
||||
<th scope="col" class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($ruangan as $index => $item)
|
||||
<tr class="hover:bg-gray-50 transition duration-150 ease-in-out">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">{{ $index + 1 }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-gray-900">{{ $item->nama_ruangan }}</div>
|
||||
<div class="text-xs text-gray-500">Kapasitas: 30 siswa</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||
{{ $item->kelas->nama_kelas ?? '-' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||
{{ $item->jurusan->nama_jurusan ?? '-' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="{{ route('admin.ruangan.edit', $item->id) }}"
|
||||
class="text-blue-600 hover:text-blue-900 inline-flex items-center transition duration-150 ease-in-out transform hover:scale-110"
|
||||
title="Edit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<form action="{{ route('admin.ruangan.destroy', $item->id) }}" method="POST" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="button" onclick="confirmDelete('{{ $item->nama_ruangan }}', this.form)"
|
||||
class="text-red-600 hover:text-red-900 inline-flex items-center transition duration-150 ease-in-out transform hover:scale-110"
|
||||
title="Hapus">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-8 text-center">
|
||||
<div class="flex flex-col items-center justify-center text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-medium">Belum ada data ruangan</h3>
|
||||
<p class="text-sm mt-1">Silakan tambah ruangan baru menggunakan tombol di atas</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@if($ruangan->hasPages())
|
||||
<div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
|
||||
{{ $ruangan->links('vendor.pagination.tailwind') }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
function confirmDelete(name, form) {
|
||||
Swal.fire({
|
||||
title: 'Konfirmasi Penghapusan',
|
||||
html: `Anda yakin ingin menghapus ruangan <strong>${name}</strong>?`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Hapus!',
|
||||
cancelButtonText: 'Batal',
|
||||
backdrop: `
|
||||
rgba(0,0,0,0.7)
|
||||
url("https://sweetalert2.github.io/images/nyan-cat.gif")
|
||||
left top
|
||||
no-repeat
|
||||
`
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
Swal.fire({
|
||||
title: 'Dihapus!',
|
||||
text: 'Ruangan berhasil dihapus.',
|
||||
icon: 'success',
|
||||
timer: 1500,
|
||||
showConfirmButton: false
|
||||
}).then(() => {
|
||||
form.submit();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -1,81 +1,261 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Smart School | Tambah Siswa')
|
||||
@section('title', 'Smart School | Pendaftaran Siswa Baru')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Pendaftaran Siswa Baru
|
||||
</h1>
|
||||
<p class="text-gray-600 mt-2">Lengkapi formulir pendaftaran siswa dengan data yang valid</p>
|
||||
</div>
|
||||
<div class="mt-4 md:mt-0">
|
||||
<a href="{{ route('admin.siswa.index') }}"
|
||||
class="flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Kembali ke Daftar Siswa
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-4">
|
||||
<h2 class="text-2xl font-bold mb-4">Tambah Siswa</h2>
|
||||
<!-- Form Card -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<!-- Form Progress -->
|
||||
<div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center text-indigo-600">
|
||||
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100">
|
||||
<span class="text-sm font-medium">1</span>
|
||||
</div>
|
||||
<div class="ml-2 text-sm font-medium">Data Pribadi</div>
|
||||
</div>
|
||||
<div class="flex-auto border-t-2 border-gray-200 mx-4"></div>
|
||||
<div class="flex items-center text-gray-500">
|
||||
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100">
|
||||
<span class="text-sm font-medium">2</span>
|
||||
</div>
|
||||
<div class="ml-2 text-sm font-medium">Data Akademik</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('siswa.store') }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded shadow-md">
|
||||
<!-- Form Content -->
|
||||
<form id="createSiswaForm" action="{{ route('admin.siswa.store') }}" method="POST" enctype="multipart/form-data" class="p-6">
|
||||
@csrf
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Nama Siswa</label>
|
||||
<input type="text" name="nama_siswa" class="border p-2 w-full rounded" required>
|
||||
<!-- Section 1: Data Pribadi -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Data Pribadi
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Foto Profil -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative mb-4">
|
||||
<div id="imagePreview" class="w-40 h-40 rounded-lg bg-gray-100 border-2 border-dashed border-gray-300 overflow-hidden flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<label for="foto_siswa" class="absolute bottom-0 right-0 bg-white p-2 rounded-full shadow-md cursor-pointer hover:bg-gray-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<input type="file" id="foto_siswa" name="foto_siswa" class="hidden" accept="image/*" required>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 text-center">Format: JPG/PNG (Max 2MB)<br>Rasio 1:1 (persegi)</p>
|
||||
@error('foto_siswa')
|
||||
<p class="mt-1 text-xs text-red-600 text-center">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">NISN</label>
|
||||
<input type="number" name="nisn" class="border p-2 w-full rounded" required>
|
||||
<!-- Data Pribadi -->
|
||||
<div class="md:col-span-2 space-y-4">
|
||||
<div>
|
||||
<label for="nama_siswa" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
|
||||
<input type="text" id="nama_siswa" name="nama_siswa" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('nama_siswa') }}" placeholder="Masukkan nama lengkap">
|
||||
@error('nama_siswa')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Tanggal Lahir</label>
|
||||
<input type="date" name="tanggal_lahir" class="border p-2 w-full rounded" required>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="nisn" class="block text-sm font-medium text-gray-700 mb-1">NISN <span class="text-red-500">*</span></label>
|
||||
<input type="number" id="nisn" name="nisn" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('nisn') }}" placeholder="Nomor Induk Siswa Nasional">
|
||||
@error('nisn')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="tanggal_lahir" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Lahir <span class="text-red-500">*</span></label>
|
||||
<input type="date" id="tanggal_lahir" name="tanggal_lahir" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('tanggal_lahir') }}">
|
||||
@error('tanggal_lahir')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Foto Siswa</label>
|
||||
<input type="file" name="foto_siswa" class="border p-2 w-full rounded" accept="image/*" required>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
|
||||
<div class="mt-1 flex space-x-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" name="jenis_kelamin" value="L" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" required
|
||||
{{ old('jenis_kelamin', 'L') == 'L' ? 'checked' : '' }}>
|
||||
<span class="ml-2 text-sm text-gray-700">Laki-laki</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" name="jenis_kelamin" value="P" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
|
||||
{{ old('jenis_kelamin') == 'P' ? 'checked' : '' }}>
|
||||
<span class="ml-2 text-sm text-gray-700">Perempuan</span>
|
||||
</label>
|
||||
</div>
|
||||
@error('jenis_kelamin')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Jenis Kelamin</label>
|
||||
<select name="jenis_kelamin" class="border p-2 w-full rounded" required>
|
||||
<option value="L">Laki-laki</option>
|
||||
<option value="P">Perempuan</option>
|
||||
</select>
|
||||
<!-- Section 2: Data Kontak -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Data Kontak
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
|
||||
<input type="email" id="email" name="email" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('email') }}" placeholder="email@contoh.com">
|
||||
@error('email')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Alamat</label>
|
||||
<textarea name="alamat" class="border p-2 w-full rounded" required></textarea>
|
||||
<div>
|
||||
<label for="no_hp" class="block text-sm font-medium text-gray-700 mb-1">Nomor HP <span class="text-red-500">*</span></label>
|
||||
<input type="tel" id="no_hp" name="no_hp" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('no_hp') }}" placeholder="0812-3456-7890">
|
||||
@error('no_hp')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">No HP</label>
|
||||
<input type="number" name="no_hp" class="border p-2 w-full rounded" required>
|
||||
<div class="md:col-span-2">
|
||||
<label for="alamat" class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
|
||||
<textarea id="alamat" name="alamat" rows="3" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
placeholder="Jl. Contoh No. 123, Kota/Kabupaten">{{ old('alamat') }}</textarea>
|
||||
@error('alamat')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Email</label>
|
||||
<input type="email" name="email" class="border p-2 w-full rounded" required>
|
||||
</div>
|
||||
<!-- Section 3: Data Akademik -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
Data Akademik
|
||||
</h3>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Jurusan</label>
|
||||
<select name="id_jurusan" class="border p-2 w-full rounded" required>
|
||||
@foreach ($jurusan as $item)
|
||||
<option value="{{ $item->id }}">{{ $item->nama_jurusan }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block font-semibold">Kelas</label>
|
||||
<select name="id_kelas" class="border p-2 w-full rounded" required>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="id_kelas" class="block text-sm font-medium text-gray-700 mb-1">Kelas <span class="text-red-500">*</span></label>
|
||||
<select id="id_kelas" name="id_kelas" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<option value="">-- Pilih Kelas --</option>
|
||||
@foreach($kelas as $item)
|
||||
<option value="{{ $item->id }}">{{ $item->nama_kelas }}</option>
|
||||
<option value="{{ $item->id }}" {{ old('id_kelas') == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_kelas }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('id_kelas')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Simpan</button>
|
||||
<a href="{{ route('admin.siswa') }}" class="ml-2 text-gray-600">Batal</a>
|
||||
<div>
|
||||
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-1">Jurusan <span class="text-red-500">*</span></label>
|
||||
<select id="id_jurusan" name="id_jurusan" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<option value="">-- Pilih Jurusan --</option>
|
||||
@foreach($jurusan as $item)
|
||||
<option value="{{ $item->id }}" {{ old('id_jurusan') == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('id_jurusan')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end space-x-3 border-t border-gray-200 pt-6">
|
||||
<button type="reset" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Reset Form
|
||||
</button>
|
||||
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
|
||||
</svg>
|
||||
Simpan Data Siswa
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Preview image upload
|
||||
document.getElementById('foto_siswa').addEventListener('change', function(e) {
|
||||
const preview = document.getElementById('imagePreview');
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
preview.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover" alt="Preview">`;
|
||||
}
|
||||
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Smart School | Edit Data Siswa')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Edit Data Siswa
|
||||
</h1>
|
||||
<p class="text-gray-600 mt-2">Perbarui data siswa {{ $siswa->nama_siswa }}</p>
|
||||
</div>
|
||||
<div class="mt-4 md:mt-0">
|
||||
<a href="{{ route('admin.siswa.index') }}"
|
||||
class="flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
Kembali ke Daftar Siswa
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden">
|
||||
<!-- Student Summary -->
|
||||
<div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 h-12 w-12 rounded-full overflow-hidden border-2 border-white shadow-sm">
|
||||
@if($siswa->foto_siswa)
|
||||
<img class="h-full w-full object-cover" src="{{ asset('storage/' . $siswa->foto_siswa) }}" alt="Foto siswa">
|
||||
@else
|
||||
<div class="bg-gray-200 h-full w-full flex items-center justify-center text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-lg font-medium text-gray-800">{{ $siswa->nama_siswa }}</h4>
|
||||
<div class="text-sm text-gray-500">
|
||||
<span class="mr-3">NISN: {{ $siswa->nisn }}</span>
|
||||
<span>Kelas: {{ $siswa->kelas->nama_kelas ?? '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Content -->
|
||||
<form id="editSiswaForm" action="{{ route('admin.siswa.update', $siswa->id) }}" method="POST" enctype="multipart/form-data" class="p-6">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<!-- Section 1: Data Pribadi -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
Data Pribadi
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Foto Profil -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="relative mb-4">
|
||||
<div id="imagePreview" class="w-40 h-40 rounded-lg bg-gray-100 border-2 border-dashed border-gray-300 overflow-hidden flex items-center justify-center">
|
||||
@if($siswa->foto_siswa)
|
||||
<img src="{{ asset('storage/' . $siswa->foto_siswa) }}" class="w-full h-full object-cover" alt="Foto Siswa">
|
||||
@else
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
<label for="foto_siswa" class="absolute bottom-0 right-0 bg-white p-2 rounded-full shadow-md cursor-pointer hover:bg-gray-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<input type="file" id="foto_siswa" name="foto_siswa" class="hidden" accept="image/*">
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 text-center">Kosongkan jika tidak ingin mengubah foto</p>
|
||||
@error('foto_siswa')
|
||||
<p class="mt-1 text-xs text-red-600 text-center">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Pribadi -->
|
||||
<div class="md:col-span-2 space-y-4">
|
||||
<div>
|
||||
<label for="nama_siswa" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
|
||||
<input type="text" id="nama_siswa" name="nama_siswa" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('nama_siswa', $siswa->nama_siswa) }}" placeholder="Masukkan nama lengkap">
|
||||
@error('nama_siswa')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="nisn" class="block text-sm font-medium text-gray-700 mb-1">NISN <span class="text-red-500">*</span></label>
|
||||
<input type="number" id="nisn" name="nisn" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('nisn', $siswa->nisn) }}" placeholder="Nomor Induk Siswa Nasional">
|
||||
@error('nisn')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="tanggal_lahir" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Lahir <span class="text-red-500">*</span></label>
|
||||
<input type="date" id="tanggal_lahir" name="tanggal_lahir" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('tanggal_lahir', $siswa->tanggal_lahir) }}">
|
||||
@error('tanggal_lahir')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
|
||||
<div class="mt-1 flex space-x-4">
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" name="jenis_kelamin" value="L" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" required
|
||||
{{ old('jenis_kelamin', $siswa->jenis_kelamin) == 'L' ? 'checked' : '' }}>
|
||||
<span class="ml-2 text-sm text-gray-700">Laki-laki</span>
|
||||
</label>
|
||||
<label class="inline-flex items-center">
|
||||
<input type="radio" name="jenis_kelamin" value="P" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
|
||||
{{ old('jenis_kelamin', $siswa->jenis_kelamin) == 'P' ? 'checked' : '' }}>
|
||||
<span class="ml-2 text-sm text-gray-700">Perempuan</span>
|
||||
</label>
|
||||
</div>
|
||||
@error('jenis_kelamin')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Data Kontak -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Data Kontak
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
|
||||
<input type="email" id="email" name="email" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('email', $siswa->email) }}" placeholder="email@contoh.com">
|
||||
@error('email')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="no_hp" class="block text-sm font-medium text-gray-700 mb-1">Nomor HP <span class="text-red-500">*</span></label>
|
||||
<input type="tel" id="no_hp" name="no_hp" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
value="{{ old('no_hp', $siswa->no_hp) }}" placeholder="0812-3456-7890">
|
||||
@error('no_hp')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-2">
|
||||
<label for="alamat" class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
|
||||
<textarea id="alamat" name="alamat" rows="3" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
|
||||
placeholder="Jl. Contoh No. 123, Kota/Kabupaten">{{ old('alamat', $siswa->alamat) }}</textarea>
|
||||
@error('alamat')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 3: Data Akademik -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
Data Akademik
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="id_kelas" class="block text-sm font-medium text-gray-700 mb-1">Kelas <span class="text-red-500">*</span></label>
|
||||
<select id="id_kelas" name="id_kelas" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<option value="">-- Pilih Kelas --</option>
|
||||
@foreach($kelas as $item)
|
||||
<option value="{{ $item->id }}" {{ old('id_kelas', $siswa->id_kelas) == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_kelas }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('id_kelas')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-1">Jurusan <span class="text-red-500">*</span></label>
|
||||
<select id="id_jurusan" name="id_jurusan" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<option value="">-- Pilih Jurusan --</option>
|
||||
@foreach($jurusan as $item)
|
||||
<option value="{{ $item->id }}" {{ old('id_jurusan', $siswa->id_jurusan) == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('id_jurusan')
|
||||
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-between border-t border-gray-200 pt-6">
|
||||
<button type="button" onclick="confirmDelete()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Hapus Data
|
||||
</button>
|
||||
<div class="flex space-x-3">
|
||||
<button type="reset" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
Reset Perubahan
|
||||
</button>
|
||||
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Simpan Perubahan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Form (hidden) -->
|
||||
<form id="deleteForm" action="{{ route('admin.siswa.destroy', $siswa->id) }}" method="POST" class="hidden">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
</form>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
// Preview image upload
|
||||
document.getElementById('foto_siswa').addEventListener('change', function(e) {
|
||||
const preview = document.getElementById('imagePreview');
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
preview.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover" alt="Preview">`;
|
||||
}
|
||||
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
// Confirm delete function
|
||||
function confirmDelete() {
|
||||
Swal.fire({
|
||||
title: 'Hapus Data Siswa?',
|
||||
html: `Anda akan menghapus data <strong>${document.getElementById('nama_siswa').value}</strong> (NISN: ${document.getElementById('nisn').value})<br>Data yang dihapus tidak dapat dikembalikan!`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
cancelButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ya, Hapus!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
document.getElementById('deleteForm').submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
@extends('layouts.dashboard')
|
||||
|
||||
@section('title', 'Smart School | Data Siswa')
|
||||
|
||||
@section('content')
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
|
||||
<!-- Header Card -->
|
||||
<div class="bg-gradient-to-br from-indigo-600 to-purple-600 px-8 py-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
|
||||
<div class="mb-4 md:mb-0">
|
||||
<h1 class="text-2xl font-bold text-white flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Data Siswa
|
||||
</h1>
|
||||
<p class="text-indigo-100 mt-1">Total {{ $siswa->total() }} siswa terdaftar</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ route('admin.siswa.create') }}"
|
||||
class="flex items-center px-4 py-2 bg-white text-indigo-600 rounded-lg shadow hover:bg-gray-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Tambah Siswa
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="p-6">
|
||||
<!-- Search and Filter -->
|
||||
<div class="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="relative w-full md:w-64">
|
||||
<form action="{{ route('admin.siswa.index') }}" method="GET">
|
||||
<input type="text" name="search" placeholder="Cari siswa..."
|
||||
value="{{ request('search') }}"
|
||||
class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:border-indigo-500 focus:ring focus:ring-indigo-200 transition">
|
||||
<div class="absolute left-3 top-2.5 text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<form action="{{ route('admin.siswa.index') }}" method="GET" class="flex gap-2">
|
||||
<select name="kelas" onchange="this.form.submit()"
|
||||
class="rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 transition">
|
||||
<option value="">Semua Kelas</option>
|
||||
@foreach($kelas as $item)
|
||||
<option value="{{ $item->id }}" {{ request('kelas') == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_kelas }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
<select name="jurusan" onchange="this.form.submit()"
|
||||
class="rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 transition">
|
||||
<option value="">Semua Jurusan</option>
|
||||
@foreach($jurusan as $item)
|
||||
<option value="{{ $item->id }}" {{ request('jurusan') == $item->id ? 'selected' : '' }}>
|
||||
{{ $item->nama_jurusan }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@if(request('search') || request('kelas') || request('jurusan'))
|
||||
<a href="{{ route('admin.siswa.index') }}"
|
||||
class="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
|
||||
Reset
|
||||
</a>
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Students Table -->
|
||||
<div class="overflow-x-auto rounded-lg border border-gray-200 shadow-sm">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Foto
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Nama Siswa
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
NISN
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Kelas/Jurusan
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Kontak
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Aksi
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($siswa as $item)
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex-shrink-0 h-10 w-10 rounded-full overflow-hidden border border-gray-200">
|
||||
@if($item->foto_siswa)
|
||||
<img class="h-full w-full object-cover" src="{{ asset('storage/' . $item->foto_siswa) }}" alt="Foto siswa">
|
||||
@else
|
||||
<div class="bg-gray-200 h-full w-full flex items-center justify-center text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">{{ $item->nama_siswa }}</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
{{ $item->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan' }} •
|
||||
{{ \Carbon\Carbon::parse($item->tanggal_lahir)->age }} tahun
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $item->nisn }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm text-gray-900">{{ $item->kelas->nama_kelas ?? '-' }}</div>
|
||||
<div class="text-sm text-gray-500">{{ $item->jurusan->nama_jurusan ?? '-' }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div>{{ $item->email }}</div>
|
||||
<div>{{ $item->no_hp }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div class="flex justify-end space-x-2">
|
||||
<a href="{{ route('admin.siswa.edit', $item->id) }}"
|
||||
class="text-indigo-600 hover:text-indigo-900 p-1 rounded hover:bg-indigo-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</a>
|
||||
<form action="{{ route('admin.siswa.destroy', $item->id) }}" method="POST" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="button" onclick="confirmDelete('{{ $item->id }}', '{{ $item->nama_siswa }}')"
|
||||
class="text-red-600 hover:text-red-900 p-1 rounded hover:bg-red-50 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-4 text-center text-gray-500">
|
||||
Tidak ada data siswa ditemukan
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-4">
|
||||
{{ $siswa->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include SweetAlert2 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
|
||||
<script>
|
||||
// Confirm delete function
|
||||
function confirmDelete(id, name) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Siswa?',
|
||||
html: `Anda akan menghapus siswa: <strong>${name}</strong><br>Data yang dihapus tidak dapat dikembalikan!`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d33',
|
||||
cancelButtonColor: '#3085d6',
|
||||
confirmButtonText: 'Ya, Hapus!',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Submit the form
|
||||
document.querySelector(`form[action="{{ route('admin.siswa.destroy', '') }}/${id}"]`).submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
|
@ -34,13 +34,19 @@
|
|||
// Dashboard
|
||||
Route::get('/dashboard', [AdminController::class, 'index'])->name('admin.dashboard');
|
||||
|
||||
|
||||
// Siswa
|
||||
Route::controller(SiswaController::class)->group(function () {
|
||||
Route::get('/siswa', 'index2')->name('admin.siswa');
|
||||
Route::get('/siswa/create', 'create')->name('siswa.create');
|
||||
Route::post('/siswa', 'store')->name('siswa.store');
|
||||
Route::get('/siswa', 'index')->name('admin.siswa.index'); // halaman utama siswa
|
||||
Route::get('/siswa/create', 'create')->name('admin.siswa.create'); // form tambah siswa
|
||||
Route::post('/siswa', 'store')->name('admin.siswa.store'); // simpan siswa baru
|
||||
Route::get('/siswa/{id}/edit', 'edit')->name('admin.siswa.edit'); // form edit siswa
|
||||
Route::put('/siswa/{id}', 'update')->name('admin.siswa.update'); // simpan update siswa
|
||||
Route::delete('/siswa/{id}', 'destroy')->name('admin.siswa.destroy'); // hapus siswa
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Guru
|
||||
Route::get('/guru', [GuruController::class, 'index'])->name('admin.guru');
|
||||
|
||||
|
|
@ -91,6 +97,7 @@
|
|||
Route::put('/{id}', 'update')->name('bel.update');
|
||||
Route::delete('/{id}', 'destroy')->name('bel.delete');
|
||||
Route::delete('/', 'deleteAll')->name('bel.delete-all');
|
||||
Route::get('/history', 'history')->name('bel.history');
|
||||
});
|
||||
|
||||
// Announcement System
|
||||
|
|
|
|||
Loading…
Reference in New Issue