@extends('layout.app')

@section('title', 'Teacher Management')

@section('content')
<section class="container pt-5">
    <div class="row">
        <!-- Sidebar (User info + Account menu) -->
        @include('admin.Include.aside_account')

        <!-- Teacher management -->
        <div class="col-md-8 offset-lg-1 pb-5 mb-2 mb-lg-4 pt-md-5 mt-n3 mt-md-0">
            <div class="notification" id="notification">
                @if (session('success'))
                    <div class="alert alert-success fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            
                @if ($errors->any())
                <div class="alert alert-success fade show" role="alert">
                    <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

            </div>

            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const notification = document.getElementById('notification');
                    if (notification) {
                        setTimeout(() => {
                            notification.style.display = 'none';
                        }, 5000);
                    }
                });
            </script>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#addTeacherModal">
                    <i class='bx bxs-plus-circle'></i> Add New Teacher
                </button>
            </div>

            <!-- Add Teacher Modal -->
            <div class="modal fade" id="addTeacherModal" tabindex="-1" role="dialog" aria-labelledby="addTeacherLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addTeacherLabel">Add Teacher</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <form method="POST" action="{{ route('teachers.add') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Teacher Name</label>
                                    <input type="text" id="name" name="name" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" id="email" name="email" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">Password</label>
                                    <input type="password" id="password" name="password" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" id="subject" name="subject" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label for="profile_photo" class="form-label">Profile Photo</label>
                                    <input type="text" id="profile_photo" name="profile_photo" class="form-control">
                                </div>

                                <div class="mb-3">
                                    <label for="price_per_session" class="form-label">Price per Session</label>
                                    <input type="number" id="price_per_session" name="price_per_session" class="form-control" required>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Add Teacher</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="ps-md-3 ps-lg-0 mt-md-2 py-md-4">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Teacher Name</th>
                                <th>Email</th>
                                <th>Subject</th>
                                <th>Price per session</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($teachers as $teacher)
                                <tr>
                                    <th scope="row">{{ $loop->iteration }}</th>
                                    <td>{{ $teacher->name }}</td>
                                    <td>{{ $teacher->user->email }}</td>
                                    <td>{{ $teacher->subject }}</td>
                                    <td>{{ $teacher->price_per_session }}</td>

                                    <td>
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal-3" onclick="fillModal({{ json_encode($teacher) }})">
                                            <i class='bx bx-edit-alt'></i>
                                          </button>
                                        <form action="{{ route('teachers.delete', $teacher->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this teacher?');">
                                                <i class='bx bx-trash'></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>              
            </div>
        </div>
    </div>
</section>
<!-- Update Category Modal -->
<div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Update Teacher</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form class="needs-validation" method="POST" action="" id="updateTeacherForm" enctype="multipart/form-data" novalidate>                @csrf
                @method('PUT') <!-- Add this line to specify PUT method for update -->
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Teacher Name</label>
                        <input type="text" id="name-update" name="name" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" id="email-update" name="email" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" id="password-update" name="password" class="form-control" >
                    </div>

                    <div class="mb-3">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" id="subject-update" name="subject" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label for="profile_photo" class="form-label">Profile Photo</label>
                        <input type="text" id="profile_photo-update" name="profile_photo" class="form-control">
                    </div>

                    <div class="mb-3">
                        <label for="balance" class="form-label">Balance</label>
                        <input type="number" id="balance-update" name="balance" class="form-control" required>
                    </div>

                    <script>
                        function previewUpdateLogo(event) {
                            const updateLogoPreview = document.getElementById('updateLogoPreview');
                            const file = event.target.files[0];
                            if (file) {
                                const reader = new FileReader();
                                reader.onload = function(e) {
                                    updateLogoPreview.src = e.target.result;
                                    updateLogoPreview.style.display = 'block';
                                }
                                reader.readAsDataURL(file);
                            } else {
                                updateLogoPreview.src = '';
                                updateLogoPreview.style.display = 'none';
                            }
                        }
                        
                        function fillModal(teacher) {
                            // Populate form fields
                            console.log(teacher);
                            document.getElementById('name-update').value = teacher.name;
                            document.getElementById('email-update').value = teacher.user.email;
                            document.getElementById('password-update').value = ''; // Leave password empty for security
                            document.getElementById('subject-update').value = teacher.subject;
                            document.getElementById('profile_photo-update').value = teacher.profile_photo;
                            document.getElementById('balance').value = teacher.balance;

                            // Set form action URL with teacher ID
                            const updateForm = document.getElementById('updateTeacherForm');
                            updateForm.action = `/teachers/update/${teacher.id}`;
                        }

                    </script>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update Category</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection