history bel, tampilan ruangan,jurusan,siswa,kelas Controller(paginate)

app/Http/Controllers/JurusanController.php

@@ -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'));
     }
 

app/Http/Controllers/KelasController.php

@@ -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'));
     }
 

app/Http/Controllers/RuanganController.php

@@ -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'));
     }
 

app/Http/Controllers/SiswaController.php

@@ -2,76 +2,172 @@
 
 namespace App\Http\Controllers;
 
-use App\Models\Jurusan;
+use App\Http\Controllers\Controller;
-use App\Models\Kelas;
 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();
+        $siswa = Siswa::with(['kelas', 'jurusan'])->latest()->get();
-        return view('admin.siswa', compact('siswa'));
+        $siswa = Siswa::paginate(10);
-    }
+        $kelas = Kelas::all(); 
-    //GET api/admin/siswa
+        $jurusan = Jurusan::all(); 
-    public function index(Request $request)
+        return view('admin.siswa.index', compact('siswa', 'kelas', 'jurusan'));
-    {
-        // Ambil semua data siswa
-        $siswa = Siswa::with(['kelas', 'jurusan'])->get();
-
-        return response()->json([
-            'message' => 'Siswa ditemukan',
-            'data' => $siswa
-        ]);
     }
 
+    /**
+     * 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([
+        // Validasi data
-            'nama_siswa'    => 'required|string|max:255',
+        $validator = Validator::make($request->all(), [
-            'nisn'          => 'required|integer|unique:siswa,nisn',
-            'tanggal_lahir' => 'required|date',
             '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');
+            $foto = $request->file('foto_siswa');
-            $fotoName = basename($fotoPath);
+            $fotoName = time() . '_' . $foto->getClientOriginalName();
-        } else {
+            $fotoPath = $foto->storeAs('siswa', $fotoName, 'public');
-            $fotoName = null;
         }
 
         // Simpan data siswa
-        $siswa = Siswa::create([
+        $siswa = new Siswa();
-            'nama_siswa'    => $request->nama_siswa,
+        $siswa->foto_siswa = $fotoPath ?? null;
-            'nisn'          => $request->nisn,
+        $siswa->nama_siswa = $request->nama_siswa;
-            'tanggal_lahir' => $request->tanggal_lahir,
+        $siswa->nisn = $request->nisn;
-            'foto_siswa'    => $fotoName,
+        $siswa->tanggal_lahir = $request->tanggal_lahir;
-            'jenis_kelamin' => $request->jenis_kelamin,
+        $siswa->jenis_kelamin = $request->jenis_kelamin;
-            'alamat'        => $request->alamat,
+        $siswa->email = $request->email;
-            'no_hp'         => $request->no_hp,
+        $siswa->no_hp = $request->no_hp;
-            'email'         => $request->email,
+        $siswa->alamat = $request->alamat;
-            'id_jurusan'    => $request->id_jurusan,
+        $siswa->id_kelas = $request->id_kelas;
-            '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 ($validator->fails()) {
-        if ($request->wantsJson()) {
+            return redirect()->back()
-            return response()->json([
+                ->withErrors($validator)
-                'message' => 'Siswa berhasil ditambahkan',
+                ->withInput();
-                'data'    => $siswa,
-            ], 201);
         }
 
-        // Jika request dari Web (Blade), redirect ke halaman daftar siswa
+        // Update foto siswa jika ada
-        return redirect()->route('siswa.index')->with('success', 'Siswa berhasil ditambahkan');
+        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!');
     }
 }

app/Http/Controllers/belController.php

@@ -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');
+        }
+    }
 }

app/Models/BellHistory.php

@@ -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'
+        ];
+    }
+}

config/mqtt.php

@@ -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',

database/migrations/2025_04_24_203925_create_bell_history_table.php

@@ -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');
+    }
+};

resources/views/admin/bel/create.blade.php

@@ -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>
+            <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">
+            <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">
+                           class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 transition duration-300">
-                    <label for="is_active" class="ml-2 block text-sm text-gray-700">Aktifkan Jadwal Ini</label>
+                    <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>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>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 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><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

resources/views/admin/bel/history.blade.php

@@ -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

resources/views/admin/bel/index.blade.php

@@ -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...');

resources/views/admin/component/sidebar.blade.php

@@ -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') }}"

resources/views/admin/jurusan/create.blade.php

@@ -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">
+        <!-- Form Section -->
-    <h1 class="text-2xl font-semibold mb-4">Tambah Jurusan</h1>
+        <div class="p-6">
-
+            <form id="createForm" action="{{ route('admin.jurusan.store') }}" method="POST">
-    <form 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>
+                <!-- Nama Jurusan -->
-            <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>
+                <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>
+                <!-- Action Buttons -->
-        <a href="{{ route('admin.jurusan.index') }}" class="ml-4 text-gray-700 hover:text-gray-900">Kembali</a>
+                <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

resources/views/admin/jurusan/edit.blade.php

@@ -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">
+        <!-- Form Section -->
-    <h1 class="text-2xl font-semibold mb-4">Edit Jurusan</h1>
+        <div class="p-6">
-
+            <form id="editForm" action="{{ route('admin.jurusan.update', $jurusan->id) }}" method="POST">
-    <form 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>
+                <!-- Nama Jurusan -->
-            <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>
+                <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>
+                <!-- Action Buttons -->
-        <a href="{{ route('admin.jurusan.index') }}" class="ml-4 text-gray-700 hover:text-gray-900">Kembali</a>
+                <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

resources/views/admin/jurusan/index.blade.php

@@ -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">
+        <a href="{{ route('admin.jurusan.create') }}" 
-    <div class="flex justify-between items-center mb-4">
+           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">
-        <h1 class="text-2xl font-semibold">Data Jurusan</h1>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
-        <a href="{{ route('admin.jurusan.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
+                <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" />
-            + Tambah Jurusan
+            </svg>
+            Tambah Jurusan
         </a>
     </div>
 
-    <div class="overflow-x-auto">
+    <!-- Stats Card -->
-        <table class="w-full border-collapse border border-gray-200">
+    <div class="grid grid-cols-1 gap-4 mb-6">
-            <thead class="bg-gray-100">
+        <div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-blue-500">
-                <tr class="text-left text-gray-700">
+            <div class="flex items-center">
-                    <th class="border px-4 py-2">No</th>
+                <div class="p-3 rounded-full bg-blue-100">
-                    <th class="border px-4 py-2">Nama Jurusan</th>
+                    <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">
-                    <th class="border px-4 py-2 text-center">Aksi</th>
+                        <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" />
-                </tr>
+                    </svg>
-            </thead>
+                </div>
-            <tbody>
+                <div class="ml-4">
-                @foreach ($jurusan as $index => $item)
+                    <h3 class="text-sm font-medium text-gray-500">Total Jurusan</h3>
-                <tr class="border hover:bg-gray-50">
+                    <p class="text-lg font-semibold text-gray-700">{{ $jurusan->count() }}</p>
-                    <td class="border px-4 py-2">{{ $index + 1 }}</td>
+                </div>
-                    <td class="border px-4 py-2">{{ $item->nama_jurusan }}</td>
+            </div>
-                    <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>
         </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

resources/views/admin/kelas/create.blade.php

@@ -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">
+<div class="container mx-auto px-4 py-6">
-    <h1 class="text-2xl font-semibold mb-4">Tambah Kelas</h1>
+    <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-2xl mx-auto">
-    <form action="{{ route('admin.kelas.store') }}" method="POST">
+        <!-- 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">
+                <!-- Nama Kelas -->
-            <label class="block mb-1 font-medium">Nama Kelas</label>
+                <div class="mb-6">
-            <input type="text" name="nama_kelas" class="w-full border px-4 py-2 rounded" required>
+                    <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">
+                <!-- Jurusan -->
-            <label class="block mb-1 font-medium">Jurusan</label>
+                <div class="mb-6">
-            <select name="id_jurusan" class="w-full border px-4 py-2 rounded" required>
+                    <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">
+                <!-- Action Buttons -->
-            <a href="{{ route('admin.kelas.index') }}" class="bg-gray-300 px-4 py-2 rounded mr-2">Batal</a>
+                <div class="flex justify-end space-x-3">
-            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Simpan</button>
+                    <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

resources/views/admin/kelas/edit.blade.php

@@ -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">
+<div class="container mx-auto px-4 py-6">
-    <h1 class="text-2xl font-semibold mb-4">Edit Kelas</h1>
+    <div class="bg-white rounded-xl shadow-md overflow-hidden max-w-2xl mx-auto">
-    <form action="{{ route('admin.kelas.update', $kelas->id) }}" method="POST">
+        <!-- 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">
+                <!-- Nama Kelas -->
-            <label class="block mb-1 font-medium">Nama Kelas</label>
+                <div class="mb-6">
-            <input type="text" name="nama_kelas" value="{{ $kelas->nama_kelas }}" class="w-full border px-4 py-2 rounded" required>
+                    <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">
+                <!-- Jurusan -->
-            <label class="block mb-1 font-medium">Jurusan</label>
+                <div class="mb-6">
-            <select name="id_jurusan" class="w-full border px-4 py-2 rounded" required>
+                    <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">
+                <!-- Action Buttons -->
-            <a href="{{ route('admin.kelas.index') }}" class="bg-gray-300 px-4 py-2 rounded mr-2">Batal</a>
+                <div class="flex justify-end space-x-3">
-            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Update</button>
+                    <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

resources/views/admin/kelas/index.blade.php

@@ -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">
+        <a href="{{ route('admin.kelas.create') }}" 
-    <div class="flex justify-between items-center mb-4">
+           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">
-        <h1 class="text-2xl font-semibold">Data Kelas</h1>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
-        <a href="{{ route('admin.kelas.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
+                <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" />
-            + Tambah Kelas
+            </svg>
+            Tambah Kelas
         </a>
     </div>
 
-    <div class="overflow-x-auto">
+    <!-- Stats Card -->
-        <table class="w-full border-collapse border border-gray-200">
+    <div class="grid grid-cols-1 gap-4 mb-6">
-            <thead class="bg-gray-100">
+        <div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-blue-500">
-                <tr class="text-left text-gray-700">
+            <div class="flex items-center">
-                    <th class="border px-4 py-2">No</th>
+                <div class="p-3 rounded-full bg-blue-100">
-                    <th class="border px-4 py-2">Nama Kelas</th>
+                    <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">
-                    <th class="border px-4 py-2">Nama Jurusan</th>
+                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
-                    <th class="border px-4 py-2 text-center">Aksi</th>
+                        <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" />
-                </tr>
+                        <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" />
-            </thead>
+                    </svg>
-            <tbody>
+                </div>
-                @foreach ($kelas as $index => $item)
+                <div class="ml-4">
-                <tr class="border hover:bg-gray-50">
+                    <h3 class="text-sm font-medium text-gray-500">Total Kelas</h3>
-                    <td class="border px-4 py-2">{{ $index + 1 }}</td>
+                    <p class="text-lg font-semibold text-gray-700">{{ $kelas->count() }}</p>
-                    <td class="border px-4 py-2">{{ $item->nama_kelas }}</td>
+                </div>
-                    <td class="border px-4 py-2">
+            </div>
-                        {{ $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>
         </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

resources/views/admin/ruangan/create.blade.php

@@ -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">
+        <!-- Form Card -->
-    <h1 class="text-2xl font-semibold mb-4">Tambah Ruangan</h1>
+        <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">
+                    <!-- Nama Ruangan -->
-            <label for="nama_ruangan" class="block font-medium">Nama Ruangan</label>
+                    <div class="mb-6">
-            <input type="text" name="nama_ruangan" id="nama_ruangan" class="w-full border px-4 py-2 rounded-lg" required value="{{ old('nama_ruangan') }}">
+                        <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">
+                    <!-- Kelas -->
-            <label for="id_kelas" class="block font-medium">Kelas</label>
+                    <div class="mb-6">
-            <select name="id_kelas" id="id_kelas" class="w-full border px-4 py-2 rounded-lg" required>
+                        <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">
+                    <!-- Jurusan -->
-            <label for="id_jurusan" class="block font-medium">Jurusan</label>
+                    <div class="mb-8">
-            <select name="id_jurusan" id="id_jurusan" class="w-full border px-4 py-2 rounded-lg" required>
+                        <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">
+                    <!-- Action Buttons -->
-            <a href="{{ route('admin.ruangan.index') }}" class="mr-2 px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
+                    <div class="flex justify-end space-x-4 pt-4 border-t border-gray-200">
-            <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.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

resources/views/admin/ruangan/edit.blade.php

@@ -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">
+        <!-- Form Card -->
-    <h1 class="text-2xl font-semibold mb-4">Edit Ruangan</h1>
+        <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">
+                    <!-- Nama Ruangan -->
-            <label for="nama_ruangan" class="block font-medium">Nama Ruangan</label>
+                    <div class="mb-6">
-            <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>
+                        <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">
+                    <!-- Kelas -->
-            <label for="kelas_id" class="block font-medium">Kelas</label>
+                    <div class="mb-6">
-            <select name="kelas_id" id="kelas_id" class="w-full border px-4 py-2 rounded-lg" required>
+                        <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">
+                    <!-- Jurusan -->
-            <label for="jurusan_id" class="block font-medium">Jurusan</label>
+                    <div class="mb-8">
-            <select name="jurusan_id" id="jurusan_id" class="w-full border px-4 py-2 rounded-lg" required>
+                        <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">
+                    <!-- Action Buttons -->
-            <a href="{{ route('admin.ruangan.index') }}" class="mr-2 px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
+                    <div class="flex justify-end space-x-4 pt-4 border-t border-gray-200">
-            <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.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

resources/views/admin/ruangan/index.blade.php

@@ -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">
+        <a href="{{ route('admin.ruangan.create') }}" 
-    <div class="flex justify-between items-center mb-4">
+           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">
-        <h1 class="text-2xl font-semibold">Data Ruangan</h1>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
-        <a href="{{ route('admin.ruangan.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
+                <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" />
-            + Tambah Ruangan
+            </svg>
+            Tambah Ruangan Baru
         </a>
     </div>
 
-    <div class="overflow-x-auto">
+    <!-- Stats Cards -->
-        <table class="w-full border-collapse border border-gray-200">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-            <thead class="bg-gray-100">
+        <!-- Total Ruangan -->
-                <tr class="text-left text-gray-700">
+        <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500 hover:shadow-md transition duration-300">
-                    <th class="border px-4 py-2">No</th>
+            <div class="flex items-center">
-                    <th class="border px-4 py-2">Nama Ruangan</th>
+                <div class="p-3 rounded-full bg-blue-100">
-                    <th class="border px-4 py-2">Kelas</th>
+                    <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">
-                    <th class="border px-4 py-2">Jurusan</th>
+                        <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" />
-                    <th class="border px-4 py-2 text-center">Aksi</th>
+                    </svg>
-                </tr>
+                </div>
-            </thead>
+                <div class="ml-4">
-            <tbody>
+                    <h3 class="text-sm font-medium text-gray-500">Total Ruangan</h3>
-                @foreach ($ruangan as $index => $item)
+                    <p class="text-2xl font-bold text-gray-700">{{ $ruangan->count() }}</p>
-                <tr class="border hover:bg-gray-50">
+                </div>
-                    <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>
             </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

resources/views/admin/siswa/create.blade.php

@@ -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">
+    <!-- Form Card -->
-    <h2 class="text-2xl font-bold mb-4">Tambah Siswa</h2>
+    <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">
+            <!-- Section 1: Data Pribadi -->
-            <label class="block font-semibold">Nama Siswa</label>
+            <div class="mb-8">
-            <input type="text" name="nama_siswa" class="border p-2 w-full rounded" required>
+                <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">
+                    <!-- Data Pribadi -->
-            <label class="block font-semibold">NISN</label>
+                    <div class="md:col-span-2 space-y-4">
-            <input type="number" name="nisn" class="border p-2 w-full rounded" required>
+                        <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">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <label class="block font-semibold">Tanggal Lahir</label>
+                            <div>
-            <input type="date" name="tanggal_lahir" class="border p-2 w-full rounded" required>
+                                <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">
+                        <div>
-            <label class="block font-semibold">Foto Siswa</label>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
-            <input type="file" name="foto_siswa" class="border p-2 w-full rounded" accept="image/*" required>
+                            <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">
+            <!-- Section 2: Data Kontak -->
-            <label class="block font-semibold">Jenis Kelamin</label>
+            <div class="mb-8">
-            <select name="jenis_kelamin" class="border p-2 w-full rounded" required>
+                <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
-                <option value="L">Laki-laki</option>
+                    <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">
-                <option value="P">Perempuan</option>
+                        <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" />
-            </select>
+                    </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">
+                    <div>
-            <label class="block font-semibold">Alamat</label>
+                        <label for="no_hp" class="block text-sm font-medium text-gray-700 mb-1">Nomor HP <span class="text-red-500">*</span></label>
-            <textarea name="alamat" class="border p-2 w-full rounded" required></textarea>
+                        <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">
+                    <div class="md:col-span-2">
-            <label class="block font-semibold">No HP</label>
+                        <label for="alamat" class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
-            <input type="number" name="no_hp" class="border p-2 w-full rounded" required>
+                        <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">
+            <!-- Section 3: Data Akademik -->
-            <label class="block font-semibold">Email</label>
+            <div class="mb-8">
-            <input type="email" name="email" class="border p-2 w-full rounded" required>
+                <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
-        </div>
+                    <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">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <label class="block font-semibold">Jurusan</label>
+                    <div>
-            <select name="id_jurusan" class="border p-2 w-full rounded" required>
+                        <label for="id_kelas" class="block text-sm font-medium text-gray-700 mb-1">Kelas <span class="text-red-500">*</span></label>
-                @foreach ($jurusan as $item)
+                        <select id="id_kelas" name="id_kelas" required
-                    <option value="{{ $item->id }}">{{ $item->nama_jurusan }}</option>
+                                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">
-                @endforeach
+                            <option value="">-- Pilih Kelas --</option>
-            </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>
                             @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">
+                    <div>
-            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Simpan</button>
+                        <label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-1">Jurusan <span class="text-red-500">*</span></label>
-            <a href="{{ route('admin.siswa') }}" class="ml-2 text-gray-600">Batal</a>
+                        <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

resources/views/admin/siswa/edit.blade.php

@@ -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

resources/views/admin/siswa/index.blade.php

@@ -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

routes/web.php

@@ -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', 'index')->name('admin.siswa.index'); // halaman utama siswa
-            Route::get('/siswa/create', 'create')->name('siswa.create');
+            Route::get('/siswa/create', 'create')->name('admin.siswa.create'); // form tambah siswa
-            Route::post('/siswa', 'store')->name('siswa.store');
+            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