<main class="min-h-screen bg-slate-50 py-10"> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8"> <!-- Page header --> <header class="flex items-center justify-between"> <div> <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900">Students</h1> <p class="mt-1 text-sm text-slate-500">Create and manage student records — fast, secure and accessible. </p> </div> <div class="flex items-center gap-3"> <input wire:model.debounce.300ms="search" type="search" placeholder="Search by student id, room, course, hostel..." class="w-64 sm:w-80 px-3 py-2 bg-white border border-slate-200 rounded-md shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" /> </div> </header> <!-- Form + table container --> <section class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <!-- Form panel --> <div class="lg:col-span-1"> <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-6"> <div class="flex items-center justify-between mb-4"> <h2 class="text-lg font-semibold text-slate-800"> {{ $isEdit ? 'Update Student' : 'Add Student' }}</h2> <div class="text-sm text-slate-500">Fields marked <span class="text-red-500">*</span> are required</div> </div> <form wire:submit.prevent="{{ $isEdit ? 'update' : 'store' }}" class="space-y-4"> <div class="grid grid-cols-1 gap-3"> <!-- Student Name --> <label class="block"> <span class="text-sm font-medium text-slate-700">Student Name <span class="text-red-500">*</span></span> <input type="text" wire:model.defer="student_name" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" /> @error('student_name') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> <!-- Student ID --> <label class="block"> <span class="text-sm font-medium text-slate-700">Student ID <span class="text-red-500">*</span></span> <input type="text" wire:model.defer="student_id" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" /> @error('student_id') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> <!-- Hostel --> <label class="block"> <span class="text-sm font-medium text-slate-700">Hostel <span class="text-red-500">*</span></span> <select wire:model.defer="hostel_id" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option value="">-- Select Hostel --</option> @foreach ($hostels as $hostel) <option value="{{ $hostel->id }}">{{ $hostel->name }}</option> @endforeach </select> @error('hostel_id') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> <!-- College --> <label class="block"> <span class="text-sm font-medium text-slate-700">College <span class="text-red-500">*</span></span> <select wire:model.defer="college_id" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option value="">-- Select College --</option> @foreach ($colleges as $college) <option value="{{ $college->id }}">{{ $college->name }}</option> @endforeach </select> @error('college_id') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> <!-- Room & Course in two columns --> <div class="grid grid-cols-2 gap-3"> <label class="block"> <span class="text-sm font-medium text-slate-700">Room Number</span> <input type="text" wire:model.defer="room_number" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" /> @error('room_number') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> <!-- College --> <label class="block"> <span class="text-sm font-medium text-slate-700">Course <span class="text-red-500">*</span></span> <select wire:model.defer="course_id" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> <option value="">-- Select Course --</option> @foreach ($courses as $course) <option value="{{ $course->id }}">{{ $course->name }}</option> @endforeach </select> @error('course_id') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> {{-- <label class="block"> <span class="text-sm font-medium text-slate-700">Course</span> <input type="text" wire:model.defer="course" class="mt-2 block w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" /> @error('course') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror </label> --}} </div> <!-- Buttons --> <div class="flex items-center justify-end gap-3 mt-1"> <button type="button" wire:click="resetInput" class="px-3 py-1.5 border border-slate-200 rounded-md text-sm text-slate-700 hover:bg-slate-50">Reset</button> <!-- smaller fixed width submit button --> <button type="submit" class="w-36 inline-flex items-center justify-center gap-2 px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md shadow"> <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" /> </svg> {{ $isEdit ? 'Update' : 'Submit' }} </button> </div> @if (session()->has('message')) <div class="mt-2 text-center text-sm text-green-700 bg-green-50 border border-green-100 rounded-md py-2"> {{ session('message') }} </div> @endif </div> </form> </div> </div> <!-- Table panel --> <div class="lg:col-span-2"> <div class="bg-white border border-slate-200 rounded-xl shadow-sm"> <div class="px-6 py-4 border-b"> <h3 class="text-sm font-medium text-slate-700">Available Students</h3> </div> <div class="p-4 overflow-x-auto"> <table class="min-w-full divide-y divide-slate-200"> <thead class="bg-slate-50"> <tr class="text-left text-xs font-semibold text-slate-600 uppercase"> <th class="px-4 py-3">#</th> <th class="px-4 py-3">Student Name</th> <th class="px-4 py-3">Student ID</th> <th class="px-4 py-3">Hostel</th> <th class="px-4 py-3">College</th> <th class="px-4 py-3">Room</th> <th class="px-4 py-3">Course</th> <th class="px-4 py-3 text-center">Actions</th> </tr> </thead> <tbody class="bg-white divide-y divide-slate-100"> @forelse ($studentList as $student) <tr class="hover:bg-slate-50"> {{-- Laravel Blade gives a special variable named $loop inside every @foreach. $loop->iteration starts from 1 Automatically increments every loop --}} <td class="px-4 py-3 text-sm text-slate-700">{{ $loop->iteration }} {{-- S.No --}}</td> <td class="px-4 py-3 text-sm text-slate-700">{{ $student->student_name }}</td> <td class="px-4 py-3 text-sm font-medium text-slate-900"> {{ $student->student_id }}</td> <td class="px-4 py-3 text-sm text-slate-700"> {{ optional($student->hostel)->name ?? '-' }}</td> <td class="px-4 py-3 text-sm text-slate-700"> {{ optional($student->college)->name ?? '-' }}</td> <td class="px-4 py-3 text-sm text-slate-700"> {{ $student->room_number ?? '-' }}</td> <td class="px-4 py-3 text-sm text-slate-700"> {{ optional($student->course)->name ?? '-' }}</td> <td class="px-4 py-3 text-sm text-center"> <div class="inline-flex items-center gap-2"> <button wire:click="edit({{ $student->id }})" title="Edit student" class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-amber-500 hover:bg-amber-600 text-white shadow-sm"> <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M15.232 5.232l3.536 3.536M9 11.5l6.75-6.75 3.536 3.536L12.536 15.036 9 11.5zM3 21h6" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <button wire:click="delete({{ $student->id }})" title="Delete student" onclick="confirm('Are you sure you want to delete this student?') || event.stopImmediatePropagation()" class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-red-600 hover:bg-red-700 text-white shadow-sm"> <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 6h18M8 6v12a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6M10 6V4a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v2" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> </div> </td> </tr> @empty <tr> <td colspan="7" class="px-4 py-6 text-center text-sm text-slate-500">No Student Added.</td> </tr> @endforelse </tbody> </table> </div> {{-- pagination placeholder if you later add paginate() --}} {{-- <div class="px-6 py-3 border-t bg-slate-50"> {{ $students->links() }} </div> --}} </div> </div> </section> </div> </main> inprove this above code into a stunning layout