@extends('layouts.auth')

@section('content')
    <div class="container-fluid" id="container-wrapper">
        <div>
            <div class="d-flex">
                <h1 class="flex-grow-1">{{ $user->first_name }} {{ ' ' }} {{ $user->last_name }}</h1>
            </div>

            <div class="card my-4" style="w-100 ">
                <div class="card-body">
                    <h5 class="card-title">General Information</h5>

                    <p class="card-text my-4">
                    <h6>Name: {{ $user->name }}</h6>
                    <span class="font-weight-bold"> Account Status: </span>
                    @if ($user->status == 1)
                        <span style=" color: rgb(19, 197, 19);">
                            <i class="ti ti-arrow-circle-down"></i>
                        </span>
                        Active
                    @else
                        <span style=" color: red;">
                            <i class="ti ti-arrow-circle-down"></i>
                        </span></i> Disabled
                    @endif <br>
                    <span class="font-weight-bold"> Email: </span>{{ $user->email }} <br>
                    <span class="font-weight-bold"> Phone Number: </span> {{ $user->phone_number }}<br>
                    </p>

                </div>
            </div>

            @if ($user->certificates->count() > 0)
            <h4>{{ $user->name }} Certificates</h4>
            <div class="table-responsive">
                <table class="table align-items-center table-flush">
                <thead class="thead-light">
                    <tr>
                    <th>#</th>
                    <th>Certification Number</th>
                    <th>Name</th>
                    <th>Course</th>
                    <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                @if ($user->certificates->count() > 0)
                    @foreach ($user->certificates as $key => $certificate)
                    <tr>
                        <td>{{ $key + 1 }}</td>
                        <td>{{ $certificate->certification_number }}</td>
                        <td>{{ $certificate->user->name }}</td>
                        <td>{{ $certificate->course->title }}</td>
                        <td>
                        <div class="d-flex">
                            <a href="{{ route('certification.show', $certificate->id) }}" class="btn btn-primary btn-sm mx-1">
                            download
                            </a>
                            <div class="mx-1">
                                <form action="{{route('certification.destroy', $certificate->id)}}" method="POST">
                                    @csrf
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </div>
                        </div>
                        </td>
                    </tr>
                    @endforeach
                @else
                <tr>
                    <td colspan="4">
                    <div class="card card-body m-1">
                        No Certificate Found
                    </div>
                    </td>
                </tr>
                @endif
                </tbody>
                </table>
            </div>
            @endif

            @if ($user->role->name == 'Instructor' || $user->role->name == 'Teacher')
                <div class="card my-4">
                    <div class="card-body">
                        <div class="d-flex">
                            <h5 class="flex-grow-1 card-title">Instructor Allocations</h5>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#allocationModal">
                                Allocate to new course
                            </button>
                        </div>

                        <div class="modal fade" id="allocationModal" tabindex="-1" aria-labelledby="allocationModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="allocationModalLabel">allocate {{ $user->name }} to
                                            new course</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('teacher_allocation.store') }}" method="POST">
                                            <div class="form-group">
                                                <label for="course">Course</label>
                                                <select class="form-control" name="course" id="course" required>
                                                    <option>Select Course</option>
                                                    @foreach ($courses as $course)
                                                        <option value="{{ $course->id }}">{{ $course->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-end mt-2">
                                                @csrf
                                                <input type="hidden" name="user_id" value="{{ $user->id }}">
                                                <button class="btn btn-primary" type="submit">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Save changes</button> --}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if ($user->teacherAllocations->count() > 0)
                            <table class="table">
                                <thead>
                                    <th>#</th>
                                    <th>Course</th>
                                    <th>Assigned Date</th>
                                    <th>Assigned By</th>
                                    <th>Action</th>
                                </thead>

                                <tbody>
                                    @foreach ($user->teacherAllocations as $key => $teacherAllocation)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $teacherAllocation->course->title }}</td>
                                            <td>{{ $teacherAllocation->assigned_date }}</td>
                                            <td>{{ $teacherAllocation->assignedBy->name }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <form
                                                        action="{{ route('teacher_allocation.destroy', $teacherAllocation->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        <input type="hidden" name="_method" value="DELETE">
                                                        <button type="submit"
                                                            class="btn btn-danger btn-sm m-1">Delete</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="card card-body">
                                No Allocation Found.
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            @if ($user->role->name == 'Student')
                <div class="card my-4">
                    <div class="card-body">
                        <div class="d-flex">
                            <h5 class="flex-grow-1 card-title">Enrollments</h5>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#enrollmentModal">
                                Enroll to new course
                            </button>
                        </div>
                        <div class="modal fade" id="enrollmentModal" tabindex="-1" aria-labelledby="enrollmentModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="enrollmentModalLabel">Enroll {{ $user->name }} to new
                                            course</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('enrollment.store') }}" method="POST">
                                            <div class="form-group">
                                                <label for="course">Course</label>
                                                <select class="form-control" name="course" id="course" required>
                                                    <option>Select Course</option>
                                                    @foreach ($courses as $course)
                                                        <option value="{{ $course->id }}">{{ $course->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="enrollmentDate">Enrollment Date</label>
                                                <input type="date" name="enrollmentDate" id="enrollmentDate"
                                                    class="form-control" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="paidAmount">Paid Amount</label>
                                                <input type="text" class="form-control" name="paidAmount"
                                                    id="paidAmount" placeholder="Paid Amount">
                                            </div>
                                            <div class="form-group">
                                                <label for="remainingAmount">Remaining Amount</label>
                                                <input type="text" class="form-control" name="remainingAmount"
                                                    id="remainingAmount" placeholder="Remaining Amount">
                                            </div>
                                            <div class="form-group">
                                                <label for="enrollmentStatus">Enrollment Status</label>
                                                <select class="form-control" name="enrollmentStatus"
                                                    id="enrollmentStatus" required>
                                                    <option>Select Enrollment Status</option>
                                                    @foreach ($enrollmentStatuses as $enrollmentStatus)
                                                        <option value="{{ $enrollmentStatus->id }}">
                                                            {{ $enrollmentStatus->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="paymentStatus">Payment Status</label>
                                                <select class="form-control" name="paymentStatus" id="paymentStatus"
                                                    required>
                                                    <option>Select Payment Status</option>
                                                    @foreach ($paymentStatuses as $paymentStatus)
                                                        <option value="{{ $paymentStatus->id }}">
                                                            {{ $paymentStatus->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-end mt-2">
                                                @csrf
                                                <input type="hidden" name="user_id" value="{{ $user->id }}">
                                                <button class="btn btn-primary" type="submit">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                        {{-- <button type="button" class="btn btn-primary">Save changes</button> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($user->enrollments->count() > 0)
                            <table class="table">
                                <thead>
                                    <th>#</th>
                                    <th>Course</th>
                                    <th>Paid Amount</th>
                                    <th>Remaining Amount</th>
                                    <th>Enrollment Status</th>
                                    <th>Payment Status</th>
                                    <th>Enrolled By</th>
                                    <th>Generate Certificate</th>
                                    <th>Action</th>
                                </thead>

                                <tbody>
                                    @foreach ($user->enrollments as $key => $enrollment)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $enrollment->course->title }}</td>
                                            <td>{{ $enrollment->paid_amount }}</td>
                                            <td>{{ $enrollment->remaining_amount }}</td>
                                            <td>{{ $enrollment->enrollmentStatus->name }}</td>
                                            <td>{{ $enrollment->paymentStatus->name }}</td>
                                            <td>{{ $enrollment->enrolledBy->name }}</td>
                                            <td>
                                                <form action="{{ route('report.store-individual-certificate') }}"
                                                    method="POST">
                                                    @csrf
                                                    <input type="hidden" name="user" value="{{ $user->id }}">
                                                    <input type="hidden" name="course" value="{{ $enrollment->course_id }}">
                                                    <button type="submit"
                                                        class="btn btn-secondary btn-sm m-1">Generate</button>
                                                </form>
                                            </td>
                                            <td>
                                                <div class="d-flex">
                                                    <a href="{{ route('enrollment.edit', $enrollment->id) }}"
                                                        class="btn btn-info btn-sm m-1"> Edit</a>

                                                    <form action="{{ route('enrollment.destroy', $enrollment->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        <input type="hidden" name="_method" value="DELETE">
                                                        <button type="submit"
                                                            class="btn btn-danger btn-sm m-1">Delete</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="card card-body">
                                No Enrollment Found.
                            </div>
                        @endif
                    </div>
                </div>

                <div class="card my-4">
                    <div class="card-body">
                        <div class="d-flex">
                            <h5 class="flex-grow-1 card-title">Schedules</h5>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#scheduleModal">
                                Add new schedule
                            </button>
                        </div>
                        <div class="modal fade" id="scheduleModal" tabindex="-1" aria-labelledby="scheduleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="scheduleModalLabel">Add new schedule</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ route('user_schedule.store') }}" method="POST">
                                            <div class="form-group">
                                                <label for="day">Day</label>
                                                <select class="form-control" name="day" id="day" required>
                                                    <option value="">Select Day</option>
                                                    <option value="Monday">Monday</option>
                                                    <option value="Tuesday">Tuesday</option>
                                                    <option value="Wednesday">Wednesday</option>
                                                    <option value="Thursday">Thursday</option>
                                                    <option value="Friday">Friday</option>
                                                    <option value="Saturday">Saturday</option>
                                                    <option value="Sunday">Sunday</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label for="start_time">Start Time</label>
                                                <input type="time" class="form-control" name="start_time"
                                                    id="start_time" placeholder="">
                                            </div>
                                            <div class="form-group">
                                                <label for="end_time">End Time</label>
                                                <input type="time" class="form-control" name="end_time"
                                                    id="end_time" placeholder="">
                                            </div>
                                            <div class="d-flex justify-content-end mt-2">
                                                @csrf
                                                <input type="hidden" name="user_id" value="{{ $user->id }}">
                                                <button class="btn btn-primary" type="submit">Save</button>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> --}}
                                        {{-- <button type="button" class="btn btn-primary">Save changes</button> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if ($user->schedules->count() > 0)
                            <table class="table">
                                <thead>
                                    <th>#</th>
                                    <th>Day</th>
                                    <th>Start Time</th>
                                    <th>End Time</th>
                                    <th>Action</th>
                                </thead>

                                <tbody>
                                    @foreach ($user->schedules as $key => $schedule)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $schedule->day }}</td>
                                            <td>{{ $schedule->start_time }}</td>
                                            <td>{{ $schedule->end_time }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <a href="{{ route('user_schedule.edit', $schedule->id) }}"
                                                        class="btn btn-info btn-sm m-1"> Edit</a>

                                                    <form action="{{ route('user_schedule.destroy', $schedule->id) }}"
                                                        method="POST">
                                                        @csrf
                                                        <input type="hidden" name="_method" value="DELETE">
                                                        <button type="submit"
                                                            class="btn btn-danger btn-sm m-1">Delete</button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        @else
                            <div class="card card-body">
                                No Schedule Found.
                            </div>
                        @endif
                    </div>
                </div>

                <h5>User Checklists</h5>
                @foreach ($user->enrollments as $enrollment)
                <div class="card mb-4">
                    <div class="card-header">
                        <h6>{{ $enrollment->course->title }}</h6>
                    </div>
                    <div class="card-body">
                        @foreach ($enrollment->course->phases as $phase)
                        <div class="mb-4">
                            <h4>{{ $phase->title }}</h4>
                            @foreach ($phase->chapters as $chapter)
                            <div class="mb-3">
                                <h5>{{ $chapter->title }}</h5>
                                @foreach ($chapter->checklists as $checklist)
                                <div class="mb-2">
                                    <h6>{{ $checklist->title }}</h6>
                                    <ul class="list-group">
                                        @foreach ($checklist->checklistItems as $checklistItem)
                                        <li class="list-group-item d-flex justify-content-between align-items-center">
                                            <span>{{ $checklistItem->title }}</span>
                                            @php
                                                $userChecklistItem = $checklistItem->userChecklistItems()->where('user_id', $user->id)->first();
                                            @endphp
                                            @if ($userChecklistItem)
                                                <div>
                                                    <span class="badge bg-success">Completed</span>
                                                    <form action="{{ route('checklist-items.update', ['userId' => $user->id, 'checklistItemId' => $checklistItem->id]) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-danger btn-sm">Mark as Not Completed</button>
                                                    </form>
                                                </div>
                                            @else
                                                <div>
                                                    <span class="badge bg-danger">Not Completed</span>
                                                    <form action="{{ route('checklist-items.update', ['userId' => $user->id, 'checklistItemId' => $checklistItem->id]) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-success btn-sm">Mark as Completed</button>
                                                    </form>
                                                </div>
                                            @endif
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endforeach
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            @endif
        </div>
    </div>

    @endsection