@extends('layouts.admin')

@section('content')
    <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">
                            Student Profile
                        </h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-body">
            <div class="container-xl">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <div class="card">
                            {{-- <div class="card-header">Student Profile</div> --}}

                            <div class="card-body">
                                @if (session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                <div class="row">
                                    <!-- Left Side - Basic Info -->
                                    <div class="col-md-4 text-center">
                                        <!-- Profile Picture -->
                                        <div class="mb-3">
                                            {{-- <label>Profile Picture</label> --}}
                                            @if (auth()->user()->profile_picture)
                                                <img src="{{ asset('uploads/profile_pictures/' . auth()->user()->profile_picture) }}"
                                                    alt="Profile Picture" class="img-thumbnail mt-2"
                                                    style="max-width: 150px;">
                                            @else
                                                <img src="{{ asset('uploads/profile_pictures/default.png') }}"
                                                    alt="Profile Picture" class="img-thumbnail mt-2"
                                                    style="max-width: 150px;">
                                            @endif
                                        </div>

                                        <!-- Email (non-editable) -->
                                        <div class="form-group mb-3">
                                            <label>Email</label>
                                            <input type="email" class="form-control" value="{{ auth()->user()->email }}"
                                                disabled>
                                        </div>

                                        <!-- Username (non-editable) -->
                                        <div class="form-group mb-3">
                                            <label>Username</label>
                                            <input type="text" class="form-control" value="{{ auth()->user()->name }}"
                                                disabled>
                                        </div>
                                    </div>

                                    <!-- Right Side - Personal Details & Password -->
                                    <div class="col-md-8">
                                        <h5>Personal Details</h5>
                                        <hr>

                                        <!-- Student Details -->
                                        <div class="form-group mb-3">
                                            <label>Full Name</label>
                                            <input type="text" class="form-control" value="{{ $student->name }}"
                                                disabled>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Guardian</label>
                                            <input type="text" class="form-control" value="{{ $student->guardian }}"
                                                disabled>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>School</label>
                                            <input type="text" class="form-control" value="{{ $student->school }}"
                                                disabled>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Grade</label>
                                            <input type="text" class="form-control" value="{{ $student->grade_id }}"
                                                disabled>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Contact</label>
                                            <input type="text" class="form-control" value="{{ $student->contact }}"
                                                disabled>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Address</label>
                                            <textarea class="form-control" disabled>{{ $student->address }}</textarea>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>City</label>
                                            <input type="text" class="form-control" value="{{ $student->city }}"
                                                disabled>
                                        </div>

                                        <div class="form-group mb-3">
                                            <label>Country</label>
                                            <input type="text" class="form-control" value="{{ $student->country }}"
                                                disabled>
                                        </div>

                                        <!-- Password Change -->
                                        <h5>Change Password</h5>
                                        <hr>

                                        <form method="POST" action="{{ route('admin.student.updatePassword') }}">
                                            @csrf
                                            @method('PUT')

                                            <!-- Password -->
                                            <div class="form-group mb-3">
                                                <label for="password">New Password</label>
                                                <input id="password" type="password"
                                                    class="form-control @error('password') is-invalid @enderror"
                                                    name="password" required>

                                                @error('password')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>

                                            <!-- Password Confirmation -->
                                            <div class="form-group mb-3">
                                                <label for="password-confirm">Confirm Password</label>
                                                <input id="password-confirm" type="password" class="form-control"
                                                    name="password_confirmation" required>
                                            </div>

                                            <div class="form-group">
                                                <button type="submit" class="btn btn-primary">
                                                    Update Password
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <!-- Quiz Details -->
                                <h5 class="mt-4">Quiz Attempts</h5>
                                <hr>
                                 <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Quiz Title</th>
                                        <th>Topic</th>
                                        <th>Score</th>
                                        <th>Total Marks</th>
                                        <th>Date Attempted</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($quizAttempts as $attempt)
                                        <tr>
                                            <td>{{ $attempt->quiz->title }}</td>
                                            <td>{{ $attempt->quiz->topic->title }}</td>
                                            <td>{{ $attempt->score }}</td>
                                            <td>{{ $attempt->total_marks }}</td>
                                            <td>{{ $attempt->created_at->format('d M, Y h:i A') }}</td>
                                            <td>
                                                <a href="{{ route('admin.quiz.result', $attempt->id) }}"
                                                    class="btn btn-primary btn-sm">View Result</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection